HTML5 video的多视频循环播放

在做播放历史视频的时候，有连续播放视频的需求，分享一下实现方法。

html代码：

<div class="video">

    <div class="container">

        <div class="video-details row">

            <h4 class="text-left color-white">初始视屏名</h4>

            <video src="初始视屏地址" poster="" autoplay="true" controls="true" volume="true" class="width-full" id="video-details"></video>

            <div class="back-index text-center"></div>

        </div>

    </div>

</div>

JS代码：

<script type="text/javascript">

$(window).load(function(){

 	var vList = [‘video1’,’video2’,’video3’]; // 播放列表

        var vLen = vList.length;  

        var curr = 0;  

        var myvideo = document.getElementById("video-details");  

        myvideo.onended = function() {
 

            curr++;   

            if(curr >= vLen){   

                curr = 0; //重新循环播放

            }

            myvideo.src = vList[curr];    

 	    var $text =  vList[curr];  

            myvideo.load();    

            myvideo.play();  

            $(".video-details h4").text($text);

        };

    })   
        
</script>