HTML5通过Vedio标签实现视频列表循环播放

jquery实现视频列表循环播放

html部分代码

<video id="video" src="" controls="controls" autoplay="autoplay" class="box_left__video" poster="img/ban1.jpg"></video>
<ul style="display: none">
<li value="img/movie.ogg" class="video_list"></li>
<li value="img/video.mp4" class="video_list"></li>
<li value="img/video2.mp4" class="video_list"></li>
<li value="img/video3.mp4" class="video_list"></li>
<li value="img/video4.mp4" class="video_list"></li>
</ul>

jquery代码

$(function () {
var vLen = $('.video_list').length; // 播放列表的长度
var curr = 0; // 当前播放的视频
$('#video').on('ended', videoPlay);//侦听事件，视频播放完后调用videoPlay()方法
videoPlay();
function videoPlay() {
for(var i=0;i<vLen;i++){
var list = $('.video_list').eq(i);
if(i === curr){
$('#video').attr("src",list.attr('value')); //切换视频链接
list.html('正在播放');   //提示正在播放的视频
}else{
list.html('');
}
}
curr++;
if (curr >= vLen) curr = 0; // 列表播放完，重新播放
}
});