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

Question

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

<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-насилие ) в сравнении с приложением, которое я пытаюсь заставить работать. Разница в том, что рабочая копия передает видео со статического ресурса на Heroku (по-видимому, через Varnish), а моя - с GridFS (MongoDB).

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

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

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

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

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

Answer 1

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

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

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

Answer 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();
};

Answer 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);

Answer 4

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

Answer 5

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

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

Ответ:

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

@ джон

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

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

Answer 6

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

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

Answer 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>