управление html5 видео плеером с помощью JavaScript

Question

Я хочу включить зацикливание видео html5 в браузерах, которые не поддерживают тег loop (ff) с JavaScript. Кто-нибудь знает о возможности доступа к концу воспроизведения видео и возврата воспроизведения к нулю?

Answer 1

Вы можете определить, поддерживается ли свойство loop, и установить для него значение true.

. Для браузеров, которые его не поддерживают, вы можете просто связать медиа-событие ended, иначать все сначала:

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

Answer 2

Вы можете просто включить или выключить видео через loop="false" для остановки автоматического повторного воспроизведения видео.

<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>

Это loop="true" включит цикл воспроизведения видео.

Answer 3

<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