สร้างองค์ประกอบ track ใน HTML
หรือวางข้อความคำบรรยาย
ตัวเลือก
Subtitles มีไว้สำหรับผู้ชมที่ได้ยินเสียงและต้องการข้อความ — คำแปล หรือภาษาเดียวกันที่เขียนออกมา Captions มีไว้สำหรับผู้ชมที่ได้ยินไม่ได้ จึงพาสิ่งที่เสียงบอกคนอื่นด้วย: เพลง เสียงประตู เสียงโทรศัพท์ ไฟล์เดียวกันใช้ได้ทั้งสองจุดประสงค์ หน้าจึงถามแทนการเดา และค่าเปลี่ยนภายหลังจากในองค์ประกอบไม่ได้ Descriptions, chapters และ metadata ไม่มีให้เลือก เพราะไม่มีสิ่งใดเติมด้วยเนื้อหาของไฟล์คำบรรยายได้
แท็กภาษาสั้น ๆ อย่าง en, en-GB หรือ pt-BR บอกภาษาของคำในคำบรรยาย ไม่ใช่ภาษาของวิดีโอ แทร็กที่เรียกตัวเองว่า subtitles ต้องระบุภาษา การล้างช่องนี้จึงย้อนกลับไปที่ en แทนการตัดแอตทริบิวต์ออก — และเพราะทุกแอตทริบิวต์ถูกพิมพ์ในผลลัพธ์ คุณเห็นค่าที่ใช้แทนได้ก่อนวางอะไรลงไป
ข้อความอิสระ: English, English (SDH), Français มันคือบรรทัดที่ผู้ชมเลือกเมื่อหน้าเสนอมากกว่าหนึ่งแทร็ก เขียนให้ผู้ชมของคุณจำได้ ล้างช่องแล้วแอตทริบิวต์จะหายไปทั้งหมดแทนที่จะเขียนค่าว่าง ซึ่งคืนการตั้งชื่อให้โปรแกรมเล่น ป้ายชื่อว่างจะใส่แถวไร้ชื่อในเมนูนั้น
เปิด คำบรรยายจะขึ้นทันทีที่วิดีโอเล่น องค์ประกอบสื่อมีแทร็กเริ่มต้นได้เพียงหนึ่งเท่านั้น หากหน้าในนั้นมีอยู่แล้วให้ปล่อยปิดไว้: แทร็กที่สองที่อ้างเป็นค่าเริ่มต้นจะทำให้โปรแกรมเล่นเลือกผิด ขณะที่การไม่เป็นค่าเริ่มต้นเพียงหมายถึงผู้ชมต้องเปิดเอง
เฟรมเรตที่ใช้คำนวณเวลา ในหน้าเกี่ยวกับรูปแบบ ช่องนี้คือสิ่งที่ MicroDVD ต้องการ เพราะมันเก็บเวลาเป็นหมายเลขเฟรม ในหน้าแปลงเฟรมเรต ช่องนี้คือเฟรมเรตที่ไฟล์ถูกตั้งเวลาไว้ — เวอร์ชันที่คำบรรยายถูกทำขึ้นมา — และช่องที่สองของหน้ารับเฟรมเรตของวิดีโอที่คุณจะใช้กับคำบรรยายนี้ ค่าที่พบทั่วไปคือ 23.976, 24, 25, 29.97, 30, 50, 59.94 และ 60 หากใส่ผิดจะเลื่อนไทม์ไลน์ทั้งหมด และในหน้าแปลงเฟรมเรตจะเลื่อนด้วยอัตราส่วน ไม่ใช่ด้วยจำนวนคงที่
หน้านี้ใส่คำบรรยายของคุณไว้ในอิลิเมนต์เดียวที่คัดลอกไปวางในหน้าเว็บได้ สิ่งที่ออกมาคือบรรทัด <track> หนึ่งบรรทัดที่มี WebVTT ฝังอยู่ในแอตทริบิวต์ src ข้อความคำบรรยายจึงเดินทางไปกับมาร์กอัปเอง ไม่มีไฟล์ที่สองให้อัปโหลด ไม่มีพาธให้ตั้งให้ถูก และไม่มีทางที่เครื่องเล่นจะไปหาอะไรที่ไม่มีอยู่ การฝังในบรรทัดคือจุดทั้งหมดของหน้านี้ และเหตุผลคือวิธีที่เบราว์เซอร์จัดการไฟล์ในเครื่อง แทร็กถูกดึงมาไม่ใช่วาดขึ้น และเบราว์เซอร์ปฏิเสธการดึงนั้นเมื่อหน้าถูกเปิดจากดิสก์ <track src="film.vtt"> บนหน้าที่คุณบันทึกไว้บนเดสก์ท็อปจึงแสดงอะไรไม่ได้เลย ไม่มีข้อผิดพลาดบนจอ เมนูคำบรรยายว่างเปล่า และมีบรรทัดหนึ่งในคอนโซลที่คนส่วนใหญ่ไม่เคยเปิด data: URI ไม่ถูกดึงเลย ข้อความอยู่ในแอตทริบิวต์แล้ว มันจึงทำงานตรงนั้น ราคาคือขนาด เพราะทุกช่องว่างและการขึ้นบรรทัดใหม่ของ WebVTT กลายเป็นสามตัวอักษร และราคานั้นคุ้มที่นี่ อิลิเมนต์มีไว้เพื่อให้ทำงานได้ด้วยตัวเอง แอตทริบิวต์มาจากช่องบนแผง เพราะไม่มีช่องใดอ่านจากไฟล์ได้ kind สำคัญที่สุด: subtitles คือคำแปลสำหรับผู้ชมที่ฟังเสียงไม่รู้เรื่อง และ captions คือเวอร์ชันที่ครอบคลุมกว่า ที่พาเสียงดนตรีและเสียงประกอบไปด้วยสำหรับผู้ชมที่ฟังไม่ได้ ไฟล์ที่เต็มไปด้วย [ประตูกระแทก] และโน้ตดนตรีอาจเป็นได้ทั้งสอง และมีเพียงคุณที่รู้ว่ามันทำเพื่อผู้ชมกลุ่มใด หน้านี้จึงถามแทนการเดา อีกสามช่องคือภาษาของข้อความ ชื่อที่แสดงในเมนูคำบรรยายของเครื่องเล่น และว่าแทร็กควรเปิดเองหรือไม่
สองช่องนั้นทำงานต่างกันเมื่อทำให้ว่าง และความต่างนั้นควรรู้ การล้างชื่อเมนูจะเอาแอตทริบิวต์ออกทั้งตัว เพราะ label เป็นตัวเลือกและละไว้ก็แค่ยกการเลือกให้เครื่องเล่น การล้างช่องภาษาทำไม่ได้เช่นนั้น แทร็กที่ประกาศตัวเองเป็น subtitles ต้องระบุภาษา ช่องว่างจึงถอยไปที่ en แทนที่จะสร้างอิลิเมนต์ที่ขาดสิ่งที่จำเป็น ทั้งสองไม่ใช่การแทนที่แบบเงียบ เอาต์พุตพิมพ์ทุกแอตทริบิวต์คุณจึงเห็นว่าช่องของคุณให้อะไร ข้อความคำบรรยายภายในอิลิเมนต์เขียนโดยตัวเขียน WebVTT ตัวเดียวกับที่หน้าแปลงใช้ หมายความว่าไฟล์ที่มาเป็น WebVTT เก็บทุกอย่างที่มันพามานอกคิวไว้ ข้อความบนบรรทัด WEBVTT บล็อกความเห็นและสไตล์ และการตั้งค่าต่อคิวที่กำหนดว่าบรรทัดอยู่ตรงไหนบนจอ ไม่มีอะไรในไฟล์ของคุณถูกเปลี่ยนและไม่มีอะไรถูกอัปโหลด คำ เวลา และสไตล์ออกไปในสภาพที่มาถึง
ตัวอย่าง
ไฟล์ SRT กับช่องค่าเริ่มต้น
ข้อมูลนำเข้า
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
ผลลัพธ์
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
หนึ่งบรรทัดออกและทั้งไฟล์อยู่ข้างใน %0A คือการขึ้นบรรทัดใหม่และ %20 คือช่องว่าง WebVTT จึงเดินทางในแอตทริบิวต์ src แทนที่จะอยู่ในไฟล์ข้างหน้า สี่แอตทริบิวต์คือสี่ช่อง ภาษาของข้อความ แถวที่ผู้ชมเลือกในเมนูคำบรรยาย และ default ซึ่งทำให้แทร็กนี้เปิดเอง หมายเลขคิวจาก SRT ถูกเก็บเป็นตัวระบุคิว
ไฟล์ WebVTT เข้าและออกเป็น WebVTT เดิม
ข้อมูลนำเข้า
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
ผลลัพธ์
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
ทุกอย่างที่ไฟล์ WebVTT ถือนอกคิวรอด ชื่อเรื่องบนบรรทัด WEBVTT บล็อก NOTE บล็อก STYLE ที่กำหนดหน้าตาคำบรรยายในเครื่องเล่น บรรทัดชื่อคิว และการตั้งค่าต่อคิว align:start position:10% โดย %25 คือเครื่องหมายเปอร์เซ็นต์ที่เข้ารหัสเพราะเครื่องหมายเปอร์เซ็นต์เปล่าไม่อนุญาตใน URI ไฟล์ที่เข้ามาเป็น WebVTT ออกไปเป็น WebVTT เดิม สองช่องบอก en-GB และ English (UK) เพราะสำเนานี้ทำเพื่อผู้ชมอังกฤษ ไม่มีอะไรในไฟล์บอกเช่นนั้น
คำบรรยายสำหรับผู้ชมที่ฟังไม่ได้
ข้อมูลนำเข้า
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
ผลลัพธ์
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
ไฟล์เต็มไปด้วยเสียงประกอบและดนตรี ซึ่งเป็นสิ่งที่ kind="captions" มีไว้สำหรับ และช่องคือที่เดียวที่บอกได้ แยกกันนั้นชื่อเมนูถูกพิมพ์เป็น Tom & "the boss" และออกมาเป็น Tom & "the boss" เครื่องหมายคำพูดที่ไม่ถูก escape จะปิดแอตทริบิวต์ตรงนั้นและเปลี่ยนชื่อที่เหลือเป็นแอตทริบิวต์เพี้ยนบนอิลิเมนต์
สามช่องที่ถูกล้างหรือปิด
ข้อมูลนำเข้า
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
ผลลัพธ์
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
สามช่องเปลี่ยน สามผลลัพธ์ต่างกัน เพราะ HTML ขอสิ่งต่างกัน ชื่อเมนูหายไปจากอิลิเมนต์ทั้งหมด มันเป็นตัวเลือกและการละไว้ยกการตัดสินให้เครื่องเล่น ช่องภาษาว่างและยังให้ srclang="en" แทร็กที่ประกาศเป็น subtitles ต้องระบุภาษา จึงไม่มีช่องว่างจริง และค่าถอยหลังปรากฏในเอาต์พุต สวิตช์ default ปิดและแอตทริบิวต์นั้นก็หายไปด้วย แทร็กนี้จึงไม่เปิดเอง ซึ่งเป็นทิศที่ปลอดภัยเมื่อหน้ามีมากกว่าหนึ่งแทร็ก
คำถามที่พบบ่อย
ยังต้องมีไฟล์ .vtt ข้างหน้าเว็บไหม?
ไม่ และนั่นคือจุดของหน้านี้ WebVTT ถูกเขียนลงในแอตทริบิวต์ src เป็น data: URI อิลิเมนต์จึงพาคำบรรยายของตัวเองไป คุณคัดลอกไปวางในหน้า ส่งไฟล์ทางอีเมล หรือย้ายไปโฟลเดอร์อื่นแล้วคำบรรยายก็ยังปรากฏ สิ่งเดียวที่ต้องระวังคือทั้งหมดเป็นแอตทริบิวต์เดียว ถ้าคัดลอกเพียงบางส่วนของบรรทัดยาวนั้น คุณทำให้ URI เสียและแทร็กจะว่าง
จะทำงานไหมถ้าเปิดไฟล์เว็บจากเครื่องตัวเองเฉย ๆ?
ได้ และกรณีนั้นคือเหตุผลที่หน้านี้ฝังคำบรรยายเมื่อหน้าเว็บถูกเปิดจากดิสก์ เบราว์เซอร์ปฏิเสธการดึงไฟล์แทร็กแยก แทร็กที่ชี้ไป film.vtt จึงแสดงอะไรไม่ได้ ไม่มีข้อผิดพลาดให้เห็นเพียงเมนูคำบรรยายว่าง data: URI ไม่ถูกดึงเลย ข้อความอยู่ในแอตทริบิวต์แล้ว มันจึงทำงานเหมือนกันบนเดสก์ท็อปและบนเซิร์ฟเวอร์
ทำไมเอาต์พุตจึงยาวกว่าไฟล์คำบรรยายมาก?
เพราะทุกตัวอักษรที่ไม่ใช่ตัวอักษรหรือตัวเลขกลายเป็นสามตัวใน URI ช่องว่างคือ %20 และการขึ้นบรรทัดใหม่คือ %0A ไฟล์หนึ่งร้อยกิโลไบต์กลายเป็นไม่กี่ร้อย Base64 จะสั้นกว่าที่ราวหนึ่งในสามของเดิมแทนที่จะเป็นสองเท่า แต่ผลจะเป็นกำแพงตัวอักษรที่อ่านไม่ออก แบบนี้คุณมองแอตทริบิวต์ src แล้วจำบทพูดของตัวเองได้ ซึ่งคุ้มกับขนาดที่เพิ่มสำหรับไฟล์ที่คุณกำลังจะวางในหน้าและดูแลด้วยมือ
ทำไมไม่มีแอตทริบิวต์ label หลังจากล้างช่อง?
เพราะชื่อเมนูเป็นตัวเลือกใน HTML และการละไว้ไม่ได้หมายถึงไม่ได้หมายถึงไม่มีชื่อ แต่หมายถึงเครื่องเล่นตัดสินว่าจะแสดงอะไรในเมนูคำบรรยาย ซึ่งมักเป็นภาษา การล้างช่องจึงเอาแอตทริบิวต์ออกแทนที่จะเขียนค่าว่าง เพราะ label="" จะแสดงเป็นแถวว่างในเมนูนั้น ใส่ชื่อกลับได้ทุกเมื่อ มันเป็นสตริงธรรมดาและไม่มีอะไรบนหน้าขึ้นกับมัน
subtitles กับ captions ต่างกันอย่างไรที่นี่?
ต่างที่ผู้ชม subtitles สมมติว่าผู้ชมได้ยินเสียงและต้องการคำแปลหรือคำที่เขียนออกมา captions สมมติว่าผู้ชมฟังไม่ได้ จึงพาข้อมูลที่ผู้ชมที่ได้ยินได้รับทางเสียงไปด้วย ทั้งดนตรี ประตู โทรศัพท์ดัง ไฟล์หนึ่งรับใช้ได้ทั้งสองวัตถุประสงค์และข้อความเดียวกันอยู่ในทั้งคู่ หน้านี้จึงบอกไม่ได้ว่าคุณหมายถึงแบบใดและเปลี่ยนภายหลังในอิลิเมนต์ก็ไม่ได้ เลือกแบบที่ผู้ชมของคุณต้องการ
kind อื่นที่ตัดออกมีอะไรบ้าง?
สามอย่าง descriptions ซึ่งบรรยายภาพสำหรับผู้ชมที่มองไม่เห็น chapters ซึ่งเป็นการนำทางไม่ใช่คำบรรยายและมีหน้าของมันบนเว็บไซต์นี้ และ metadata ซึ่งไม่แสดงให้ใครเห็น ทั้งสามเติมด้วยเนื้อหาของไฟล์คำบรรยายไม่ได้ การเสนอจึงมีแต่ทำให้สร้างอิลิเมนต์ที่ไม่แสดงอะไร สองอย่างที่เสนอเป็นสองอย่างที่ไฟล์คำบรรยายรับใช้ได้จริง
มีอะไรในคำบรรยายเปลี่ยนไประหว่างทางไหม?
ข้อความ เวลา และสไตล์ไม่เปลี่ยน และไฟล์ WebVTT เก็บบล็อกความเห็น สไตล์ และภูมิภาคของตัวเองรวมถึงการตั้งค่าต่อคิว สิ่งที่เปลี่ยนคือรูปทรง บรรทัดถูกเขียนใหม่ในไวยากรณ์ WebVTT ซึ่งเป็นสิ่งที่เครื่องเล่นอ่าน เครื่องหมายจุลภาคใน 00:00:01,000 ของ SRT จึงกลายเป็นจุด หนึ่งไบต์ถูกทิ้งโดยเจตนา คือเครื่องหมายนำที่บอกว่าไฟล์เป็น UTF-8 เพราะ data URI ระบุการเข้ารหัสเองและเครื่องหมายนั้นจะปรากฏเป็นตัวอักษรแปลกสามตัวที่ต้น