HTML 5 видео-теги видео и аудио-десинхронизация

Question

Во время воспроизведения видео через мой локальный сайт аудио и видео через некоторое время де-синхронизируются, например, 40 минут или так же, если я приостанавливаю видео, а затем un приостановить его ... Я не знаю, если это проблема с html 5, моим браузером, компьютером или как? Но мой звук вокруг 1 второго впереди видео, это очень заметно ... вот мой код для видео в случае, если это имеет значение:

echo "<video class=\"videoContainer\" controls autoplay> 
     <source src=\"$movieUrl\" type=\"video/mp4\"> 
    </video>"; 

я не мог найти решение для этого, в-факт. .. Я не мог найти никого с этой же проблемой!

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

Answer 1

В настоящее время нет хорошего API для синхронизации вещей с временной шкалой видео, например подписи или инфобокс. Спецификация имела для этой цели «диапазоны кий» (которые раньше были «ключевыми точками»); ожидается, что что-то подобное будет добавлено в будущем, включая поддержку декларативных подписок.

Однако на данный момент вам придется либо использовать таймер, либо читать текущее время, либо слушать время ожидания и читать текущее время. timeupdate запускается с интервалом от 15 до 250 мс во время воспроизведения видео, если только предыдущий обработчик события для timeupdate все еще работает, и в этом случае браузер должен пропустить запуск другого события. В настоящее время Opera всегда запускает его с интервалом 250 мс во время воспроизведения видео, в то время как Firefox в данный момент запускает его один раз для каждого кадра. Идея состоит в том, чтобы позволить событию запускаться с большими интервалами, если загрузка системы возрастает, что позволяет сэкономить время работы от батареи на карманном устройстве или сохранить отзывчивость в тяжелом приложении. Суть в том, что вы не должны полагаться на то, что интервал был таким же во времени или между браузерами или устройствами.

Предположим, вы хотите показать элемент div между временами 3s и 7s видео; вы можете сделать это следующим образом:

Hello world! var video = document.getElementsByTagName('video')[0]; var hello = document.getElementById('hello'); var hellostart = hello.getAttribute('data-starttime'); var helloend = hello.getAttribute('data-endtime'); video.ontimeupdate = function(e) { var hasHidden = hello.hasAttribute('hidden'); if (video.currentTime > hellostart && video.currentTime

Скрытый атрибут указывает, что элемент не имеет отношения к делу и должен быть скрыт. Это не поддерживается в браузерах еще, так что у вас есть, чтобы скрыть это с помощью CSS:

*[hidden] { display:none }

Данные-время_запуск и атрибуты данных, времени окончания является пользовательским данных- * атрибуты HTML5 позволяет размещать на любом элементе. Это отлично подходит для включения данных, которые вы хотите читать с помощью скрипта, вместо того, чтобы злоупотреблять атрибутами класса или заголовка. HTML5 также имеет удобный API для атрибутов data- *, но он пока не поддерживается в браузерах, поэтому нам нужно использовать getAttribute немного дольше.

выше будет выглядеть следующим образом, используя таймер вместо:

Hello world! var video = document.getElementsByTagName('video')[0]; var hello = document.getElementById('hello'); var hellostart = hello.getAttribute('data-starttime'); var helloend = hello.getAttribute('data-endtime'); setInterval(function() { var hasHidden = hello.hasAttribute('hidden'); if (video.currentTime > hellostart && video.currentTime

Это будет работать каждые 100 мс. Должны ли вы использовать setInterval или timeupdate, зависит от того, что вы делаете, и согласны ли вы с изменением интервала. Обратите внимание, что приведенный выше пример setInterval также запускается, когда видео не воспроизводится, чего нет в примере timeupdate. Можно очистить интервал с помощью clearInterval, когда видео перестает играть и снова устанавливает его, когда он начинает играть.

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