Бесшовная петля видео HTML5

Я знаю, что этот вопрос задавался несколько раз, и я просматривал каждый из них здесь, на StackOverflow.

Я просто пытаюсь создать 5-секундное видео MP4 в проигрывателе HTML5, и пусть оно будет плавным. Я пробовал как jwplayer, так и video.js, как локально, так и на веб-пространстве, и ни трюки. Я пробовал использовать "завершенные" события; Я попробовал предварительную загрузку/предварительную загрузку; Я попробовал прослушать последнюю секунду видео, а затем попытался начать полностью обходить события остановки/воспроизведения. Я все еще всегда вижу дрожание, и я все еще всегда вижу значок загрузки (последний Chrome и Firefox).

Для справки, вот некоторые из моих последних кодов для video.js:

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
  width="640" height="480"
  data-setup='{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}'>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
  var myPlayer = videojs("loop_me");
  videojs("loop_me").ready(function(){
    this.on("timeupdate", function(){
      var whereYouAt = myPlayer.currentTime();
      if (whereYouAt > 4) {
        myPlayer.currentTime(1);
      }
    });
  });
</script>

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

ОТВЕТЫ

Ответ 1

Вам не нужны никакие дополнительные скрипты для такого рода материалов.

В теге "video" есть встроенный атрибут цикла, используйте это, и ваше видео будет зацикливаться.

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="480" controls autoplay loop>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

Вы также можете добавить атрибут предварительной загрузки, если хотите. Если вы хотите, вы можете найти дополнительную информацию об этом теге видео: HTML-тег видео

Изменить: Ой. Не заметил комментария Offbeatmammals по вашему вопросу.:)

Ответ 2

Попробуйте следующее:
1) отредактируйте видео таким образом:
 [1s] [2s] [3s] [4s] [5s]
отрежьте 1-й второй блок видео и добавьте его до конца так:
 [2s] [3s] [4s] [5s] [1с] [1с]

2) Использовать код:

<video id="vid"  width="100" height="50" loop autoplay preload="true">
    <source src="something.mp4" type="video/mp4">
</video>

<!-- Goes to end of body of course -->
<script>
    var vid = document.getElementById("vid");
    vid.addEventListener("timeupdate", function () {
        if(this.currentTime >= 5.0) {
            this.currentTime = 0.0;
        }
    });
</script>

Идея заключается в том, чтобы сделать видео бесшовным (конец видео - это начало видео). Кроме того, вы должны убедиться, что видео никогда не заканчивается. Атрибут loop работает с меньшими видеофайлами, но вы видите черное изображение в конце видео, если оно слишком велико (перед следующей итерацией цикла). По сути, до того, как видео заканчивается, вы пытаетесь вернуться к 0.0s.

Я надеюсь, что это поможет.

Ответ 3

  • Doozerman и Offbeatmammal верны: для HTML-видео в HTML5 не требуется Javascript.

  • Об этой паузе перед каждой итерацией: в некоторых браузерах мы также можем наблюдать паузу в конце цикла в наших тестах. Например, в встроенном 22-секундном демо-видео на... http://www.externaldesign.com/Marlin-Ouverson.html

... при OS X, мы видим ~ 0,5 сек. пауза до повторения цикла - только в Firefox и Safari; Chrome и Opera играют в цикле без заметной паузы. Но обратите внимание: для настольных/переносных браузеров на приведенной выше странице представлен дополнительный полноэкранный фоновый видеоролик, который, как представляется, петляет без паузы во всех четырех из вышеперечисленных браузеров.

Ответ 4

вы должны проверить, не сделали ли вы свое видео с помощью одного из этих сайтов для конвертации флеш-видео - один из них добавил пустой кадр в мои видео, что делает мерцание, а не что-то, что связано с HTML5/браузером - должно быть не мерцает с обычной петлей видео HTML5