เผยแพร่: 20 สิงหาคม 2020
ผู้ใช้จำนวนมากสามารถใช้คำบรรยายภาพและคำอธิบายโปรแกรมอ่านหน้าจอได้ วิดีโอของคุณ และในเขตอำนาจศาลบางแห่ง ข้อกำหนดเหล่านี้จำเป็นโดย กฎหมายหรือกฎระเบียบ รูปแบบ WebVTT (แทร็กข้อความวิดีโอบนเว็บ) ใช้เพื่ออธิบายข้อมูลข้อความที่มีการจับเวลา เช่น คำบรรยายแทนเสียงหรือคำบรรยายวิดีโอ เพื่อให้วิดีโอของคุณเข้าถึงได้ง่ายขึ้น
เพิ่มแท็ก <track>
หากต้องการเพิ่มคำบรรยายแทนเสียงหรือคำอธิบายโปรแกรมอ่านหน้าจอลงในวิดีโอบนเว็บ ให้เพิ่ม <track>
ภายในแท็ก <video> นอกจากคำบรรยายแทนเสียงและคำอธิบายสำหรับโปรแกรมอ่านหน้าจอแล้ว คุณยังใช้แท็ก <track> สำหรับคำบรรยายและชื่อบทได้ด้วย
แท็ก <track> คล้ายกับองค์ประกอบ <source> ตรงที่แอตทริบิวต์ src ของทั้ง 2 รายการชี้ไปยังเนื้อหาที่อ้างอิง สำหรับแท็ก <track> แท็กนี้จะชี้ไปยังไฟล์ WebVTT
แอตทริบิวต์ label ระบุวิธีระบุแทร็กที่ต้องการในอินเทอร์เฟซ
หากต้องการเพิ่มแทร็กสำหรับหลายภาษา ให้เพิ่มแท็ก <track> แยกกันสำหรับแต่ละภาษา
ไฟล์ WebVTT ที่คุณระบุและระบุภาษาโดยใช้ srclang
มาดูตัวอย่างแท็ก <video> ที่มีแท็ก <track> 2 แท็ก
เพิ่มองค์ประกอบ <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>
นอกจากนี้ คุณยังดูตัวอย่างเพลงใน Glitch ได้ด้วย
โครงสร้างไฟล์ 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: มองไม่เห็นและสคริปต์อาจใช้
เมื่อเข้าใจพื้นฐานเกี่ยวกับการทำให้วิดีโอพร้อมใช้งานและเข้าถึงได้ในหน้าเว็บแล้ว คุณอาจสงสัยเกี่ยวกับกรณีการใช้งานที่ซับซ้อนมากขึ้น ดูข้อมูลเกี่ยวกับ เฟรมเวิร์กสื่อและวิธีที่กรอบงานจะช่วยคุณเพิ่ม วิดีโอลงในหน้าเว็บของคุณ ขณะเดียวกันก็ให้ฟีเจอร์ขั้นสูง