JS轮流播放视频和图片

半世苍凉 提交于 2020-01-07 17:43:53

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

  

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!