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

91

Мне нужно, чтобы видео в формате HTML5 запускалось в определенный момент. Скажем, через 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>

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

javascript html5-video

— Johnydep
источник

2

Какие браузеры? Вы пробовали отложить звонок на несколько миллисекунд? Возможно, для полной загрузки

— видеоэлемента

130

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

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

— Ричард М
источник

2

Это не работает в Safari. Я тоже пробовал событие loadeddata. Любые идеи?

— Симон Перепелица

Ничего. Это проблема формата WEBM. MP4 работает нормально.

— Симон Перепелица

Используйте событие 'durationchange' и всегда вызывайте паузу перед внесением изменений в воспроизведение видео

— Джейсон Уайт

53

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

Вот пример

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

— Rlovtang
источник

Браузерная поддержка хороша. Я думаю, что все браузеры, поддерживающие HTML5, также поддерживают хотя бы базовые временные фрагменты мультимедиа.

— Джим С.

@michaelhanon, было бы довольно легко написать полифилл для IE, чтобы добиться этого. Обнаружить браузер, если он не поддерживается, разбить URL-адрес, найти параметр запроса, использовать Javascript для изменения времени видео ... Я могу это сделать, если у меня будет возможность

— gdgr

есть ли фрагмент для установки времени КОНЕЦ?

— DGoiko

Это позволяет даже доли секунды после точки: #t=17.79^ _ ^

— Клесун

51

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

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

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

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

— Анита
источник

вторая цифра, похоже, не указывает на то, сколько видео было загружено с самого начала ... первая цифра работала, хотя. есть идеи?

— Martian2049

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

— Martian2049

28

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

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

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

— BobK
источник

вторая цифра, похоже, не указывает на то, сколько видео было загружено с самого начала ... первая цифра работала, хотя. есть идеи?

— Martian2049,

При работе с браузерами всегда лучше проверять спецификацию W3C и caniuse.com, чтобы узнать, насколько широко поддерживается функция. (Лучшие ответы StackOverflow ссылаются на спецификации.) В этом случае они называются «Медиа-фрагменты», и спецификация здесь. w3.org/TR/media-frags

— Майкл Шепер,

3

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

— Роберт Рейнхардт
источник

Я думаю, что загруженные метаданные должны быть правильным событием, но я тоже получал seekable.length 0 (только в Safari на OSX), если только я не слушал загруженные данные. Спасибо

— Statuswoe 02

1

Почему это было отклонено? Вероятно, это не имеет прямого отношения к примеру, предоставленному OP, но он фактически точен и имеет отношение к общей теме вопроса.

— JayPea

3

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

— Камила
источник

1

Это просто повторение двух других высоко оцененных ответов, которые были написаны около 5 лет назад.

— Майкл Шепер,