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>
    

      

  • 相关阅读:
    NodeJs 多核多进程并行框架实作 CNode
    Introduction to XCache ¶
    整理了一些常用的ContentType
    Node 下 Http Streaming 的跨浏览器实现
    libev 设计分析
    master + worker模式的node多核解决框架——nodecluster
    HTTP/1.1: Header Field Definitions
    HTTP/1.1 XCache header field
    XCache and XCacheLookup headers explained
    今天看了一些nodejs的文章,抱欠我又肤欠了。。。
  • 原文地址:https://www.cnblogs.com/xlxr45/p/12162408.html
Copyright © 2011-2022 走看看