diff --git a/code/public/public/video/common.js b/code/public/public/video/common.js index 1e0ed00..f7e212a 100644 --- a/code/public/public/video/common.js +++ b/code/public/public/video/common.js @@ -446,8 +446,35 @@ async function reportStats(data) { } } +function resolveDPlayerContainer() { + return document.getElementById('dplayer') || document.querySelector('.dplayer'); +} + +function updateDPlayerMaxHeight(maxHeight) { + const videoElement = document.querySelector("video"); + const videoWrap = document.querySelector(".video-play-page .dplayer-video-wrap"); + + if (videoElement) { + videoElement.style.maxHeight = maxHeight; + } + + if (videoWrap) { + videoWrap.style.maxHeight = maxHeight; + } +} + function initDPlayer(strPlayUrl) { - let DomDPlayer = document.getElementById('dplayer') + let DomDPlayer = resolveDPlayerContainer(); + if (!DomDPlayer) { + console.warn('DPlayer 容器不存在'); + return null; + } + + if (!strPlayUrl) { + console.warn('DPlayer 播放地址为空'); + return null; + } + videoPlayer = new DPlayer({ container: DomDPlayer, autoplay: true, @@ -468,25 +495,22 @@ function initDPlayer(strPlayUrl) { // 监听全屏进入事件 videoPlayer.on('fullscreen', function () { - DomDPlayer.classList.add("dp-fullscreen"); - // 设置视频元素的样式,取消 max-height - document.querySelector("video").style.maxHeight = "none"; - document.querySelector(".video-play-page .dplayer-video-wrap").style.maxHeight = "none"; - + if (DomDPlayer.classList) { + DomDPlayer.classList.add("dp-fullscreen"); + } + updateDPlayerMaxHeight("none"); }); // 监听全屏退出事件 videoPlayer.on('fullscreen_cancel', function () { - DomDPlayer.classList.remove("dp-fullscreen"); - // 恢复 max-height 为 480px - if (isMobile()) { - document.querySelector("video").style.maxHeight = "218px"; - document.querySelector(".video-play-page .dplayer-video-wrap").style.maxHeight = "218px"; - } else { - document.querySelector("video").style.maxHeight = strMaxPlayHeight ?? '480px'; - document.querySelector(".video-play-page .dplayer-video-wrap").style.maxHeight = strMaxPlayHeight ?? '480px'; + if (DomDPlayer.classList) { + DomDPlayer.classList.remove("dp-fullscreen"); + } + if (isMobile()) { + updateDPlayerMaxHeight("218px"); + } else { + updateDPlayerMaxHeight(strMaxPlayHeight ?? '480px'); } - }); videoPlayer.on('error', function () { @@ -499,6 +523,8 @@ function initDPlayer(strPlayUrl) { videoPlayer.on('timeupdate', function () { }); + + return videoPlayer; } function findFirstUrl(obj) { @@ -656,4 +682,3 @@ document.addEventListener("DOMContentLoaded", function () { }) - diff --git a/code/public/template/shikong/js/video-info.js b/code/public/template/shikong/js/video-info.js index 52f97db..8141b5f 100644 --- a/code/public/template/shikong/js/video-info.js +++ b/code/public/template/shikong/js/video-info.js @@ -252,35 +252,47 @@ document.addEventListener('DOMContentLoaded', function () { // this.initJyPlayer264(strPlayUrl) }, - initDPlayer(strPlayUrl) { - let DomDPlayer = document.getElementById('dplayer') - videoPlayer = new DPlayer({ - container: DomDPlayer, - autoplay: true, - screenshot: false, - //logo: dplayerLogo, - video: { - url: strPlayUrl, - type: 'hls', - }, - pluginOptions: { - hls: { - maxBufferLength: 600, - }, - }, - }); + initDPlayer(strPlayUrl) { + let DomDPlayer = document.getElementById('dplayer') || document.querySelector('.dplayer') + if (!DomDPlayer) { + console.warn('DPlayer 容器不存在') + return null + } + if (!strPlayUrl) { + console.warn('DPlayer 播放地址为空') + return null + } + videoPlayer = new DPlayer({ + container: DomDPlayer, + autoplay: true, + screenshot: false, + //logo: dplayerLogo, + video: { + url: strPlayUrl, + type: 'hls', + }, + pluginOptions: { + hls: { + maxBufferLength: 600, + }, + }, + }); - videoPlayer.play() + videoPlayer.play() + - - // 监听全屏进入事件 - videoPlayer.on('fullscreen', function () { - DomDPlayer.classList.add("dp-fullscreen"); - }); - // 监听全屏退出事件 - videoPlayer.on('fullscreen_cancel', function () { - DomDPlayer.classList.remove("dp-fullscreen"); - }); + // 监听全屏进入事件 + videoPlayer.on('fullscreen', function () { + if (DomDPlayer.classList) { + DomDPlayer.classList.add("dp-fullscreen"); + } + }); + // 监听全屏退出事件 + videoPlayer.on('fullscreen_cancel', function () { + if (DomDPlayer.classList) { + DomDPlayer.classList.remove("dp-fullscreen"); + } + }); videoPlayer.on('error', function () { }); @@ -295,12 +307,13 @@ document.addEventListener('DOMContentLoaded', function () { }, 1000); // 等待一会儿确保视频已开始 }); // 监听当前播放时间 - videoPlayer.on('timeupdate', function () { - if (videoPlayer.video.currentTime < 20) { // 当前时间小于 20 秒 - videoPlayer.seek(20); // 跳过到 20 秒 - } - }); - }, + videoPlayer.on('timeupdate', function () { + if (videoPlayer.video.currentTime < 20) { // 当前时间小于 20 秒 + videoPlayer.seek(20); // 跳过到 20 秒 + } + }); + return videoPlayer + }, /** @@ -414,11 +427,19 @@ document.addEventListener('DOMContentLoaded', function () { * @param {string} strPlayUrl * @param {boolean} boolIsFirstPlayCctv 是否首次播放广告 */ - initDPlayer264(strPlayUrl, boolIsFirstPlayCctv = false) { - let DomDPlayer = document.getElementById('dplayer') - if(videoPlayer == null){ - videoPlayer = new DPlayer({ - container: DomDPlayer, + initDPlayer264(strPlayUrl, boolIsFirstPlayCctv = false) { + let DomDPlayer = document.getElementById('dplayer') || document.querySelector('.dplayer') + if (!DomDPlayer) { + console.warn('DPlayer 容器不存在') + return null + } + if (!strPlayUrl) { + console.warn('DPlayer 播放地址为空') + return null + } + if(videoPlayer == null){ + videoPlayer = new DPlayer({ + container: DomDPlayer, autoplay: true, screenshot: false, //logo: dplayerLogo, @@ -438,24 +459,29 @@ document.addEventListener('DOMContentLoaded', function () { videoPlayer.play() - videoPlayer.on('fullscreen', function () { - DomDPlayer.classList.add("dp-fullscreen"); - }); - videoPlayer.on('fullscreen_cancel', function () { - DomDPlayer.classList.remove("dp-fullscreen"); - }); + videoPlayer.on('fullscreen', function () { + if (DomDPlayer.classList) { + DomDPlayer.classList.add("dp-fullscreen"); + } + }); + videoPlayer.on('fullscreen_cancel', function () { + if (DomDPlayer.classList) { + DomDPlayer.classList.remove("dp-fullscreen"); + } + }); videoPlayer.on('error', function () { //videoInfoJs.beforePlay(videoInfoJs.checkPlaylineUrl(videoInfoJs.intPlayLine, strPlayUrl)); }); - videoPlayer.on('play', function () { - // if (videoInfoJs.boolIsShowCctvImg || videoInfoJs.boolIsShowCctvVideo) { - // if (boolIsFirstPlayCctv && publicJs.strEquipmentCode == 'ios') { + videoPlayer.on('play', function () { + // if (videoInfoJs.boolIsShowCctvImg || videoInfoJs.boolIsShowCctvVideo) { + // if (boolIsFirstPlayCctv && publicJs.strEquipmentCode == 'ios') { // return; // } - // videoInfoJs.countDownFn() - // } - }); - }, + // videoInfoJs.countDownFn() + // } + }); + return videoPlayer + }, /** @@ -667,4 +693,3 @@ document.addEventListener('DOMContentLoaded', function () { // })); // } -