Зацикливание видео HTML5, - PullRequest
Новая
       5

Зацикливание видео HTML5,

0 голосов
/ 15 сентября 2011

Я пытаюсь зациклить часть видео HTML, используя jQuery, в частности, когда видео достигает 7 секунд, я хочу, чтобы оно вернулось к 0. Я не могу сократить реальное видео до семи секунд и использовать Функция 'loop' внутри тега видео, так как Firefox и мобильное сафари не поддерживают ее.

Причина, по которой мне нужно вернуться к 0, заключается в том, что мы транслируем зацикленное видео на Apple TV через AirPlay. Я могу заставить его зацикливаться на iPhone (Mobile Safari), но когда он достигает «конца» видео, AirPlay останавливается. Я хочу заставить браузер играть бесконечно, никогда не доходя до конца.

Есть идеи?

<script type="text/javascript"> // Script to loop back to back to 0 when it reaches 7 seconds </script>

...

<video id="myVideo" controls="controls" loop="loop"><source src="video.m4v" type="video/mp4" x-webkit-airplay="allow" /></video>

Ответы [ 2 ]

0 голосов
/ 08 сентября 2014

Вот небольшая альтернатива ... https://stackoverflow.com/a/25722747/3681899

Важно: будьте осторожны с большими файлами, так как они с большей вероятностью приостановятся. 

<video id="video1" width="320" height="240" poster="movie.png" autoplay loop>
  <!--<source src="movie.webm" type="video/webm">-->
  <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg">
  <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <object data="http://www.w3schools.com/tags/movie.mp4" width="320" height="240">
    <!--<embed width="320" height="240" src="movie.swf">-->
  </object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>

<script> 
(function () {
    var vidElem = document.getElementById('video1');
    console.log(vidElem);
    vidElem.addEventListener("timeupdate", function () {
        if (vidElem.currentTime > 7) {
            vidElem.currentTime = 0;
            vidElem.play();
        }
    }, false);
})();
</script>
0 голосов
/ 15 сентября 2011 
<script type="text/javascript">
    $("#myVideo").bind("timeupdate", function(){
        if(this.currentTime > 7)
            this.currentTime = 0;
    })
</script>
...