ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับรูปแบบ WebVTT (WebVTT (Web Video Text Track)) ซึ่งใช้ในการอธิบายข้อมูลข้อความที่ระบุเวลา เช่น คำบรรยายหรือคำบรรยาย เพื่อให้ผู้ชมเข้าถึงวิดีโอได้มากขึ้น
การช่วยเหลือพิเศษไม่เหมือนการกินขนมปังโรยหน้าเค้ก ไม่ได้หมายความว่าคุณจะใส่ งานที่ยังทำไม่เสร็จ หวังว่าจะได้เปิดตัวในภายหลัง คำบรรยายแทนเสียงและโปรแกรมอ่านหน้าจอ คำอธิบายเป็นวิธีเดียวที่ผู้ใช้หลายคนสามารถ สัมผัสกับวิดีโอของคุณ และ กฎหมายหรือกฎระเบียบก็ได้
เพิ่มแท็ก <track>
หากต้องการเพิ่มคำบรรยายแทนเสียงหรือคำอธิบายโปรแกรมอ่านหน้าจอลงในวิดีโอบนเว็บ ให้เพิ่ม<track>
ภายในแท็ก <video> นอกจากคำบรรยายแทนเสียงและโปรแกรมอ่านหน้าจอ
คำอธิบาย แท็ก <track> อาจใช้สำหรับคำบรรยายและชื่อบทได้ด้วย
แท็ก <track> ยังช่วยให้เครื่องมือค้นหาเข้าใจสิ่งที่อยู่ในวิดีโอได้ด้วย
อย่างไรก็ตาม ความสามารถเหล่านั้นอยู่นอกเหนือขอบเขตของบทความนี้
แท็ก <track> คล้ายกับองค์ประกอบ <source> ที่แท็กทั้งสองมี src
ที่ชี้ไปยังเนื้อหาที่อ้างอิง สำหรับแท็ก <track> แท็กจะชี้ไปยัง
ไฟล์ WebVTT แอตทริบิวต์ label จะระบุลักษณะของแทร็ก
ที่ระบุในอินเทอร์เฟซ
หากต้องการเพิ่มแทร็กสำหรับหลายภาษา ให้เพิ่มแท็ก <track> แยกกันสำหรับแต่ละภาษา
ไฟล์ WebVTT ที่คุณระบุและระบุภาษาโดยใช้ srclang
ตัวอย่างแท็ก <video> ที่มีแท็ก <track> 2 แท็กแสดงอยู่ด้านล่าง นอกจากนี้ยังมี
ตัวอย่างที่คุณสามารถดูใน Glitch (source)
เพิ่มองค์ประกอบ <track> เป็นองค์ประกอบย่อยขององค์ประกอบ <video> ดังนี้
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
โครงสร้างไฟล์ WebVTT
ด้านล่างนี้เป็นไฟล์ WebVTT สมมติสำหรับเดโมที่ลิงก์ไปข้างต้น ไฟล์เป็น ไฟล์ข้อความที่มีชุดคิว แต่ละจุดคือบล็อกข้อความที่จะแสดง บนหน้าจอ และช่วงเวลาที่จะแสดง
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
แต่ละรายการในไฟล์แทร็กจะเรียกว่าคิว แต่ละคิวจะมีเวลาเริ่มต้นและ
เวลาสิ้นสุดที่คั่นด้วยลูกศร โดยมีข้อความเริ่มต้นอยู่ในบรรทัดด้านล่าง กระป๋องคิว
(ไม่บังคับ) มีรหัส เช่น railroad และ manuscript ในตัวอย่างด้านล่างด้วย
คิวจะคั่นด้วยบรรทัดว่าง
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
เวลาเริ่มโฆษณาจะอยู่ในรูปแบบ hours:minutes:seconds.milliseconds การแยกวิเคราะห์เป็นอย่างเข้มงวด
ซึ่งหมายความว่าตัวเลขจะต้องเป็น 0 หากจำเป็น ได้แก่ ชั่วโมง นาที และวินาที
ต้องมีตัวเลข 2 หลัก (00 สำหรับค่าศูนย์) และมิลลิวินาทีต้องมี 3 ตัว
(000 สำหรับค่า 0) เรามีโปรแกรมตรวจสอบ WebVTT ที่ยอดเยี่ยม
Live WebVTT Validator ซึ่งจะตรวจหาข้อผิดพลาดในการจัดรูปแบบเวลา และ
เช่น เวลาที่ไม่เป็นลำดับ
คุณสามารถสร้างไฟล์ VTT ด้วยตนเองได้ และคิดว่ามีบริการมากมายที่จะ สร้างให้คุณ
ดังที่คุณเห็นในตัวอย่างก่อนหน้านี้ รูปแบบ WebVTT ค่อนข้างเรียบง่าย เพียงเพิ่มข้อมูลข้อความพร้อมกับเวลา
แต่หากคุณต้องการให้คำบรรยายแทนเสียงแสดงผลในตำแหน่งอื่นด้วย
จัดชิดซ้ายหรือขวา อาจปรับคำบรรยายให้ตรงกับผู้พูดคนปัจจุบัน
หรือป้องกันไม่ให้เกะกะข้อความในกล้อง โดย WebVTT จะกำหนดการตั้งค่าเพื่อดำเนินการดังกล่าว
และอีกมากมายได้โดยตรง
.vtt ไฟล์ โปรดสังเกตวิธีกำหนดตำแหน่งคำบรรยายแทนเสียงด้วยการเพิ่ม
การตั้งค่าหลังการกำหนดช่วงเวลา
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
ฟีเจอร์ที่มีประโยชน์อีกอย่างคือความสามารถในการจัดรูปแบบคิวโดยใช้ CSS บางทีคุณอาจต้องการ
เพื่อใช้การไล่ระดับสีแบบเส้นตรงสีเทาเป็นพื้นหลัง โดยมีสีพื้นหน้าเป็น
papayawhip สำหรับคำบรรยายทั้งหมดและข้อความตัวหนาทั้งหมดที่เป็นสี peachpuff
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
หากสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับสไตล์และการติดแท็ก ข้อกำหนด WebVTT เป็นแหล่งข้อมูลที่ดีสำหรับตัวอย่างขั้นสูง
ประเภทของแทร็กข้อความ
คุณสังเกตเห็นแอตทริบิวต์ kind ขององค์ประกอบ <track> ไหม ซึ่งใช้เพื่อ
ระบุความสัมพันธ์ระหว่างแทร็กข้อความกับวิดีโอ
ค่าที่เป็นไปได้ของแอตทริบิวต์ kind คือ
captions: สำหรับคำบรรยายแทนเสียงจากข้อความถอดเสียงและอาจแปล ของทุกเสียง เหมาะสำหรับผู้ที่มีความบกพร่องทางการได้ยินและในกรณีที่วิดีโอ กำลังปิดเสียงอยู่subtitles: สำหรับคำบรรยาย กล่าวคือ การแปลเสียงพูดและข้อความใน ภาษาที่แตกต่างจากภาษาหลักของวิดีโอdescriptions: สำหรับคำอธิบายส่วนที่เป็นภาพของเนื้อหาวิดีโอ เหมาะสำหรับผู้มีความบกพร่องทางสายตาchapters: มีไว้เพื่อแสดงเมื่อผู้ใช้กำลังไปยังส่วนต่างๆ ภายใน ในการสร้างสรรค์วิดีโอmetadata: ไม่แสดงและอาจใช้โดยสคริปต์
ตอนนี้คุณก็เข้าใจพื้นฐานของการทำให้วิดีโอพร้อมใช้งานและเข้าถึงได้ง่ายแล้ว ในหน้าเว็บ คุณอาจสงสัยเกี่ยวกับกรณีการใช้งานที่ซับซ้อนขึ้น ต่อไป คุณจะ ดูข้อมูลเกี่ยวกับเฟรมเวิร์กสื่อและวิธีที่เฟรมเวิร์กเหล่านี้ช่วยคุณเพิ่ม วิดีโอลงในหน้าเว็บของคุณ ขณะเดียวกันก็ให้ฟีเจอร์ขั้นสูง