Ogranicza liczbę razy, gdy wideo HTML5 odtwarza się

Question

Wiem, że mogę nieskończenie pętać wideo przy użyciu atrybutu "loop". Ale czy mogę ograniczyć liczbę pętli wideo do 5 razy?

Answer 1

Aby to osiągnąć, musisz użyć JavaScript. Przyjrzeć się poniższym fragmencie:

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>

Więc jak tu się dzieje ...?

1. Zaczynamy od zdefiniowania zmiennej o nazwie iterations, która będzie przechowywać naszą aktualną iterację. Ustawiliśmy to jako 1.
2. Dodajemy detektor zdarzeń do wideo myVideo, który jest uruchamiany po zakończeniu wideo.
3. Następnie sprawdzamy, czy zmienna iterations nie przekroczyła naszej liczby odtworzeń, która jest 5.
4. Ponownie uruchomimy wideo, resetując currentTime do 0, a następnie używając funkcji play(), aby rozpocząć wideo.
5. Następnie zwiększamy zmienną iterations o 1 i cały proces rozpoczyna się ponownie, aż nasza zmienna iterations osiągnie 5, w którym to momencie przestaje.