主要JS逻辑
function handleImgVideoUrl(curr,srcUrl,imgsAndVideos) { // 设置图片和视频播放 var vList = []; for (let index = 0; index < imgsAndVideos.length; index++) { vList.push( srcUrl + imgsAndVideos[index]); } var myvideo = document.getElementById("videoView"); var vLen = vList.length; if (vList[curr].indexOf('V_') >= 0) { $("#imgView").hide(); $("#videoView").show(); let url = vList[curr]; $('#videoView').attr('src', url); // myvideo.muted=true; curr++; if (curr >= vLen) { curr = 0; //重新循环播放 } myvideo.load(); myvideo.play(); } else { let url = vList[curr]; $("#videoView").hide(); $("#imgView").show(); $("#imgView").attr("src", url); curr++; if (curr >= vLen) { curr = 0; //重新循环播放 } setTimeout(function () { handleImgVideoUrl(curr,srcUrl,imgsAndVideos); }, 5000); } //视频播放完执行的方法 myvideo.onended = function () { if (vList[curr].indexOf('V_') >= 0) { $("#imgView").hide(); $("#videoView").show(); let url = vList[curr]; $('#videoView').attr('src', url); // myvideo.muted=true; myvideo.load(); myvideo.play(); curr++; if (curr >= vLen) { curr = 0; //重新循环播放 } handleImgVideoUrl(curr, srcUrl,imgsAndVideos); } else { // 图片 let url = vList[curr]; $("#videoView").hide(); $("#imgView").show(); $("#imgView").attr("src", url); curr++; if (curr >= vLen) { curr = 0; //重新循环播放 } setTimeout(function () { handleImgVideoUrl(curr, srcUrl,imgsAndVideos); }, 5000); } }; }
调用方法 其中 srcUrl为统一的路径信息,VIArray为图片和视频的名称数组(带后缀)
var curr = 0; handleImgVideoUrl(curr,srcUrl, VIArray);
html 显示
<img id="imgView" class="thumbnail" /> <video id="videoView" src="" autoplay="autoplay" muted="muted" style="100%; height:auto"></video>