<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"); //通过js获取到vedio标签实例
var vedioLi = document.getElementsByTagName("li"); //获取视频列表
 
var vedioArry = new Array("1.webm", "2.webm", "3.webm"); //设置播放视频列表数组
var arryNumber = 0; //设置默认播放位置，方便后面循环播放

for(var j = 0; j < vedioLi.length; j++) {//循环条件为列表的长度
	vedioLi[j].onclick = function() {
	        for(var m = 0; m < vedioLi.length; m++) {
	                vedioLi[m].style.backgroundColor = "black";//为每个类表设置背景为黑色
	        }
                for(var i = 0; i < vedioLi.length; i++) {
		        if(vedioLi[i] == this) { //判断点中的是否为该项
		                vedioLi[i].style.backgroundColor = "darkgray"; //将点击后的背景设置为灰白
		                arryNumber = i; //将当前播放设置为选中的下标
		                myVideo.src = "video/" + vedioArry[i]; //设置播放视频
		                myVideo.play(); //开始播放
	                }
	        }
        }
}

myVideo.addEventListener("ended", function() {//为vedio添加ended监听，当视频播放完毕后执行对应函数
	if(arryNumber == (vedioArry.length - 1)) { //判断是否到了最后一个视频
	        vedioLi[vedioLi.length - 1].style.backgroundColor = "black"; //将前一个列表颜色设为black
		vedioLi[0].style.backgroundColor = "darkgray"; //将当前视频设置为灰白
		myVideo.src = "video/"+vedioArry[0]; //播放第一个视频
		myVideo.play();
		arryNumber = 0;//将下标重设为 0
	} else {
		arryNumber += 1; //每播放一次则将下标加一
		myVideo.src = "video/" + vedioArry[arryNumber];
		vedioLi[arryNumber].style.backgroundColor = "darkgray";
		vedioLi[arryNumber - 1].style.backgroundColor = "black";
		myVideo.play();
	}
 
});