Видео HTML5 не будет зацикливаться

У меня есть видео в качестве фона для веб-страницы, и я пытаюсь получить его в цикле. Вот код:

<video autoplay='true' loop='true' muted='true'>
  <source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source>
</video>

Несмотря на то, что я сказал видео в цикле, это не так. Я также попытался получить его в цикле с атрибутом onended (согласно этот поток поддержки Mozilla, я также пробовал этот бит jQuery). До сих пор ничего не работало. Это проблема с Chrome или моим кодом?

Edit:

Я проверил сетевые события и HEAD рабочей копии (http://fhsclock-labs.heroku.com/no-violence) по сравнению с приложением, которое я пытаюсь получить. Разница заключается в том, что рабочая копия служит для ролика из статического актива на Heroku (через Varnish, по-видимому), в то время как моя работает от GridFS (MongoDB).

Вкладка "Сеть" в Chrome Inspector показывает, что в моем приложении видео запрашивается три раза. Один раз статус "ожидает", второй "отменен", а последний - 200. Рабочая копия показывает только два запроса: одно состояние находится на рассмотрении, а другое - 206 частичного содержимого. Однако после того, как видео воспроизводится один раз, этот запрос изменяется на "Отменено", и он делает другой запрос для этого видео. В моем приложении этого не происходит.

Что касается Type, в моем приложении два являются "undefined" и другие "video/mp4" (которые, как предполагается, должны быть). В рабочем приложении все запросы - "video/mp4".

Кроме того, я получаю предупреждения Resource interpreted as Other but transferred with MIME type undefined. в консоли.

Я не совсем уверен, с чего начать. Я полагаю, что проблема связана с сервером, поскольку она служит файлу как статические активы. Возможно, сервер не отправляет правильный тип контента. Это может быть проблема с GridFS. Я не знаю.

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

ОТВЕТЫ

Ответ 1

А, я просто наткнулся на эту точную проблему.

Как оказалось, цикл (или любой вид поиска, если на то пошло) в <video> элементах в Chrome работает только в том случае, если видеофайл был подан сервером, который понимает запросы частичного контента. то есть сервер должен выполнять запросы, содержащие заголовок "Range" с ответом 206 "Частичное содержимое". Это даже в случае, если видео достаточно мало, чтобы полностью затухать хром, и больше не происходит групповых поездок: если ваш сервер не соблюдал хром-запрос диапазона в первый раз, видео не будет закодировать или искать.

Итак, да, проблема с GridFS, хотя, возможно, Chrome должен быть более прощающим.

Ответ 2

Простейшее обходное решение:

$('video').on('ended', function () {
  this.load();
  this.play();
});

Событие 'ended' срабатывает, когда видео достигает конца, video.load() сбрасывает видео в начало, а video.play() запускает его воспроизведение сразу после загрузки.

Это хорошо работает с Amazon S3, где у вас не так много контроля над ответами сервера, а также обойти проблемы Firefox, связанные с video.currentTime, которые невозможно настроить, если видео отсутствует метаданные длины.

Подобный javascript без jQuery:

document.getElementsByTagName('video')[0].onended = function () {
  this.load();
  this.play();
};

Ответ 3

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

http://code.google.com/p/chromium/issues/detail?id=39683

http://code.google.com/p/chromium/issues/detail?id=18846

Поскольку Chrome и Safari используют браузеры на основе webkit, вы можете использовать некоторые из этих работ: http://blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how-to-solve-them/

function restartVideo(){
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well.
vid.play();
}

//loop video
vid.addEventListener('ended', restartVideo, false);

Ответ 4

Моя ситуация:

У меня есть одна и та же проблема, однако изменение заголовка сообщения ответа не помогло. Нет цикла, повтора или поиска. Также чистая остановка не работает, но это может быть моя конфигурация.

Ответ:

В соответствии с некоторыми сайтами (они больше не могли их найти) также можно запускать метод load() сразу после окончания видео и до того, как начнется следующее. Это должно перезагрузить источник, вызывая снова рабочий видео/аудио элемент.

@John

Обратите внимание, что ваши ответы/ссылки являются обычными ошибками и не сфокусированы на этой проблеме. Причина этого в том, что использование сервера/веб-сервера. В то время как ошибки, описанные в этих ссылках, различны. То также почему ответ не работает.

Я надеюсь, что это поможет, я все еще ищу решение.

Ответ 5

На всякий случай ни один из приведенных выше ответов не поможет вам, убедитесь, что у вас не установлен ваш инспектор с параметром "Отключить кеш". Поскольку Chrome захватывает видео из кеша, он будет работать в основном один раз. Просто отлаживали это за 20 минут, прежде чем осознать, что это причина. Для справки, и поэтому я знаю, что я не единственный еще один отчет об ошибке хрома.

Ответ 6

он слишком хромает, но dropbox использует правильный код состояния. Поэтому загрузите в Dropbox и замените www на dl.

Таким образом, используя URL-адрес Dropbox, воспроизведение видео отлично.

Ответ 7

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

Я загружал файлы mp4 и webm и заметил, что видео не было в Chrome. Это было потому, что файл webm был первым source, указанным, так что Chrome загружал файл webm, а не mp4.

Надеюсь, что это поможет кому-то другому, сталкивающемуся с этой проблемой.

<video autoplay loop>
    <source src="/path-to-vid/video.mp4" type="video/mp4">
    <source src="/path-to-vid/video.webm" type="video/webm">
</video>