Looping HTML5 video,

Question

I'm trying to loop a section of HTML video using jQuery, in particular, when the video reaches 7 seconds, I want it to loop back to 0. I can't cut the actual video to seven seconds and use the 'loop' function within the video tag as firefox and mobile safari don't support it.

The reason i need it to loop back to 0 is because we're streaming the looped video to Apple TV via AirPlay. I can get it to loop on the iPhone (Mobile Safari) but when it reaches the 'end' of the video, AirPlay stops. I want to trick the browser into playing indefinitely by never reaching the end.

Any Ideas?

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

score 0 · Answer 1 · edited May 23 '17 at 10:26

Here is a slight alternative... https://stackoverflow.com/a/25722747/3681899

Important: Be careful with large files as it's more likely to pause.

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

score 0 · Answer 2 · answered Sep 15 '11 at 03:14

0

<script type="text/javascript">
    $("#myVideo").bind("timeupdate", function(){
        if(this.currentTime > 7)
            this.currentTime = 0;
    })
</script>

answered Sep 15 '11 at 03:14

Emroot

58
4

Thanks Emroot, unfortunately it doesn't seem to loop back to 0 when it reaches 7... are we missing something? – Brenta Sep 15 '11 at 03:55
Very appreciative of your help, unfortunately the playhead continues through past seven seconds... – Brenta Sep 15 '11 at 04:14
Tried this but it still doesn't stop and return to 0: `` – Brenta Sep 15 '11 at 04:46
have you tried using console.log to check if the event has been binded ? maybe you need to add $(document).ready(function(){//code goes here}); – Emroot Sep 15 '11 at 22:13

Looping HTML5 video,

2 Answers2