下面就由我来哔哔啦。在最近的项目开发中得到这样的一个需求，要求视频和图片成组进行播放。话不多说，下面就来展示代码：
<!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>如果大家有更好的办法，记得联系我额。
广告
