修复工作
This commit is contained in:
@@ -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('✅ 视频可以播放，尝试播放...');
|
||||
|
||||
Reference in New Issue
Block a user