JS轮流播放视频和图片

主要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>

来源：https://www.cnblogs.com/xlxr45/p/12162408.html

标签

videoview

url