loops - Limit the number of times an HTML5 video plays -


i know can loop video infinitely using 'loop' attribute. can limit number of times video loops perhaps 5 times?

you need use javascript achieve this. have @ snippet below:

var iterations = 1;    document.getelementbyid('iteration').innertext = iterations;    myvideo.addeventlistener('ended', function () {            if (iterations < 5) {                   this.currenttime = 0;          this.play();          iterations ++;                    document.getelementbyid('iteration').innertext = iterations;        }       }, false);
<div>iteration: <span id="iteration"></span></div>    <video width="320" height="240" id="myvideo" controls>      <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />      <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />      browser not support video tag.  </video>

so whats happening here...?

  1. we start defining variable called iterations store our current iteration. set 1.
  2. we add event listener myvideo video fires when video ends.
  3. we check iterations variable hasn't exceeded our number of plays 5.
  4. we restart video resetting currenttime 0 , using play() function start video.
  5. then increment iterations variable 1 , whole process starts again until our iterations variable reaches 5 @ point stops.

Comments