H5video中实现多个的视频的播放,有详细的代码

最新推荐文章于 2025-05-20 10:42:34 发布

CodeFarmer-957

最新推荐文章于 2025-05-20 10:42:34 发布

阅读量9.9k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36309066/article/details/54380497

本文介绍了一种使用HTML5和JavaScript实现视频自动播放及循环播放的方法。通过定义播放列表和利用JavaScript监听视频结束事件来实现无缝循环播放，适用于网站背景视频等应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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代码：

<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>