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

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 อาจคุ้มค่าสำหรับคุณ