ซับไตเติล WebVTT (.vtt)

W3C มาตรฐาน

Web Video Text Tracks (WebVTT) คือมาตรฐานเว็บอย่างเป็นทางการของ W3C สำหรับคำบรรยายแทนเสียง คำบรรยายแปล และคำอธิบายบท ซึ่งรวมเข้ากับองค์ประกอบวิดีโอ HTML5 (<track>) และการสตรีมสดผ่าน HTTP (HLS) สมัยใหม่โดยกำเนิด

แปลง SRT เป็น VTT

ตัวแปลงจาก SRT เป็น VTT ฟรีในเบราว์เซอร์ แปลงไฟล์ได้ทันทีบนอุปกรณ์ของคุณ

ตรวจสอบและดู Metadata

ระบบปฏิบัติการและเครื่องมือวิเคราะห์ไฟล์จะระบุไฟล์ WebVTT โดยการตรวจสอบลำดับไบต์ไบนารีส่วนต้น:

เลือกหรือวางไฟล์ที่นี่

การแปลงไฟล์แบบส่วนตัว 100% ในเบราว์เซอร์ - ไฟล์จะไม่ rời ออกจากอุปกรณ์ของคุณ

หรือวาง Ctrl+V
การรับประกันความเป็นส่วนตัวแบบไม่มีการส่งผ่านเครือข่าย: อัปโหลด 0 ไบต์ไปยังเซิร์ฟเวอร์ภายนอก การประมวลผลทั้งหมดเกิดขึ้นภายในแซนด์บ็อกซ์ของเบราว์เซอร์ของคุณ

ลายเซ็นส่วนหัวในระดับไบต์ (Magic Bytes)

ระบบปฏิบัติการและเครื่องมือวิเคราะห์ไฟล์จะระบุไฟล์ WebVTT โดยการตรวจสอบลำดับไบต์ไบนารีส่วนต้น:

ลายเซ็น HEX (OFFSET 0):

57 45 42 56 54 54

การแสดงผลรูปแบบ ASCII: WEBVTT

มาตรฐาน: W3C WebVTT Recommendation

ข้อมูลจำเพาะทางเทคนิค

สถาปัตยกรรมคอนเทนเนอร์UTF-8 text file starting with 'WEBVTT' signature, followed by optional STYLE and NOTE blocks and sequential cue blocks
การบีบอัดUncompressed plain text (typically compressed over HTTP via Gzip or Brotli)
การจัดลำดับไบต์ (Byte Endianness)UTF-8 text stream
พื้นที่สีFull CSS Color Module Level 4 support in cue styles
ช่องสัญญาณและโครงสร้างTimecoded cues, speech recognition confidence, CSS styling, and screen position settings
ขนาดสูงสุดUnbounded sequential cues
ความโปร่งใสFull CSS opacity and alpha transparency supported via '::cue' pseudo-element
การสตรีมและแบบโปรเกรสซีฟNative streaming in HTML5 <video> elements and HLS / DASH live video manifests

ตารางเปรียบเทียบทางเทคนิค: WebVTT กับคู่แข่ง

คุณลักษณะทางเทคนิคWebVTT (ปัจจุบัน)SRTASSSUB
การบูรณาการเว็บ HTML5มาตรฐานดั้งเดิม 100% (<track>)ต้องใช้การแปลง JSต้องใช้ WebAssemblyต้องทำการแปลง
การจัดสไตล์ CSSจัดสไตล์ CSS ดั้งเดิมเต็มรูปแบบ (::cue)แท็ก HTML พื้นฐานเท่านั้นแท็กการลบล้างที่เป็นกรรมสิทธิ์ไม่มี
การสตรีม HLS / DASHมาตรฐานการออกอากาศสตรีมมิ่งสากลรองรับผ่านการมักซ์ (Muxing)รองรับการสตรีมจำกัดไม่มี
ข้อกำหนดส่วนหัวข้อความเมจิก 'WEBVTT' ที่เข้มงวดในบรรทัด 1ไม่ต้องมีส่วนหัวส่วน [Script Info]ไม่ต้องมีส่วนหัว

รูปแบบความเสียหายทั่วไปและคู่มือการกู้คืน Hex

ข้อผิดพลาดในคอนโซลเบราว์เซอร์: 'ไฟล์ WebVTT ไม่ถูกต้อง: ขาดลายเซ็น WEBVTT'

สาเหตุหลัก: ขาดสตริง 'WEBVTT' ในบรรทัดที่ 1 หรือมีบรรทัดว่างก่อนส่วนหัว

การกู้คืน: ใส่ 'WEBVTT\n\n' ไว้ที่ด้านบนสุดของไฟล์โดยใช้ File2File Subtitle Converter

การวิเคราะห์ความปลอดภัยและเวกเตอร์การโจมตีตัวแยกวิเคราะห์

ตัวแยกวิเคราะห์ WebVTT ในเว็บเบราว์เซอร์ประมวลผลคิวที่ไม่น่าเชื่อถือ ซึ่งอาจนำไปสู่การโจมตีแบบ Cross-Site Scripting (XSS) หากเรนเดอร์โดยไม่มีการฆ่าเชื้อ (sanitization) เข้าสู่ DOM

