control html5 video player loop with JavaScript
-
27-09-2019 - |
Question
I am looking to enable looping of html5 video in browsers that do not support the loop tag (ff) with JavaScript. Does anyone know the feasibility of accessing the end of the video play and reverting play back to zero?
Solution
You can detect if the loop
property is supported, and set it to true
.
For browsers that don't support it, you can simply bind the ended
media event, and start it over:
var myVideo = document.getElementById('videoId');
if (typeof myVideo.loop == 'boolean') { // loop supported
myVideo.loop = true;
} else { // loop property not supported
myVideo.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
}
//...
myVideo.play();
OTHER TIPS
You can simply loop the video on or off through loop="false"
for stopping auto video repeat play.
<iframe style="position: absolute; top: 0; left: 0;"
src="http://video/name.mp4" width="100%" height="100%" frameborder="0" webkitallowfullscreen loop="true" controls="false" mozallowfullscreen allowfullscreen></iframe>
This loop="true"
will enable video player loop.
<div>Iteration: <span id="iteration"></span></div>
<video id="video-background" autoplay="" muted="" controls>
<source src="https://res.sdfdsf.mp4" type="video/mp4">
</video>
var iterations = 1;
document.getElementById('iteration').innerText = iterations;
var myVideo = document.getElementById('video-background');
myVideo.addEventListener('ended', function () {
alert('end');
if (iterations < 2) {
this.currentTime = 0;
this.play();
iterations ++;
document.getElementById('iteration').innerText = iterations;
}
}, false);
// Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow