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

Я также обнаружил, что Chrome задыхается, если ключевые кадры MP4 не установлены должным образом. Например, в After Effects в «Выводе», если для расстояния между ключевыми кадрами установлено значение «Авто», видео не будет зацикливаться должным образом.

Я подозреваю, что Chrome нуждается в равномерно делимых ключевых кадрах в пределах длины видео, например, в том, чтобы не заканчиваться между ключевыми кадрами. то есть, если ваше видео состоит из 24 кадров, сделайте расстояние между ключевыми кадрами равномерно делимым, например 4.

Эта проблема решена, и вот решение в моем случае:

У видео было слишком большое разрешение. Даже если битрейт был низким, хром не хотел этого делать. Изменил его размер до 720p, и он работал отлично.

Другие предлагаемые решения, если у вас возникли проблемы:

• Установите правильный тип содержимого, включая кодек.
• Убедитесь, что вы используете браузер, поддерживающий ваш тип файла. Для живых файлов всегда используйте как минимум .mp4 и .ogg, и включайте .webm для безопасности.

• Установите цикл через javascript. Это также хороший запасной вариант для браузеров, которые не в порядке с атрибутом цикла в теге видео (основным примером является ipad). Ниже приведен пример кода, который я скопировал вчера с сайта (извините, не могу вспомнить источник)

  var myVideo = document.getElementById('video');
  if (typeof myVideo.loop == 'boolean') { // loop supported
      myVideo.loop = true;
  } else { // loop property not supported
      myVideo.on('ended', function () {
      this.currentTime = 0;
      this.play();
      }, false);
  }
  myVideo.play();
  

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

Чтобы заставить его работать на localhost, я использовал решение от Joakim Bananskal, но воспроизведение видео вызывало ошибку, потому что он уже пытался его воспроизвести, поэтому мне просто пришлось сначала сбросить видео с помощью load().

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

Мое окончательное решение для localhost ниже:

$("video").each(function () {
    this.loop = false;
    this.onended = function () {
        this.load();
    };
    this.play();
});

с этим HTML:

<video preload="auto" autoplay>
    <source src="/video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="/video.ogg" type="video/ogg">
    <img src="/backupImage.png" />
</video>

По какой-то причине у меня возникли проблемы с привязкой завершенного события.

Вот как я это исправил:

1. удален атрибут 'loop' из видео.

2. добавлен onended для вызова replay ()

    <video autoplay='true' onended="replay()"></video> 

3. определил replay (), как показано ниже:

   function replay() {
       console.log('video ended');
       document.getElementsByTagName('video').currentTime = 0;
       document.getElementsByTagName('video')[0].play();
   }