diff --git a/rtsp-vue/src/views/video/device/component/cusPlayer.vue b/rtsp-vue/src/views/video/device/component/cusPlayer.vue index 86645ea..f83b81d 100644 --- a/rtsp-vue/src/views/video/device/component/cusPlayer.vue +++ b/rtsp-vue/src/views/video/device/component/cusPlayer.vue @@ -93,50 +93,71 @@ export default { console.log('✅ 播放器对象已创建:', this.player); console.log('🎬 播放器底层视频元素:', this.player.video); + console.log('🔍 播放器完整对象键:', Object.keys(this.player)); - // 监听 flv.js 的统计信息和错误 - if (this.player.flv) { - console.log('📊 flv.js 实例:', this.player.flv); + // 等待一下再尝试访问 flv 实例 + setTimeout(() => { + // 尝试不同的方式访问 flv.js 实例 + let flvInstance = null; - // 监听 flv.js 的统计信息 - this.player.flv.on('statistics_info', (stats) => { - console.log('📈 flv.js 统计:', { - speed: stats.speed, - videoBufferSize: stats.videoBufferSize, - audioBufferSize: stats.audioBufferSize, - decodedFrames: stats.decodedFrames, - droppedFrames: stats.droppedFrames - }); - }); + if (this.player.flv) { + flvInstance = this.player.flv; + console.log('📊 找到 flv.js 实例 (this.player.flv):', flvInstance); + } else if (this.player._flv) { + flvInstance = this.player._flv; + console.log('📊 找到 flv.js 实例 (this.player._flv):', flvInstance); + } else if (this.player.video && this.player.video.flvjs) { + flvInstance = this.player.video.flvjs; + console.log('📊 找到 flv.js 实例 (this.player.video.flvjs):', flvInstance); + } else { + console.warn('⚠️ 未找到 flv.js 实例，尝试其他属性...'); + console.log('播放器属性:', Object.keys(this.player).filter(k => k.toLowerCase().includes('flv'))); + } - // 监听 flv.js 的错误 - this.player.flv.on('error', (errorType, errorDetail, errorInfo) => { - console.error('💥 flv.js 错误:'); - console.error(' 类型:', errorType); - console.error(' 详情:', errorDetail); - console.error(' 信息:', errorInfo); + // 如果找到了 flv 实例，绑定事件 + if (flvInstance && typeof flvInstance.on === 'function') { + console.log('✅ flv.js 实例已找到，开始绑定事件'); - // 常见错误处理提示 - if (errorType === 'NetworkError') { - console.error(' => 网络错误，检查后端服务是否正常'); - } else if (errorType === 'MediaError') { - console.error(' => 媒体解码错误，可能是视频格式不支持'); - console.error(' => 请确认后端 FFmpeg 使用 H.264 (baseline) + AAC 编码'); - } - }); - - // 监听元数据解析 - this.player.flv.on('metadata_arrived', (metadata) => { - console.log('📦 FLV 元数据:', metadata); - }); - - // 监听视频数据解析 - this.player.flv.on('scriptdata_arrived', (data) => { - console.log('📜 FLV 脚本数据:', data); - }); - } else { - console.warn('⚠️ flv.js 实例不存在，无法监听事件'); - } + // 监听 flv.js 的统计信息 + flvInstance.on('statistics_info', (stats) => { + console.log('📈 flv.js 统计:', { + speed: stats.speed, + videoBufferSize: stats.videoBufferSize, + audioBufferSize: stats.audioBufferSize, + decodedFrames: stats.decodedFrames, + droppedFrames: stats.droppedFrames + }); + }); + + // 监听 flv.js 的错误 + flvInstance.on('error', (errorType, errorDetail, errorInfo) => { + console.error('💥 flv.js 错误:'); + console.error(' 类型:', errorType); + console.error(' 详情:', errorDetail); + console.error(' 信息:', errorInfo); + + // 常见错误处理提示 + if (errorType === 'NetworkError') { + console.error(' => 网络错误，检查后端服务是否正常'); + } else if (errorType === 'MediaError') { + console.error(' => 媒体解码错误，可能是视频格式不支持'); + console.error(' => 请确认后端 FFmpeg 使用 H.264 (baseline) + AAC 编码'); + } + }); + + // 监听元数据解析 + flvInstance.on('metadata_arrived', (metadata) => { + console.log('📦 FLV 元数据:', metadata); + }); + + // 监听视频数据解析 + flvInstance.on('scriptdata_arrived', (data) => { + console.log('📜 FLV 脚本数据:', data); + }); + } else { + console.error('❌ flv.js 实例不可用或不支持事件监听'); + } + }, 500); // 等待 500ms 让播放器完全初始化 // 监听播放器错误 this.player.on('error', (error) => { @@ -183,6 +204,71 @@ export default { }); }); + // 直接监听原生 video 元素事件 + if (this.player.video) { + // 监听数据加载 + this.player.video.addEventListener('loadeddata', () => { + console.log('✅ Video: 数据已加载（第一帧）'); + }); + + // 监听可以播放 + this.player.video.addEventListener('canplay', () => { + console.log('✅ Video: 可以播放'); + }); + + // 监听可以流畅播放 + this.player.video.addEventListener('canplaythrough', () => { + console.log('✅ Video: 可以流畅播放'); + }); + + // 监听播放中 + this.player.video.addEventListener('playing', () => { + console.log('▶️ Video: 正在播放'); + }); + + // 监听暂停 + this.player.video.addEventListener('pause', () => { + console.log('⏸️ Video: 已暂停'); + }); + + // 监听停止 + this.player.video.addEventListener('stalled', () => { + console.warn('⚠️ Video: 数据停滞'); + }); + + // 监听缓冲 + this.player.video.addEventListener('waiting', () => { + console.log('⏳ Video: 等待数据...'); + }); + + // 监听时间更新（每秒触发多次） + let lastLog = 0; + this.player.video.addEventListener('timeupdate', () => { + const now = Date.now(); + if (now - lastLog > 3000) { // 每3秒输出一次 + console.log('⏱️ Video: 播放时间更新', this.player.video.currentTime.toFixed(2) + 's'); + lastLog = now; + } + }); + + // 监听解码错误 + this.player.video.addEventListener('error', (e) => { + console.error('❌ Video 元素错误:', e); + if (this.player.video.error) { + console.error('错误代码:', this.player.video.error.code); + console.error('错误信息:', this.player.video.error.message); + + const errorCodes = { + 1: 'MEDIA_ERR_ABORTED - 加载被中止', + 2: 'MEDIA_ERR_NETWORK - 网络错误', + 3: 'MEDIA_ERR_DECODE - 解码错误（视频格式不支持）', + 4: 'MEDIA_ERR_SRC_NOT_SUPPORTED - 源不支持' + }; + console.error('错误说明:', errorCodes[this.player.video.error.code]); + } + }); + } + // 监听视频可以播放 this.player.on('canplay', () => { console.log('✅ 视频可以播放，尝试播放...');