偵錯網路上的媒體播放錯誤

François Beaufort
François Beaufort
GitHub

對 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 開發人員工具中的媒體面板螢幕截圖
Chrome 開發人員工具的媒體面板。

你也可以透過下列指令，使用 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 結構檢視器是實用的工具，用於對位元串流問題進行偵錯。但這需要先瞭解 MP4 才能使用。

最後，某些影片串流分析專業工具 (例如 VQAnalyzer、Elecard StreamEye 和 Codecian CodecVisa) 可能會值得您投資。