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

Question 1

Мне нужно, чтобы видео в формате 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>

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

Question 2

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

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

Question 3

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

Вот пример

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

Question 4

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

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

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

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

Question 5

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

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

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

Question 6

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

Question 7

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

Answer 1

Мне нужно, чтобы видео в формате 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>

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

Answer 2

2

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

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

Answer 3

130

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

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

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

2

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

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

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

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

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

Джейсон Уайт

Answer 4

2

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

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

Answer 5

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

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

Answer 6

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

Джейсон Уайт

Answer 7

53

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

Вот пример

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

Rlovtang
источник

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

Джим С.

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

gdgr

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

DGoiko

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

Клесун

Answer 8

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

Джим С.

Answer 9

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

gdgr

Answer 10

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

DGoiko

Answer 11

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

Клесун

Answer 12

51

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

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

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

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

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

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

Martian2049

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

Martian2049

Answer 13

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

Martian2049

Answer 14

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

Martian2049

Answer 15

28

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

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

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

BobK
источник

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

Martian2049,

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

Майкл Шепер,

Answer 16

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

Martian2049,

Answer 17

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

Майкл Шепер,

Answer 18

3

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

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

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

Statuswoe 02

1

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

JayPea

Answer 19

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

Statuswoe 02

Answer 20

1

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

JayPea

Answer 21

3

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

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

1

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

Майкл Шепер,

Answer 22

1

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

Майкл Шепер,

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

Ответы: