HTML5 视频列表循环播放

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; // 列表播放完，重新播放
        }
});