Men-debug elemen media HTML, seperti <video> dan <audio>, bisa jadi sulit karena implementasi decoder bervariasi dalam hal yang dianggap error (decoder hardware umumnya menjadi yang paling ketat), terutama saat pemutaran dapat menggunakan lebih banyak fitur esoterik dari codec tertentu. Untungnya, ada berbagai alat yang dapat kita manfaatkan untuk membantu.
Saat melakukan proses debug pada error pemutaran media, hal pertama yang biasanya kita periksa adalah atribut error MediaError di elemen media HTML. Atribut ini adalah petunjuk tingkat tinggi tentang penyebab error pemutaran media. Properti MediaError.code menampilkan nilai numerik yang mewakili jenis error yang terjadi pada elemen media. Properti MediaError.message lainnya dapat menyediakan string dengan beberapa informasi diagnostik dari browser.
const video = document.querySelector('video');
video.addEventListener('error', () => {
console.log('Error code: ' + video.error.code);
console.log('Error message: ' + video.error.message);
});
Properti ini paling berguna untuk analisis telemetri, dan mungkin tidak selalu memberikan informasi yang cukup untuk men-debug error pemutaran. Demi alasan privasi, teks error yang lengkap terkadang harus dihilangkan.
Untuk mengakses informasi error secara lengkap, gunakan "Media Panel" Chrome DevTools untuk melihat log media. Anda akan menemukan banyak informasi seperti peristiwa, peringatan, dan pesan error yang akan memberi Anda beberapa petunjuk terkait error pemutaran media.
Anda juga dapat menggunakan aplikasi gratis FFmpeg untuk memeriksa integritas file media berkat perintah ini:
ffmpeg -err_detect explode -i <file> -f null -
Berikut adalah beberapa kesalahan yang bisa Anda dapatkan dengan perintah ini untuk file video dengan codec yang tidak valid:
[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 adalah alat yang berguna untuk men-debug masalah bitstream. Namun, Anda harus sudah memahami MP4 agar dapat digunakan.
Terakhir, beberapa alat profesional analisis streaming video seperti VQAnalyzer, Elecard StreamEye, dan Codecian CodecVisa, mungkin sepadan dengan biaya Anda.