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

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

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