html
<video id="video" src="" controls="controls" autoplay="autoplay" class="box_left__video" poster="img/ban1.jpg"></video>
<ul style="display: none">
<li value="mp4/video1.mp4" class="video_list"></li>
<li value="mp4/video2.mp4" class="video_list"></li>
<li value="mp4/video3.mp4" class="video_list"></li>
<li value="mp4/video4.mp4" class="video_list"></li>
</ul>
js
$(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; // 列表播放完,重新播放
}
});