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>
    

      

  • 相关阅读:
    Linux:DHCP服务配置
    调整 全局jvm 大小 tomcat 调整jvm大小
    Arts打卡第8周
    mysql 对返回的值是null进行判断和重新赋值
    从xml中返回的对象,和new 返回的对象时不同的。
    检查时异常和运行是异常 + 事务回滚 +隔离级别
    怎么在for循环中新建出不同的list
    mysql中查询某个字段重复的数据
    Arts打卡第7周
    将Excel文件导入到Navicat Premium中日期变为0000-00-00
  • 原文地址:https://www.cnblogs.com/xlxr45/p/12162408.html
Copyright © 2011-2022 走看看