CODEWITHSUNDEEP
javascripthtmlhtml5-video
jeffreynolte
jeffreynolte

Reputation: 3779

Control HTML5 video player loop with JavaScript

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 playback to zero?

Upvotes: 8

Views: 37948

Answers (3)

Bipul Roy
Bipul Roy

Reputation: 163

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.

Upvotes: 1

dxpkumar
dxpkumar

Reputation: 371

<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

Upvotes: 0

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 827218

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();

Upvotes: 25

Related Questions