วิธีเพิ่มแทร็กคำบรรยาย VTT ในวิดีโอ HTML5

ถ้าวิดีโอเล่นได้แต่ไม่มีข้อความ ให้แยกตรวจว่าโหลดไฟล์สำเร็จหรือไม่ แล้วค่อยดูว่าเวลาในคำบรรยายตรงกับภาพหรือไม่

เชื่อมแทร็กกับตัวเล่น

วางวิดีโอกับไฟล์ VTT ที่เข้ารหัส UTF-8 ในเว็บไซต์เดียวกัน ใส่ track ภายใน video โดยพาธสัมพัทธ์เริ่มจากหน้าเว็บ srclang คือภาษาของข้อความ ไม่จำเป็นต้องตรงกับภาษาของเสียง ตั้งชื่อแทร็กแต่ละภาษาให้เลือกได้ชัดเจน

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

ทดลองด้วยแทร็กเดียวบนหน้าเว็บ

ดาวน์โหลดวิดีโอสาธิตและไฟล์ VTT วางไว้ข้างหน้า HTML บนเว็บเซิร์ฟเวอร์ทดสอบ ใช้ชื่อ lesson.mp4 และ example-en.vtt ให้ตรงกับโค้ด เปิดผ่านที่อยู่เว็บเพื่อหลีกเลี่ยงข้อจำกัดของเบราว์เซอร์เมื่อเปิดไฟล์ในเครื่อง

ตัวอย่างมีเฉพาะประโยคประกาศเวิร์กช็อป ช่วงแรกจึงยังไม่มีข้อความ หยุดที่วินาทีที่ 8 แล้วเทียบประโยค เมื่อถึงวินาทีที่ 13 ข้อความควรหายไป หากปิดแทร็กแล้วยังเห็น ให้ตรวจแทร็กอื่นหรือข้อความที่ฝังในภาพ

ตามคำขอไฟล์เมื่อเมนูคำบรรยายว่าง

เปิดแท็บเครือข่าย โหลดหน้าใหม่แล้วเลือกภาษาอังกฤษ ถ้าไม่พบคำขอ .vtt ให้ตรวจองค์ประกอบ video ในหน้าที่เผยแพร่ ตัวแก้ไขอาจลบ track ตอนบันทึก หากพบคำขอ ให้เทียบ URL เต็มกับโฟลเดอร์ที่อัปโหลดไฟล์

อ่านเนื้อหาที่ตอบกลับ ควรเริ่มด้วย WEBVTT ตามด้วยบรรทัดว่างและรหัสเวลา หน้าเข้าสู่ระบบก็อาจตอบสถานะ 200 ได้ หากพบข้อผิดพลาด CORS ให้ลองวางไฟล์ไว้ต้นทางเดียวกับหน้าเว็บ แล้วตรวจต้นทางที่อนุญาตและค่า crossorigin

ใช้รูปแบบการเหลื่อมเวลาหาจุดตัด

เลือกสามประโยคที่ฟังออกง่ายแล้วเทียบเวลาเริ่มพูดกับคำบรรยาย ถ้าเหลื่อมเท่ากันให้ดูช่วงเปิดเรื่อง ถ้าผิดเฉพาะประโยคที่สามให้หารอยตัดหลังประโยคที่สอง หากยิ่งเล่นยิ่งเหลื่อม ให้ตรวจว่าเครื่องเล่นกำลังเปิดวิดีโอรุ่นใด

บนหน้าที่เผยแพร่ให้ลองเลือกแต่ละภาษา ตรวจหนึ่งประโยคแล้วปิดคำบรรยาย เทียบข้อความที่ยังเห็นกับภาพต้นฉบับ เมื่อแจ้งปัญหาให้ระบุชื่อไฟล์วิดีโอ แทร็กที่เลือก และเวลาที่พบปัญหา

ตัวอย่างขั้นตอน

เสียงสังเคราะห์ภาษาอังกฤษจากบทที่ EasySub เขียนเอง ตัวอย่างนี้นำช่วงที่ 3 ของ SRT ต้นฉบับมาเขียนเป็น VTT ไม่ใช่ผลส่งออกใหม่หรือฉบับที่ผู้เชี่ยวชาญตรวจแก้แล้ว

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

WebVTT · EN · ดาวน์โหลดวิดีโอสาธิต · SRT ต้นฉบับ (อังกฤษ)

ทดสอบหนึ่งช่วงเวลา

เลือก English แล้วข้ามไปที่วินาทีที่ 8 ประโยคตัวอย่างควรปรากฏ และหายไปเมื่อถึงวินาทีที่ 13 ลองเปิด URL ของไฟล์โดยตรง หน้าเข้าสู่ระบบที่ตอบสถานะ 200 ไม่ใช่ไฟล์คำบรรยาย ตรวจชนิด text/vtt และถ้าอยู่คนละโดเมน ให้ตรวจ crossorigin กับการตอบกลับ CORS ด้วย