Limita il numero di volte in cui un video HTML5 viene riprodotto

Question

So che posso eseguire il loop di un video all'infinito utilizzando l'attributo 'loop'. Ma posso limitare il numero di volte in cui il video si ripete forse 5 volte?

Answer 1

Per raggiungere questo obiettivo è necessario utilizzare JavaScript. Dai un'occhiata al frammento di seguito:

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" /> 
 
    Your browser does not support the video tag. 
 
</video>

Quindi, che cosa sta accadendo qui ...?

1. Iniziamo definendo una variabile denominata iterations che memorizzerà la nostra iterazione corrente. Impostiamo questo come 1.
2. Aggiungiamo un listener di eventi al video myVideo che si attiva quando termina il video.
3. Controlliamo quindi che la variabile iterations non abbia superato il numero di riproduzioni che è 5.
4. Riavvia il video reimpostando lo currentTime su 0 e quindi utilizzando la funzione play() per avviare il video.
5. Quindi incrementiamo la variabile iterations per 1 e l'intero processo riprende finché la nostra variabile iterations raggiunge 5 a quel punto si arresta.