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