调试 HTML 媒体元素(如 <video>
和 <audio>
)可能很困难,因为解码器实现在所认为的错误方面有所不同(硬件解码器通常最为严格),尤其是在播放可能使用特定编解码器更深奥的功能时。幸运的是,我们有各种工具可助您一臂之力。
调试媒体播放错误时,我们通常首先检查的是 HTML 媒体元素上的 MediaError error
属性。此属性用于高水平地提示导致媒体播放错误的原因。MediaError.code
属性会返回一个数值,用于表示媒体元素上发生的错误类型。另一个属性 MediaError.message
可能会提供一个字符串,其中包含来自浏览器的诊断信息。
const video = document.querySelector('video');
video.addEventListener('error', () => {
console.log('Error code: ' + video.error.code);
console.log('Error message: ' + video.error.message);
});
这些属性对遥测分析最有用,但不一定总能提供足够的信息来调试播放错误。出于隐私保护方面的原因,有时必须省略完整的错误文本。
如需查看完整的错误信息,请使用 Chrome 开发者工具"Media Panel"查看媒体日志。您会发现大量信息(例如事件、警告和错误消息)可以为您提供有关媒体播放错误的实用提示。
![Chrome 开发者工具中媒体面板的屏幕截图](https://web.developers.google.cn/static/articles/debug-playback-errors/image/screenshot-the-media-pan-96619b7be4c41.png?authuser=9&hl=sv)
您还可以通过以下命令使用 FFmpeg 免费应用检查媒体文件的完整性:
ffmpeg -err_detect explode -i <file> -f null -
对于编解码器无效的视频文件,使用这些命令时可能会遇到以下错误:
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fc62df05380] Could not find codec parameters for stream 0 (Video: none (zzzz / 0x7A7A7A7A), none(smpte170m/smpte170m/bt709, progressive), 320x240, 4 kb/s): unknown codec
Consider increasing the value for the 'analyzeduration' (0) and 'probesize' (5000000) options
[matroska,webm @ 0x7fd45b705380] Unknown EBML doctype '0000'
[matroska,webm @ 0x7f8d17904d40] Element at 0x8b ending at 0x10400000095 exceeds containing master element ending at 0x9b
Truncating packet of size 9069 to 94
MP4Box.js / ISOBMFF Box Structure Viewer 是调试比特流问题的实用工具。不过,您需要对 MP4 有一定的了解才能使用。
最后,VQAnalyzer、Elecard StreamEye 和 Codecian CodecVisa 等一些专业视频流分析工具或许值得您花钱。