From 03397d1c4a545dcc5313fe38874cb1f0cba0dbd1 Mon Sep 17 00:00:00 2001 From: 86156 <823267011@qq.com> Date: Wed, 1 Oct 2025 23:54:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B7=A5=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../video/device/component/cusPlayer.vue | 273 ++++++++++-------- 1 file changed, 154 insertions(+), 119 deletions(-) diff --git a/rtsp-vue/src/views/video/device/component/cusPlayer.vue b/rtsp-vue/src/views/video/device/component/cusPlayer.vue index f0710d8..19e956a 100644 --- a/rtsp-vue/src/views/video/device/component/cusPlayer.vue +++ b/rtsp-vue/src/views/video/device/component/cusPlayer.vue @@ -47,129 +47,164 @@ export default { console.log('创建播放器，URL:', url, 'Element ID:', this.elId); this.isPlay = true; - this.player = new FlvJsPlayer({ - id: this.elId, - url: url, - // fitVideoSize: 'auto', - fluid: true, - autoplay: true, - isLive: true, - playsinline: false, - screenShot: true, - whitelist: [''], - ignores: ['time'], - closeVideoClick: true, - // errorTips: '无视频源', - customConfig: { - isClickPlayBack: false - }, - flvOptionalConfig: { - enableWorker: true, - enableStashBuffer: false, //关闭缓存 - stashInitialSize: 2048, //缓存大小2m - lazyLoad: false, - lazyLoadMaxDuration: 40 * 60, - autoCleanupSourceBuffer: true, - autoCleanupMaxBackwardDuration: 35 * 60, - autoCleanupMinBackwardDuration: 30 * 60 - } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config) - }); - // 监听播放器错误 - this.player.on('error', (error) => { - console.error('❌ 播放器错误:', error); - console.error('错误详情:', JSON.stringify(error, null, 2)); - }); - - // 监听播放器就绪 - this.player.on('ready', () => { - console.log('✅ 播放器就绪'); - }); - - // 监听播放开始 - this.player.on('play', () => { - console.log('▶️ 开始播放'); - }); - - // 监听播放暂停 - this.player.on('pause', () => { - console.log('⏸️ 播放暂停'); - }); - - // 监听视频加载开始 - this.player.on('loadstart', () => { - console.log('🔄 开始加载视频数据'); - }); - - // 监听视频元数据加载 - this.player.on('loadedmetadata', () => { - console.log('📊 视频元数据已加载'); - }); - - // 监听视频可以播放 - this.player.on('canplay', () => { - console.log('✅ 视频可以播放'); - }); - - // 监听等待数据 - this.player.on('waiting', () => { - console.log('⏳ 等待视频数据...'); - }); - - // 自定义播放器按钮 - // let divStr = - // '' + - // '' + - // ''; - - let divStr = ''; - - let divClose = ''; - - let util = Player.util; - // let customBtn = util.createDom('div', divStr, {}, 'flex align-center justify-center app-player-button'); //'div', divStr, {}, 'class' - let customBtn = util.createDom( - 'div', - divStr, - { style: 'width: 40px;heigth:40px;position: absolute;right: 155px;top: 7px;' }, - 'flex align-center justify-center app-player-button' - ); //'div', divStr, {}, 'class' - let closeBtn = util.createDom('div', divClose, {}, 'app-close-btn'); - let xgControls = this.player.root.querySelector('xg-controls'); - let xgError = this.player.root.querySelector('xg-error'); - xgControls.appendChild(customBtn); - this.player.root.appendChild(closeBtn); - - // let shot = customBtn.querySelector('.button-screen-shot'); - // let set = customBtn.querySelector('.button-set'); - // let history = customBtn.querySelector('.button-history'); - let closeBtnc = closeBtn.querySelector('.app-close-btn-c'); - let playback = customBtn.querySelector('.button-playback'); - - this.player.on('play', () => {}); - this.player.on('focus', () => { - if (hasCloseBtn) { - closeBtn.style.display = 'block'; + // 等待 DOM 元素渲染完成 + this.$nextTick(() => { + const videoElement = document.getElementById(this.elId); + console.log('📺 DOM 元素:', videoElement); + + if (!videoElement) { + console.error('❌ 找不到视频容器元素:', this.elId); + return; } - }); - this.player.on('ended', () => {}); - this.player.on('blur', () => { - closeBtn.style.display = 'none'; - }); - - this.player.on('error', () => {}); - - if (closeBtnc) { - closeBtnc.addEventListener('click', () => { - this.closePlayer(); + + this.player = new FlvJsPlayer({ + id: this.elId, + url: url, + // fitVideoSize: 'auto', + fluid: true, + autoplay: true, + isLive: true, + playsinline: true, + screenShot: true, + whitelist: [''], + ignores: ['time'], + closeVideoClick: true, + // errorTips: '无视频源', + customConfig: { + isClickPlayBack: false + }, + flvOptionalConfig: { + enableWorker: true, + enableStashBuffer: false, //关闭缓存 + stashInitialSize: 2048, //缓存大小2m + lazyLoad: false, + lazyLoadMaxDuration: 40 * 60, + autoCleanupSourceBuffer: true, + autoCleanupMaxBackwardDuration: 35 * 60, + autoCleanupMinBackwardDuration: 30 * 60 + } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config) }); - } + + console.log('✅ 播放器对象已创建:', this.player); + console.log('🎬 播放器底层视频元素:', this.player.video); + + // 监听播放器错误 + this.player.on('error', (error) => { + console.error('❌ 播放器错误:', error); + console.error('错误详情:', JSON.stringify(error, null, 2)); + console.error('播放器状态:', { + paused: this.player.video.paused, + currentTime: this.player.video.currentTime, + duration: this.player.video.duration, + readyState: this.player.video.readyState, + networkState: this.player.video.networkState + }); + }); + + // 监听播放器就绪 + this.player.on('ready', () => { + console.log('✅ 播放器就绪'); + }); + + // 监听播放开始 + this.player.on('play', () => { + console.log('▶️ 开始播放'); + }); + + // 监听播放暂停 + this.player.on('pause', () => { + console.log('⏸️ 播放暂停'); + }); + + // 监听视频加载开始 + this.player.on('loadstart', () => { + console.log('🔄 开始加载视频数据'); + }); + + // 监听视频元数据加载 + this.player.on('loadedmetadata', () => { + console.log('📊 视频元数据已加载'); + console.log('视频信息:', { + width: this.player.video.videoWidth, + height: this.player.video.videoHeight, + duration: this.player.video.duration + }); + }); + + // 监听视频可以播放 + this.player.on('canplay', () => { + console.log('✅ 视频可以播放，尝试播放...'); + // 确保播放 + this.player.play().then(() => { + console.log('▶️ 播放已启动'); + }).catch(err => { + console.error('播放失败:', err); + }); + }); + + // 监听等待数据 + this.player.on('waiting', () => { + console.log('⏳ 等待视频数据...'); + }); + + // 监听数据接收 + this.player.on('progress', () => { + console.log('📥 正在接收数据...'); + }); + + // 监听播放失败 + this.player.on('ended', () => { + console.log('⏹️ 播放结束'); + }); + + // 输出播放器完整配置 + console.log('🔧 播放器配置:', { + url: url, + elId: this.elId, + isLive: true, + autoplay: true + }); + + // 自定义播放器按钮（移到 $nextTick 内部，确保 player 已创建） + let divStr = ''; + let divClose = ''; - // 点击视频时间，设置selectIndex - this.player.video.addEventListener('click', () => { - // this.selectIndex = index; - // this.$parent.setSelectIndex(index); - this.$emit('clickPlayer', index); + let util = Player.util; + let customBtn = util.createDom( + 'div', + divStr, + { style: 'width: 40px;heigth:40px;position: absolute;right: 155px;top: 7px;' }, + 'flex align-center justify-center app-player-button' + ); + let closeBtn = util.createDom('div', divClose, {}, 'app-close-btn'); + let xgControls = this.player.root.querySelector('xg-controls'); + let xgError = this.player.root.querySelector('xg-error'); + xgControls.appendChild(customBtn); + this.player.root.appendChild(closeBtn); + + let closeBtnc = closeBtn.querySelector('.app-close-btn-c'); + let playback = customBtn.querySelector('.button-playback'); + + this.player.on('focus', () => { + if (hasCloseBtn) { + closeBtn.style.display = 'block'; + } + }); + this.player.on('blur', () => { + closeBtn.style.display = 'none'; + }); + + if (closeBtnc) { + closeBtnc.addEventListener('click', () => { + this.closePlayer(); + }); + } + + // 点击视频时间，设置selectIndex + this.player.video.addEventListener('click', () => { + this.$emit('clickPlayer', index); + }); }); // if (shot) {