diff --git a/js/pages/video/video.js b/js/pages/video/video.js index 858d01c..f8b03e9 100644 --- a/js/pages/video/video.js +++ b/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) - playControl(); + let newobj=getPlay(puid,getWindBox(),0); + 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; + +} \ No newline at end of file diff --git a/js/pages/video/videoAjax.js b/js/pages/video/videoAjax.js index 0c2881a..de4bc55 100644 --- a/js/pages/video/videoAjax.js +++ b/js/pages/video/videoAjax.js @@ -34,9 +34,11 @@ function loadVideoTree() { item.title = '' + titleName + '' if(isPlay){ let puid = item.id.replace('QJ', '').split("-")[0]; - QXPlayVideo(puid, '0', winDom) - playControl(); - videoObject.devCode = puid; + playList.push(getPlay(puid,winDom,0)); + playVideList(); + // 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 nowDmoScree){ + playList=playList.slice(-nowDmoScree); + } + for (let i = 0; i nowDmoScree){ + playList=playList.slice(-nowDmoScree); + } + console.log(playList) + for (let i = 0; i 视频流地址 stashInitialSize: 128 // 减少首桢显示等待时长 }, { - enableWorker: false, //不启用分离线程 - enableStashBuffer: false, //关闭IO隐藏缓冲区 - reuseRedirectedURL: true, //重用301/302重定向url,用于随后的请求,如查找、重新连接等。 - autoCleanupSourceBuffer: true, //自动清除缓存 - fixAudioTimestampGap: false//false才会音视频同步 + enableWorker: false, + autoCleanupSourceBuffer: true, //清理缓冲区 + enableStashBuffer: false, + stashInitialSize: 128, // 减少首桢显示等待时长 + statisticsInfoReportInterval: 600 }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); //init3D(); - flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => { - if (flvPlayer) { - //播放失败销毁窗口 - destoryVideo(flvPlayer); - videoObject.playState = false; - } - }); - flvPlayer.on(flvjs.Events.SCRIPTDATA_ARRIVED, (errorType, errorDetail, errorInfo) => { - if (flvPlayer) { - videoObject.playState = true; - // $('.noVideoMask').css('background-image', 'none') - //视频断流、延迟处理 - $('#' + dom).attr("ontimeupdate", "progress(event)") - recordVideo(); - } - }); - // 【重要事件监听】http请求建立好后,该事件会一直监听flvjs实例 - flvPlayer.on(flvjs.Events.STATISTICS_INFO, (res) => { - if (this.leaveRouter || this.changeLampPost) { // 离开路由或切换设备 - // 销毁实例 - destoryVideo(flvPlayer); - videoObject.playState = false; - } - }); - flvPlayer.play(); + // flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => { + // if (flvPlayer) { + // //播放失败销毁窗口 + // destoryVideo(flvPlayer); + // videoObject.playState = false; + // } + // }); + + + setTimeout(function () { + flvPlayer.play(); + }, 200); + // flvPlayer.on(flvjs.Events.SCRIPTDATA_ARRIVED, (errorType, errorDetail, errorInfo) => { + // if (flvPlayer) { + // videoObject.playState = true; + // // $('.noVideoMask').css('background-image', 'none') + // //视频断流、延迟处理 + // $('#' + dom).attr("ontimeupdate", "progress(event)") + // recordVideo(); + // } + // }); + // // 【重要事件监听】http请求建立好后,该事件会一直监听flvjs实例 + // flvPlayer.on(flvjs.Events.STATISTICS_INFO, (res) => { + // if (this.leaveRouter || this.changeLampPost) { // 离开路由或切换设备 + // // 销毁实例 + // destoryVideo(flvPlayer); + // videoObject.playState = false; + // } + // }); + // flvPlayer.play(); } - + return flvPlayer; } } function init3D() { diff --git a/pages/video/video.html b/pages/video/video.html index ad9daaa..ed1714d 100644 --- a/pages/video/video.html +++ b/pages/video/video.html @@ -112,7 +112,7 @@
- +