ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับรูปแบบ WebVTT (Web Video TextTrack) ซึ่งใช้อธิบายข้อมูลแบบข้อความที่มีการกำหนดเวลา เช่น คำบรรยายหรือคำบรรยายเพื่อให้ผู้ชมสามารถเข้าถึงวิดีโอได้มากขึ้น
การช่วยเหลือพิเศษไม่ใช่ไอซิ่งบนหน้าเค้ก คุณไม่จำเป็นต้องใส่ทุกอย่างไว้ในงานค้าง โดยหวังว่าจะนำเสนอเทมเพลตนั้นๆ ในภายหลัง คำบรรยายวิดีโอและโปรแกรมอ่านหน้าจอ เป็นเพียงวิธีเดียวที่ผู้ใช้จำนวนมากจะดูวิดีโอได้ และในบางเขตอำนาจศาล กฎหมายหรือกฎระเบียบยังกำหนดให้ใช้ด้วย
เพิ่มแท็ก <track>
หากต้องการเพิ่มคำบรรยายแทนเสียงหรือคำอธิบายโปรแกรมอ่านหน้าจอลงในวิดีโอบนเว็บ ให้เพิ่มแท็ก <track>
ภายในแท็ก <video>
นอกเหนือจากคําอธิบายจากคําบรรยายวิดีโอและโปรแกรมอ่านหน้าจอแล้ว
อาจมีการใช้แท็ก <track>
สําหรับคําบรรยายและชื่อบทด้วย
แท็ก <track>
ยังช่วยให้เครื่องมือค้นหาเข้าใจสิ่งที่อยู่ในวิดีโอด้วย
อย่างไรก็ตาม ความสามารถดังกล่าวอยู่นอกเหนือขอบเขตของบทความนี้
![ภาพหน้าจอแสดงคำบรรยายแทนเสียงที่แสดงโดยใช้องค์ประกอบแทร็กใน Chrome บน Android](https://web.dev/static/articles/media-accessibility/image/screenshot-showing-captio-8ddb67f7d86db.jpg?authuser=6&hl=th)
แท็ก <track>
คล้ายกับองค์ประกอบ <source>
ตรงที่ทั้งคู่มีแอตทริบิวต์ src
ที่ชี้ไปยังเนื้อหาที่อ้างอิง สำหรับแท็ก <track>
แท็กจะชี้ไปยังไฟล์ WebVTT แอตทริบิวต์ label
ระบุวิธีที่จะระบุแทร็กที่เฉพาะเจาะจงในอินเทอร์เฟซ
หากต้องการให้บริการแทร็กสำหรับหลายภาษา ให้เพิ่มแท็ก <track>
แยกกันสำหรับไฟล์ WebVTT แต่ละไฟล์ที่คุณระบุ และระบุภาษาโดยใช้แอตทริบิวต์ srclang
ตัวอย่างแท็ก <video>
ที่มีแท็ก <track>
2 แท็กจะแสดงอยู่ด้านล่าง นอกจากนี้ยังมีตัวอย่างที่คุณดูใน Glitch (แหล่งที่มา) ได้ด้วย
เพิ่มองค์ประกอบ <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
การแยกวิเคราะห์เข้มงวด
ซึ่งหมายความว่าตัวเลขต้องมีค่าเสริมเป็นศูนย์ หากจำเป็น: ชั่วโมง นาที และวินาทีต้องมีตัวเลข 2 หลัก (00 สำหรับค่าศูนย์) และมิลลิวินาทีต้องมีตัวเลข 3 หลัก (000 สำหรับค่าศูนย์) มีโปรแกรมตรวจสอบ 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
: มองไม่เห็นและอาจใช้โดยสคริปต์
เมื่อเข้าใจพื้นฐานในการสร้างวิดีโอและเข้าถึงได้บนหน้าเว็บแล้ว คุณอาจสงสัยเกี่ยวกับกรณีการใช้งานที่ซับซ้อนมากขึ้น ถัดไป คุณจะได้ทราบเกี่ยวกับเฟรมเวิร์กสื่อ และวิธีที่เฟรมเวิร์กนี้จะช่วยให้คุณเพิ่มวิดีโอลงในหน้าเว็บของคุณขณะที่ให้ฟีเจอร์ขั้นสูงทำงาน