เวกเตอร์การโจมตีที่ทราบ

  • การฉีด XSS ผ่านเนื้อหาคิว HTML ที่ไม่ได้ฆ่าเชื้อซึ่งแทรกเข้าไปใน DOM ของเครื่องเล่นวิดีโอบบนเว็บ
  • การปลอมแปลงคำขอฝั่งเซิร์ฟเวอร์ (SSRF) ระหว่างการสร้างภาพขนาดย่อคำบรรยายฝั่งเซิร์ฟเวอร์อัตโนมัติ
  • การปฏิเสธการให้บริการผ่านตัวเลือกคิว CSS ที่จัดรูปแบบไม่ถูกต้อง

แนวทางปฏิบัติที่ดีที่สุดในการป้องกัน:

ประวัติความเป็นมาและเหตุการณ์สำคัญ

2019W3C เลื่อนระดับ WebVTT อย่างเป็นทางการ: รูปแบบ Web Video Text Tracks ไปสู่สถานะคำแนะนำเสนอ (Proposed Recommendation)
2011เปลี่ยนชื่อจาก WebSRT เป็น WebVTT เพื่อสร้างมาตรฐาน W3C ที่แตกต่างออกไปจาก SubRip แบบคลาสสิก
2010WHATWG แนะนำ WebVTT เพื่อแก้ปัญหาการใส่คำบรรยายแบบดั้งเดิมสำหรับแท็ก <video> ของ HTML5

ข้อได้เปรียบและจุดเด่นสำคัญ

  • มาตรฐานเว็บ HTML5 ดั้งเดิม: รองรับโดยตรงจากเว็บเบราว์เซอร์ทั้งหมดในองค์ประกอบ <track> โดยไม่ต้องใช้ไลบรารีภายนอก
  • รองรับการจัดสไตล์ CSS ที่หลากหลาย: ปรับแต่งสี ฟอนต์ พื้นหลัง และตำแหน่งโดยใช้ซูโดอีเลเมนต์ CSS '::cue' ดั้งเดิม
  • รองรับการสตรีมสดระดับเฟิร์สคลาส: รวมอยู่ในสตรีมมิ่งแมนิเฟสต์ Apple HLS และ MPEG-DASH สำหรับคำบรรยายออกอากาศ

ข้อจำกัดทางเทคนิคและข้อควรพิจารณา

  • ข้อกำหนดส่วนหัวที่เข้มงวด: ไฟล์ต้องเริ่มต้นด้วยข้อความ 'WEBVTT' ในบรรทัดแรกสุด มิฉะนั้นเบราว์เซอร์จะปฏิเสธ
  • ตัวคั่นมิลลิวินาทีที่เป็นจุด ('00:01:20.500') ต้องมีการแปลงจากไฟล์ SRT ที่คั่นด้วยจุลภาครุ่นเก่า
  • เครื่องเล่นฮาร์ดแวร์ที่ไม่ใช่เบราว์เซอร์รุ่นเก่า (เช่น กล่องมีเดีย USB ราคาถูก) มักขาดการรองรับ WebVTT แบบดั้งเดิม

เกร็ดความรู้ทางเทคนิคที่น่าสนใจ

  • ไฟล์ WebVTT ที่ถูกต้องทุกไฟล์ต้องขึ้นต้นด้วยคำว่า 'WEBVTT' ในบรรทัดแรก มิฉะนั้น สิ่งอื่นใดจะทำให้เบราว์เซอร์เพิกเฉยต่อไฟล์นั้น
  • เดิมที WebVTT ถูกเรียกว่า 'WebSRT' เนื่องจากได้รับการออกแบบมาโดยเจตนาให้ดูเกือบจะเหมือนกับคำบรรยาย SRT แบบคลาสสิก
  • WebVTT ยังสามารถใช้สำหรับบทวิดีโอและคำแนะนำภาพขนาดย่อแบบโต้ตอบเมื่อวางเมาส์เหนือแถบเลื่อนวิดีโอได้อีกด้วย

คำถามทางเทคนิคที่พบบ่อย

WebVTT ใช้สำหรับทำอะไร

WebVTT เป็นรูปแบบมาตรฐานเว็บอย่างเป็นทางการสำหรับการเพิ่มซับไตเติล, คำบรรยายแทนเสียง, บท และคำอธิบายลงในองค์ประกอบ HTML5 <video> บนเว็บไซต์

ฉันจะแปลงซับไตเติล SRT เป็น WebVTT ได้อย่างไร

คุณสามารถแปลงไฟล์ SRT เป็นไฟล์ WebVTT ที่สะอาดเรียบร้อยได้ในคลิกเดียวโดยใช้ File2File.app บนเบราว์เซอร์ของคุณ

เหตุใดซับไตเติล WebVTT ของฉันจึงไม่แสดงขึ้นในเบราว์เซอร์

ตรวจสอบให้แน่ใจว่าไฟล์ของคุณเริ่มต้นด้วย 'WEBVTT' ในบรรทัดที่ 1, มีบรรทัดว่างหลังจากนั้น และเว็บเซิร์ฟเวอร์ของคุณให้บริการพร้อมกับส่วนหัว 'Content-Type: text/vtt'