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...?
- we start defining variable called
iterations
store our current iteration. set1
. - we add event listener
myvideo
video fires when video ends. - we check
iterations
variable hasn't exceeded our number of plays5
. - we restart video resetting
currenttime
0
, usingplay()
function start video. - then increment
iterations
variable1
, whole process starts again until ouriterations
variable reaches5
@ point stops.
Comments
Post a Comment