zoukankan      html  css  js  c++  java
  • 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="100%; height:auto"></video>
    

      

  • 相关阅读:
    BitTorrent源代码分析
    获取网卡网络流量
    获取进程cpu占用
    Python中的下划线命名规则
    python的内建函数isinstance
    python类
    内建函数print(python3.0)
    小象增强学习课件DQN网络和Q-learning
    11月深度学习班第5课风格变化NeuralStyle
    11月深度学习班第5课图像物体检测:rcnn/fast-rcnn/faster-rcnn
  • 原文地址:https://www.cnblogs.com/xlxr45/p/12162408.html
Copyright © 2011-2022 走看看