Men-debug elemen media HTML, seperti <video> dan <audio>, bisa jadi sulit karena implementasi dekoder bervariasi dalam hal apa yang dianggap sebagai error (dekoder hardware umumnya adalah yang paling ketat), terutama ketika pemutaran mungkin menggunakan fitur yang lebih esoterik dari codec tertentu. Untungnya, ada berbagai alat yang dapat kita manfaatkan untuk membantu.
Saat melakukan debug error pemutaran media, hal pertama yang biasanya kami periksa adalah atribut MediaError error pada elemen media HTML. Atribut ini adalah petunjuk umum terkait penyebab error pemutaran media. Properti MediaError.code menampilkan nilai numerik yang mewakili jenis error yang terjadi pada elemen media. Properti lainnya MediaError.message dapat memberikan 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. Untuk alasan privasi, teks lengkap error terkadang harus dihilangkan.
Untuk mengakses informasi error yang lengkap, gunakan "Media Panel" Chrome DevTools untuk melihat log media. Anda akan menemukan banyak informasi seperti peristiwa, peringatan, dan pesan error yang akan memberikan beberapa petunjuk bagus 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 ini beberapa error yang bisa Anda alami 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. Itu memang membutuhkan sudah memahami MP4 untuk digunakan.
Terakhir, beberapa alat profesional analisis streaming video seperti VQAnalyzer, Elecard StreamEye, dan Codecian CodecVisa, mungkin sepadan dengan investasi Anda.