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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM