视频与图片成组切换

来源：互联网发布：客户达软件多少钱编辑：程序博客网时间：2024/06/06 01:22

下面就由我来哔哔啦。

在最近的项目中得到这样的一个需求，要求视频和图片成组进行播放。

话不多说，下面就来展示代码：

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

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

0 0