В HTML5 Video, как воспроизвести небольшой клип из длинного видео? - PullRequest
13 голосов
/ 23 марта 2012

Я хотел бы показать небольшой клип из длинного видеофайла длиной более 10 минут.Этот сегмент видео будет начинаться со смещением / временем поиска 90 секунд и будет иметь продолжительность 45 секунд.Как я могу это сделать ?

Ответы [ 2 ]

38 голосов
/ 08 июня 2013

HTML5 видео также поддерживает спецификацию Media Fragment URI .Это позволит вам указать только сегмент видео для воспроизведения.Его использование довольно тривиально:

<source src="video.mp4#t=30,45" type="video/mp4"/>

Запускает видео с 30-секундной отметки и приостанавливает видео с 45-секундной отметкой.

10 голосов
/ 24 марта 2012

Филипп Браун прав. Вы можете решить эту проблему, управляя вашим html-плеером через js. например, в этом случае видео запустится автоматически и будет воспроизводить видеофайл с 00: 10 мин до 00: 40 мин

<video id="yourVideoplayer" width="640" height="480" preload="auto"> //preload="auto" buffers the video if initialize. you cannot seek a video which isn t buffering already
  <source src="test.mp4" type="video/mp4" />
  <source src="test.ogv" type="video/ogg" /> 
  This browser is not compatible with HTML 5
</video>

<script type="text/javascript">
   window.onload = playVideoTeaserFrom(10,40);   //this event will call the function after page was loaded

   function playVideoTeaserFrom (startTime, endTime) {
       var videoplayer = document.getElementById("yourVideoplayer");  //get your videoplayer

       videoplayer.currentTime = starttime; //not sure if player seeks to seconds or milliseconds
       videoplayer.play();

       //call function to stop player after given intervall
       var stopVideoAfter = (endTime - startTime) * 1000;  //* 1000, because Timer is in ms
       setTimeout(function(){
           videoplayer.stop();
       }, stopVideoAfter);

   }
 </script>

там могут быть некоторые ошибки, но я думаю, вы поймете

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...