Воспроизведение видео цикла для нескольких типов файлов

Question

У меня есть массив видеороликов, которые я играю как петля на веб-сайте. У меня есть эта часть работы, но теперь я пытаюсь понять, как загрузить соответствующие форматы файлов. У меня есть видео в форматах webm и mp4. Я попытался поместить оба типа файлов в массив, думая, что если он не подходит для браузера пользователя, он просто не загружается и переходит к следующему (например, видео1.webm и video1.mp4 у каждого есть свои собственные записи, и 6 элементов в моем массиве), но когда я протестировал его в хроме, он дважды воспроизводил каждое видео.

Вот код, который я до сих пор:

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