[html5]多视频列表连播效果（实现原理）代码参考

[html5]多视频列表连播效果（实现原理）代码参考

<div id="playervideo" class="portfolio-slideshow flexslider animate-onscroll">   
       
                        <!-- Video player -->   
                        <!--poster is 缩略图-->   
                           
                        <video id="example_video_1" class="video-js vjs-default-skin" 
controls preload="none" poster="video/demo.jpg" data-setup="{}" height="500" width="100%">   
                            <source src="video/demo.mp4" type='video/mp4' />   
                        </video>   
                        <script language="javascript">   
                        var vList = ['video//demo.mp4', 'video//demo01.mp4', 'video//demo.mp4']; // 初始化播放列表   
                        var vLen = vList.length; // 播放列表的长度   
                        var curr = 0; // 当前播放的视频   
                           
                        var video = document.getElementById("example_video_1");   
                           
                        /*var video = document.createElement("VIDEO");  
                        video.setAttribute("width", "100%");  
                        video.setAttribute("height", "500");  
                        video.setAttribute("id", "example_video_1");  
                        video.setAttribute("class", "video-js vjs-default-skin");  
                        video.setAttribute("preload", "none");  
                        video.setAttribute("poster", "video//demo.jpg");  
                        video.setAttribute("data-setup", "{}");  
                        video.setAttribute("controls", "yes");  
                        document.getElementById("playervideo").appendChild(video);*/   
                        //document.body.appendChild(video);   
   
                        video.addEventListener('ended', play);   
                        play();   
                        function play(e) {   
                            video.src = vList[curr];   
                            video.load();    
                            video.play();   
                            curr++;   
                            if(curr >= vLen){   
                                curr = 0; // 播放完了，重新播放   
                            }   
                           
                        }   
                        </script>   
                        <!-- /Video player -->   
                            </div>