แก้ไขข้อผิดพลาดในการเล่นสื่อในเว็บ

François Beaufort
François Beaufort

การแก้ไขข้อบกพร่องขององค์ประกอบสื่อ HTML เช่น <video> และ <audio> อาจเป็นเรื่องยาก เนื่องจากการติดตั้งใช้งานโปรแกรมถอดรหัสจะแตกต่างกันไปตามสิ่งที่ถือว่าเป็นข้อผิดพลาด (โดยทั่วไปโปรแกรมถอดรหัสฮาร์ดแวร์จะเข้มงวดที่สุด) โดยเฉพาะอย่างยิ่งเมื่อการเล่นอาจใช้ฟีเจอร์ที่ซับซ้อนมากขึ้นของโค้ดเฉพาะ โชคดีที่เรามีเครื่องมือมากมายที่สามารถใช้ช่วยได้

เมื่อแก้ไขข้อผิดพลาดในการเล่นสื่อ สิ่งแรกที่มักจะตรวจสอบคือแอตทริบิวต์ MediaError error ในองค์ประกอบสื่อ HTML แอตทริบิวต์นี้เป็นคำแนะนำระดับสูงเกี่ยวกับสาเหตุที่ทำให้เกิดข้อผิดพลาดในการเล่นสื่อ พร็อพเพอร์ตี้ 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 เพื่อดูบันทึกสื่อ คุณจะเห็นข้อมูลมากมาย เช่น เหตุการณ์ คำเตือน และข้อความแสดงข้อผิดพลาด ซึ่งจะให้คำแนะนำที่ดีเกี่ยวกับข้อผิดพลาดในการเล่นสื่อ

ภาพหน้าจอของแผงสื่อในเครื่องมือสำหรับนักพัฒนาเว็บใน 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 Structure Viewer เป็นเครื่องมือที่มีประโยชน์ในการแก้ไขข้อบกพร่องเกี่ยวกับบิตสตรีม แต่ต้องใช้ความเข้าใจ MP4 อยู่แล้ว

สุดท้ายนี้ เครื่องมือวิเคราะห์สตรีมวิดีโอระดับมืออาชีพบางรายการ เช่น VQAnalyzer, Elecard StreamEye และ Codecian CodecVisa อาจคุ้มค่ากับเงินที่จ่ายไป