controlar el bucle del reproductor de video html5 con JavaScript

Question

Estoy buscando habilitar el bucle de video html5 en los navegadores que no admiten la etiqueta de bucle (ff) con JavaScript. ¿Alguien sabe la viabilidad de acceder al final de la reproducción del video y revertir el juego a cero?

Answer 1

Puede detectar si la propiedad loop es compatible, y configurarlo en true.

Para los navegadores que no soporten, puede simplemente enlazar el evento ended medios de comunicación, y empezar de nuevo:

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

<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 

Answer 3

puede simplemente bucle de vídeo o desactivar a través loop="false" para detener juego de repetición de video automático.

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

Esto permitirá loop="true" vídeo reproductor de bucles.