การช่วยเหลือพิเศษของสื่อ

เดเร็ก เฮอร์แมน

โจ เมดเลย์

ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับรูปแบบ WebVTT (Web Video TextTrack) ซึ่งใช้อธิบายข้อมูลแบบข้อความที่มีการกำหนดเวลา เช่น คำบรรยายหรือคำบรรยายเพื่อให้ผู้ชมสามารถเข้าถึงวิดีโอได้มากขึ้น

การช่วยเหลือพิเศษไม่ใช่ไอซิ่งบนหน้าเค้ก คุณไม่จำเป็นต้องใส่ทุกอย่างไว้ในงานค้าง โดยหวังว่าจะนำเสนอเทมเพลตนั้นๆ ในภายหลัง คำบรรยายวิดีโอและโปรแกรมอ่านหน้าจอ เป็นเพียงวิธีเดียวที่ผู้ใช้จำนวนมากจะดูวิดีโอได้ และในบางเขตอำนาจศาล กฎหมายหรือกฎระเบียบยังกำหนดให้ใช้ด้วย

เพิ่มแท็ก <track>

หากต้องการเพิ่มคำบรรยายแทนเสียงหรือคำอธิบายโปรแกรมอ่านหน้าจอลงในวิดีโอบนเว็บ ให้เพิ่มแท็ก <track> ภายในแท็ก <video> นอกเหนือจากคําอธิบายจากคําบรรยายวิดีโอและโปรแกรมอ่านหน้าจอแล้ว อาจมีการใช้แท็ก <track> สําหรับคําบรรยายและชื่อบทด้วย แท็ก <track> ยังช่วยให้เครื่องมือค้นหาเข้าใจสิ่งที่อยู่ในวิดีโอด้วย อย่างไรก็ตาม ความสามารถดังกล่าวอยู่นอกเหนือขอบเขตของบทความนี้

แท็ก <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: มองไม่เห็นและอาจใช้โดยสคริปต์

เมื่อเข้าใจพื้นฐานในการสร้างวิดีโอและเข้าถึงได้บนหน้าเว็บแล้ว คุณอาจสงสัยเกี่ยวกับกรณีการใช้งานที่ซับซ้อนมากขึ้น ถัดไป คุณจะได้ทราบเกี่ยวกับเฟรมเวิร์กสื่อ และวิธีที่เฟรมเวิร์กนี้จะช่วยให้คุณเพิ่มวิดีโอลงในหน้าเว็บของคุณขณะที่ให้ฟีเจอร์ขั้นสูงทำงาน