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();
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;
}
});