JS轮流播放视频和图片
2020-01-07 16:47 一截生长 阅读(1607) 评论(0) 收藏 举报主要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="width:100%; height:auto"></video>
浙公网安备 33010602011771号