0

I would like for an HTML5 video of mine to loop back to the first frame and pause after playback.

I found this page here and am using the code near the bottom of the page by "Offbeatmammal" which is:

<div id="vOverlay" style="position:relative; width:600px; height:300px; z-index:2;"></div>
<video style="position:relative; top:-300px; z-index:1;width:600px;height:340px;" width="600" height="409" id=videoPlayer controls="controls">
<source src="video.mp4" type="video/mp4">
</video>

<script>
    var v = document.getElementById('videoPlayer');
    var vv = document.getElementById('vOverlay');

    <!-- Play, Pause -->
    vv.addEventListener('click',function(e){
        if (!v.paused) {
            console.log("pause playback");
            v.pause();
            v.firstChild.nodeValue = 'Pause';
        } else {
            console.log("start playback")
            v.play();
            v.firstChild.nodeValue = 'Play';
        }
      });
</script>

I have found a few threads that seem to indicate i need to use this.currentTime = 0; but I have no clue where to add this to the code above. I tried several different places and it just isn't working. Any help is much appreciated.

Thanks!

Community
  • 1
  • 1
Paul Arneson
  • 3
  • 1

1 Answers1

0

When the video is finished. WHEN is key here. You need to search for the "playback finish" event.

seach google for "html5 video events" and you'll find this: http://www.w3schools.com/tags/ref_av_dom.asp

then the code you need to write is:

v.addEventListener("ended", function(){
    this.currentTime = 0;
});
CyberFox
  • 780
  • 6
  • 24