Начать HTML5 видео с определенной позиции при загрузке?

Я пытаюсь воспроизвести видео HTML5 (в кодировке VP8). Что я хочу, так это сыграть в определенной позиции. Допустим, время 50 секунд вперед.

Я пытался, но, кажется, есть некоторые проблемы. Можете ли вы предложить, если я что-то не так делаю?

Вот код:

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" /> 
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script> 

Я пытался, но это не работает. Когда видео загружается, оно просто начинает воспроизводиться с самого начала. Однако, если я вызываю это во время воспроизведения, как через некоторое время воспроизводится видео, оно работает нормально. Есть что-то, чего мне не хватает?

6 ответов

Решение

Вам нужно подождать, пока браузер не узнает длительность видео, прежде чем вы сможете искать конкретное время. Итак, я думаю, что вы хотите подождать события "Загруженные метаданные" примерно так:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);

БЕЗ ИСПОЛЬЗОВАНИЯ JAVASCRIPT

Просто добавь #t=[(start_time), (end_time)] в конце вашего медиа-URL. Единственный недостаток (если вы хотите увидеть это таким образом) - вам нужно знать, как долго ваше видео будет указывать время окончания.Пример:

<video>
    <source src="splash.mp4#t=10,20" type="video/mp4">
</video>

Примечания: не поддерживается в IE

Вы можете связать напрямую с URI Media Fragments, просто измените имя файла на file.webm#t=50

Вот пример

Это довольно круто, вы можете делать все что угодно. Но я не знаю текущее состояние поддержки браузера.

Настроить время начала и окончания видео при использовании тега video в html5;

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

где слева от запятой - время начала в секундах, справа от запятой - время окончания в секундах. сбросьте запятую и время окончания, чтобы изменить только время начала.

На Safari Mac для источника HLS мне нужно было использовать событие загруженных данных вместо события метаданных.

Используя #t=10,20 фрагмент работал на меня.

Другие вопросы по тегам