Запускати відео HTML5 у певній позиції під час завантаження?

90

Мені потрібно відео 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

— Джоннідеп
джерело

2

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

— відеоелементу

129

Вам потрібно почекати, поки браузер не дізнається тривалість відео, перш ніж ви зможете шукати певний час. Отже, я думаю, ви хочете дочекатися події 'loadedmetadata' приблизно так:

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

— Річард М.
джерело

2

Це не працює в Safari. Я також спробував подію loadeddata. Будь-які ідеї?

— Simon Pepepelitsa

Не зважай. Це проблема з форматом WEBM. MP4 чудово працює.

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

Використовуйте подію 'durationchange' і завжди робіть паузу перед тим, як вносити зміни у відтворення відео

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

53

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

Ось приклад

Це досить круто, ти можеш робити всілякі речі. Але я не знаю поточного стану підтримки браузера.

— рловтанг
джерело

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

— Jim S.

@michaelhanon, було б досить просто написати поліфіл для IE, щоб досягти цього. Виявити браузер, якщо не підтримується, розбити URL-адресу, знайти параметр запиту, використати Javascript, щоб змінити час відео ... Я можу зробити це, якщо отримаю можливість

— gdgr

чи є фрагмент для встановлення часу END?

— DGoiko

Він навіть дозволяє частки секунди після крапки: #t=17.79^ _ ^

— Клесун

50

БЕЗ ВИКОРИСТАННЯ JAVASCRIPT

Просто додайте #t=[(start_time), (end_time)]до кінця URL-адресу медіа. Єдиною невдачею (якщо ви хочете бачити це саме так) є те, що вам потрібно знати, скільки часу триває ваше відео, щоб вказати час закінчення. Приклад:

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

Примітки: Не підтримується в IE

— аніта
джерело

друга цифра, здається, не закінчується, скільки відео було завантажено для початку ... перша цифра спрацювала. Будь-які думки?

— 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

1

Чому це було проти? Можливо, це не пов’язано безпосередньо з прикладом, наведеним в ОП, але фактично є точним і відповідає загальній темі питання.

— JayPea

3

Використання #t=10,20фрагмента мені спрацювало.

— Каміла
джерело

1

Це лише повторення двох інших відповідей з більшим голосом, написаних приблизно 5 років тому.

— Майкл Шепер