H5 多个视频循环播放效果

最新推荐文章于 2024-11-19 10:24:43 发布

转载最新推荐文章于 2024-11-19 10:24:43 发布 · 672 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vali/p/5899601.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML5和JavaScript实现多个视频文件循环播放的方法。通过设置HTML结构和使用JavaScript控制视频播放流程，可以轻松地让多个视频文件在网页上连续循环播放。

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

跟轮播效果差不多

页面HTML结构

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

即可实现多视频循环播放

转载于:https://www.cnblogs.com/vali/p/5899601.html