H5 多个视频 循环播放效果

跟轮播效果差不多

页面HTML结构

?
1
2
3
4
5
<video  id="myvideo" width="100%" height="auto" controls="controls" > 
                你的浏览器不支持HTML5播放此视频 
        <span style="white-space:pre">    </span><!-- 支持播放的文件格式 --> 
        <source src="001.mp4" type='video/mp4' />  
 </video>

JS代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script language="javascript">   
                        $(document).ready(function(){ 
                             video.play();   
                        }); 
                           
                        var vList = ['001.mp4', 'video//1.mp4', 'video//02.mp4']; // 初始化播放列表   
                        var vLen = vList.length;  
                        var curr = 0;  
                        var video = document.getElementById("myvideo");   
                        video.addEventListener('ended', function(){ 
                            play(); 
                        });   
                            
                        function play() {   
                            video.src = vList[curr];   
                            video.load();    
                            video.play();   
                            curr++;   
                            if(curr >= vLen){   
                                curr = 0; //重新循环播放 
                            }   
                             
                        }   
</script>   

即可实现多视频循环播放

posted @   Terre  阅读(10298)  评论(1)    收藏  举报

风光无限好

点击右上角即可分享
微信分享提示