HTML5 通過(guò)Vedio標(biāo)簽實(shí)現(xiàn)視頻循環(huán)播放的示例代碼

<video id="myVedio" autoplay="autoplay" controls="controls" width="800px">
	<source src="video/1.webm"></source>
</video>

<ul>
	<li>視頻一</li>
	<li>視頻二</li>
	<li>視頻三</li>
</ul>

li {
	list-style: none;
        background-color: black;
	color: white;
	text-align: center;
	margin: 5px auto;
	width: 800px;
	font-family: "楷體";
	font-size: 30px;
}

var myVideo = document.getElementById("myVedio"); //通過(guò)js獲取到vedio標(biāo)簽實(shí)例
var vedioLi = document.getElementsByTagName("li"); //獲取視頻列表
 
var vedioArry = new Array("1.webm", "2.webm", "3.webm"); //設(shè)置播放視頻列表數(shù)組
var arryNumber = 0; //設(shè)置默認(rèn)播放位置，方便后面循環(huán)播放

for(var j = 0; j < vedioLi.length; j++) {//循環(huán)條件為列表的長(zhǎng)度
	vedioLi[j].onclick = function() {
	        for(var m = 0; m < vedioLi.length; m++) {
	                vedioLi[m].style.backgroundColor = "black";//為每個(gè)類表設(shè)置背景為黑色
	        }
                for(var i = 0; i < vedioLi.length; i++) {
		        if(vedioLi[i] == this) { //判斷點(diǎn)中的是否為該項(xiàng)
		                vedioLi[i].style.backgroundColor = "darkgray"; //將點(diǎn)擊后的背景設(shè)置為灰白
		                arryNumber = i; //將當(dāng)前播放設(shè)置為選中的下標(biāo)
		                myVideo.src = "video/" + vedioArry[i]; //設(shè)置播放視頻
		                myVideo.play(); //開(kāi)始播放
	                }
	        }
        }
}

myVideo.addEventListener("ended", function() {//為vedio添加ended監(jiān)聽(tīng)，當(dāng)視頻播放完畢后執(zhí)行對(duì)應(yīng)函數(shù)
	if(arryNumber == (vedioArry.length - 1)) { //判斷是否到了最后一個(gè)視頻
	        vedioLi[vedioLi.length - 1].style.backgroundColor = "black"; //將前一個(gè)列表顏色設(shè)為black
		vedioLi[0].style.backgroundColor = "darkgray"; //將當(dāng)前視頻設(shè)置為灰白
		myVideo.src = "video/"+vedioArry[0]; //播放第一個(gè)視頻
		myVideo.play();
		arryNumber = 0;//將下標(biāo)重設(shè)為 0
	} else {
		arryNumber += 1; //每播放一次則將下標(biāo)加一
		myVideo.src = "video/" + vedioArry[arryNumber];
		vedioLi[arryNumber].style.backgroundColor = "darkgray";
		vedioLi[arryNumber - 1].style.backgroundColor = "black";
		myVideo.play();
	}
 
});