Wiedergabe einer Videoschleife für mehrere Dateitypen

Question

Ich habe eine Reihe von Videos, die ich als Schleife auf einer Website spiele. Ich habe diesen Teil funktioniert, aber jetzt versuche ich herauszufinden, wie man die entsprechenden Dateiformate lädt. Ich habe die Videos sowohl im WebM- als auch im MP4-Format. Ich habe versucht, beide Dateitypen in das Array zu setzen und dachte, dass, wenn es für den Browser des Benutzers nicht geeignet wäre, es einfach nicht laden und zum nächsten springen würde (wie video1.webm und video1.mp4 hatten jeweils ihren eigenen Eintrag und es gab 6 Elemente in meinem Array), aber als ich es in Chrome getestet habe, schien es jedes Video zweimal abzuspielen. Hier

ist der Code Ich habe bisher:

<video autoplay id="myVideo"> 
<source src="video1.webm" type="video/webm"> 
<source src="video1.mp4" type="video/mp4"> 
</video> 


<script> 
var videoSource = new Array(); 
videoSource[0] = 'video1.webm'; 
videoSource[1] = 'video2.webm'; 
videoSource[2] = 'video3.webm'; 
var i = 0; 
var videoCount = 4; 

function videoPlay(videoNum) { 
    document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]); 
    document.getElementById("myVideo").load(); 
    document.getElementById("myVideo").play(); 
} 
document.getElementById('myVideo').addEventListener('ended', myHandler, false); 
videoPlay(0); 

function myHandler() { 
i++; 
if (i == (videoCount - 1)) { 
    i = 0; 
    videoPlay(i); 
} else { 
    videoPlay(i); 
} 
} 
</script> 

Answer 1

<video autoplay id="myVideo"> 
<source src="video1.webm" type="video/webm"> 
<source src="video1.mp4" type="video/mp4"> 
</video> 


<script> 
var videoSource = ['video1.webm', 'video2.webm', 'video3.webm', 'video4.webm']; 

var i = 0; 
var videoCount = videoSource.length; 

function videoPlay(videoNum) { 
    document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]); 
    document.getElementById("myVideo").load(); 
    document.getElementById("myVideo").play(); 
} 
document.getElementById('myVideo').addEventListener('ended', myHandler, false); 
videoPlay(0); 

function myHandler() { 
if(i < videoCount){ 
    i++; 
    videoPlay(i); 
}else{ 
    i = 0; 
    videoPlay(i); 
} 
} 
</script>