视频与图片成组切换

最新推荐文章于 2024-01-07 16:35:36 发布

Daisy_____

最新推荐文章于 2024-01-07 16:35:36 发布

阅读量658

点赞数

分类专栏：知识点总结文章标签：图片视频前端开发

本文链接：https://blog.csdn.net/Daisy__xu/article/details/70321667

版权

知识点总结专栏收录该内容

14 篇文章 0 订阅

订阅专栏

下面就由我来哔哔啦。
在最近的项目中得到这样的一个需求，要求视频和图片成组进行播放。
话不多说，下面就来展示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.img_box{
				width: 1080px;
				height: 1920px;
			}
			#myvideo{
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head> 
	<body>
		<video id="myvideo" width="100%" height="auto" controls="controls" > 
                你的浏览器不支持HTML5播放此视频 
	        <span style="white-space:pre">    </span><!-- 支持播放的文件格式 --> 
	        <source src="aaa.mp4" type='video/mp4' />  
 		</video>
 		<img src="img/bg.jpg" class="img_box" />
 		<script type="text/javascript" src="js/jquery-1.11.2.js" ></script>
		<script type="text/javascript">   
            $(document).ready(function(){ 
                 video.play();   
            }); 
               
            var videoList = ["318video.mp4","aaa.mp4"]; // 初始化播放列表   
            var videoLen = videoList.length;  
            var curr = 0;  
            var video = document.getElementById("myvideo");   
            video.addEventListener('ended', function(){ 
            	if(curr==0){
            		$(".img_box").attr("src","img/index-bg.png");
            	}else if(curr==1){
            		$(".img_box").attr("src","img/bg.jpg");
            	}
                play(); 
            });    
                
            function play() {   
                video.src = videoList[curr];   
                video.load();    
                video.play();   
                curr++;   
                if(curr >= videoLen){   
                    curr = 0; //重新循环播放 
                }   
                 
            }   
	</script>   
	</body>
</html>

如果大家有更好的办法，记得联系我额。

Daisy_____

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
视频与图片成组切换

下面就由我来哔哔啦。在最近的项目中得到这样的一个需求，要求视频和图片成组进行播放。话不多说，下面就来展示代码： .img_box{ width: 1080px; height: 1920px; } #myvideo{ position: absolute; top: 0; left: 0; }
复制链接

扫一扫