修改默认条数

js/pages/video/video.js

@@ -1,5 +1,9 @@
 let layer, form, util, dtree, videoTree;
+//默认播放窗口
 let winDom = 'videoPlayer1';
+let videoDom="windowbox1";
+let nowDmoScree=1;
+let playList=[];
 layui.config({
     base: "../../plugin/layui-v2.9.7/layui/dtree/", //此处路径请自行处理, 可以使用绝对路径
 }).extend({
@@ -27,8 +31,13 @@ layui.config({
         puid = puid.substring(0, puid.length - 2);
         if (puid) {
             parent.layer.msg("视频加载中,请稍候...", { icon: 16, scrollbar: false, time: 1000, });
-            QXPlayVideo(puid, '0', winDom)
+            let newobj=getPlay(puid,getWindBox(),0);
-            playControl();
+            playList.push(newobj);
+            console.log("4444");
+            console.log(playList);
+            playVideList();
+            // QXPlayVideo(puid, '0', winDom)
+            // playControl();
             videoObject.devCode = puid;
         } else {
             return parent.layer.msg('请选择球机', { icon: 7 });
@@ -64,3 +73,43 @@ layui.config({
         }
     });
 });
+
+/**
+ * 获取播放对象
+ * @param puid
+ * @param widBox
+ * @param state
+ */
+function getPlay(puid,widBox,state){
+    let playData={};
+    playData.puid=puid;
+    playData.windBox=widBox;
+    playData.state=state;
+    return  playData;
+}
+
+//否则返回 最后一个box 进行替换
+function getWindBox(){
+    for (let j = 1; j <= nowDmoScree; j++) {
+        let noCz=true;
+        let winBox2="videoPlayer"+j;
+        for (let i = 0; i < playList.length; i++) {
+            var widBox=playList[i].windBox;
+            if(widBox==winBox2){
+                 noCz=false;
+            }
+        }
+        if(noCz){
+           return winBox2;
+        }
+    }
+    if(playList.length>nowDmoScree){
+        console.log(playList[0].windBox)
+        destoryVideo(playList[0].flvPlayer)
+        playList.pop();
+    }
+    let obj=playList[0]
+    playList.pop();
+    return  obj.windBox;
+
+}

js/pages/video/videoAjax.js

@@ -34,9 +34,11 @@ function loadVideoTree() {
                     item.title = '<img src="../../img/video/ball_online.png"><span data-mtpis="'+item.title+'">' + titleName + '</span>'
                     if(isPlay){
                         let puid = item.id.replace('QJ', '').split("-")[0];
-                        QXPlayVideo(puid, '0', winDom)
+                        playList.push(getPlay(puid,winDom,0));
-                        playControl();
+                        playVideList();
-                        videoObject.devCode = puid;
+                        // QXPlayVideo(puid, '0', winDom)
+                        // playControl();
+                        // videoObject.devCode = puid;
                         isPlay=false;
                     }
                 } else {
@@ -60,6 +62,32 @@ function loadVideoTree() {
     }
 }
 
+function oneVideo(){
+    for (let i = 2; i < 5; i++) {
+        document.getElementById("windowbox" + i).style.cssText = "width: 48.5%;height: 48.8%;";
+        document.getElementById("videoPlayer"+i).style.cssText = "width: 100%;height: 100%;";
+        $('.video'+i+'-dimensions').css("width", "100%");
+        $('.video'+i+'-dimensions').css("height", "100%");
+        document.getElementById("windowbox" + i).style.display = "none";
+    }
+    document.getElementById("windowbox" + 1).style.cssText = "width: 100%;height: 100%;";
+    document.getElementById("videoPlayer"+1).style.cssText = "width: 100%;height: 100%;";
+    nowDmoScree=1;
+    while (playList.length > nowDmoScree) {
+        console.log(playList[0].windBox)
+        destoryVideo(playList[0].flvPlayer);
+        playList.pop();
+    }
+    //播放
+    for (let i = 0; i <playList.length ; i++) {
+        if( playList[i].state!=1){
+            flvPlayer= QXPlayVideo(playList[i].puid, '0', playList[i].windBox);
+            playList[i].flvPlayer=flvPlayer;
+            playList[i].state=1;
+        }
+    }
+
+}
 function fourVideo(){
     for (let i = 1; i < 5; i++) {
         document.getElementById("windowbox" + i).style.cssText = "width: 48.5%;height: 48.8%;";
@@ -68,8 +96,36 @@ function fourVideo(){
         $('.video'+i+'-dimensions').css("height", "100%");
         document.getElementById("windowbox" + i).style.display = "block";
     }
+
+    nowDmoScree=4;
+    console.log(nowDmoScree);
+    if(playList.length>nowDmoScree){
+        playList=playList.slice(-nowDmoScree);
+    }
+    for (let i = 0; i <playList.length ; i++) {
+        QXPlayVideo(playList[i].puid, '0', playList[i].windBox);
+        playControl();
+    }
     for (var i = 5; i <= 9; i++) {
         document.getElementById("windowbox" + i).style.display = "none";
     }
-    console.log("1")
+
+}
+
+
+function playVideList(){
+    console.log(playList)
+    if(playList.length>nowDmoScree){
+        playList=playList.slice(-nowDmoScree);
+    }
+    console.log(playList)
+    for (let i = 0; i <playList.length ; i++) {
+        if( playList[i].state!=1){
+            flvPlayer= QXPlayVideo(playList[i].puid, '0', playList[i].windBox);
+            playList[i].flvPlayer=flvPlayer;
+            playList[i].state=1;
+        }
+
+    }
+    console.log(playList);
 }

js/pages/video/videoConnect.js

@@ -75,7 +75,9 @@ function getQXConnect() {
  */
 function QXPlayVideo(puId, idx, dom) {
     //播视频接口
-    destoryVideo(flvPlayer);
+    console.log(flvPlayer);
+    console.log(dom);
+  //  destoryVideo(flvPlayer);
     let url = qxUrl + "stream.flv?puid=" + puId + "&idx=" + idx + "&stream=0&token=" + qxToken;
     if (flvjs.isSupported()) {
         let videoElement = document.getElementById(dom);
@@ -87,44 +89,49 @@ function QXPlayVideo(puId, idx, dom) {
                 url: url, // => 视频流地址
                 stashInitialSize: 128 // 减少首桢显示等待时长
             }, {
-                enableWorker: false, //不启用分离线程
+                enableWorker: false,
-                enableStashBuffer: false, //关闭IO隐藏缓冲区
+                autoCleanupSourceBuffer: true, //清理缓冲区
-                reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
+                enableStashBuffer: false,
-                autoCleanupSourceBuffer: true, //自动清除缓存
+                stashInitialSize: 128, // 减少首桢显示等待时长
-                fixAudioTimestampGap: false//false才会音视频同步
+                statisticsInfoReportInterval: 600
             });
             flvPlayer.attachMediaElement(videoElement);
             flvPlayer.load();
             //init3D();
-            flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
+            // flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
-                if (flvPlayer) {
+            //     if (flvPlayer) {
-                    //播放失败销毁窗口
+            //         //播放失败销毁窗口
-                    destoryVideo(flvPlayer);
+            //         destoryVideo(flvPlayer);
-                    videoObject.playState = false;
+            //         videoObject.playState = false;
-                }
+            //     }
-            });
+            // });
-            flvPlayer.on(flvjs.Events.SCRIPTDATA_ARRIVED, (errorType, errorDetail, errorInfo) => {
+
-                if (flvPlayer) {
+
-                    videoObject.playState = true;
+            setTimeout(function () {
-                    // $('.noVideoMask').css('background-image', 'none')
+                flvPlayer.play();
-                    //视频断流、延迟处理
+            }, 200);
-                    $('#' + dom).attr("ontimeupdate", "progress(event)")
+            // flvPlayer.on(flvjs.Events.SCRIPTDATA_ARRIVED, (errorType, errorDetail, errorInfo) => {
-                    recordVideo();
+            //     if (flvPlayer) {
-                }
+            //         videoObject.playState = true;
-            });
+            //         // $('.noVideoMask').css('background-image', 'none')
-            // 【重要事件监听】http请求建立好后，该事件会一直监听flvjs实例
+            //         //视频断流、延迟处理
-            flvPlayer.on(flvjs.Events.STATISTICS_INFO, (res) => {
+            //         $('#' + dom).attr("ontimeupdate", "progress(event)")
-                if (this.leaveRouter || this.changeLampPost) { // 离开路由或切换设备
+            //         recordVideo();
-                    // 销毁实例
+            //     }
-                    destoryVideo(flvPlayer);
+            // });
-                    videoObject.playState = false;
+            // // 【重要事件监听】http请求建立好后，该事件会一直监听flvjs实例
-                }
+            // flvPlayer.on(flvjs.Events.STATISTICS_INFO, (res) => {
-            });
+            //     if (this.leaveRouter || this.changeLampPost) { // 离开路由或切换设备
-            flvPlayer.play();
+            //         // 销毁实例
+            //         destoryVideo(flvPlayer);
+            //         videoObject.playState = false;
+            //     }
+            // });
+       //     flvPlayer.play();
 
         }
 
-
+        return flvPlayer;
     }
 }
 function init3D() {

pages/video/video.html

@@ -112,7 +112,7 @@
             <div id="video-box">
                 <div id="balla" class="split split-horizontal">
                     <div style="margin-left: 50%">
-                        <button onclick="onVideo()">1</button>
+                        <button onclick="oneVideo()">1</button>
                         <button onclick="fourVideo()">4</button>
                     </div>
                     <div class="layout" style="width: 100%;height: 100%;flex-wrap: wrap;">