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

Question

Я пытаюсь воспроизвести видео 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> 

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

Answer 1

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

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

Answer 2

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

Вот пример

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

Answer 3

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

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

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

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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