html自动循环播放视频列表

有多个视频，一个播放完以后另一个播放，知道最后，再从头循环播放。

代码如下：

<video id="video1" class="indexBanner" autoplay>
<!-- <source src="vedio/first.mp4" type="video/mp4" />
<source src="vedio/second.mp4" type="video/mp4" /> --> <!-- <source src="vedio/second.ogg" type="video/ogg" /> -->
Your browser does not support HTML5 video. </video>
<script type="text/javascript">
debugger;
var vList = [ 'vedio/first.mp4', 'vedio/second.mp4' ]; // 初始化播放列表 var
vLen = vList.length; // 播放列表的长度
var curr = 0; // 当前播放的视频
var video = document.getElementById("video1");
video.addEventListener('ended', play);
play();
function play() {
var video = document.getElementById("video1");
video.src = vList[curr];
video.load(); //如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可
video.play();
curr++;
if (curr >= vLen)
curr = 0; // 播放完了，重新播放
}
</script>

很简单，就是简历一个数组，存放视频文件；然后对vedio设置src属性，就是逐个添加视频文件，并监听播放是否结束；结束就修改src，换成下一个视频；如此循环。