เสียงและภาพ

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

<audio>และ<video>

คุณใช้องค์ประกอบ <video> และ <audio> เพื่อฝังโปรแกรมเล่นสื่อได้โดยตรงด้วยแอตทริบิวต์ src หรือใช้เป็นองค์ประกอบคอนเทนเนอร์สำหรับชุดองค์ประกอบ <source> แต่ละรายการ โดยแต่ละองค์ประกอบจะมีคำแนะนำไฟล์ src แม้ว่าจะใช้ <video> เพื่อฝังไฟล์เสียงได้ แต่ควรให้องค์ประกอบ <audio> สำหรับการฝังไฟล์เสียงมากกว่า

แท็กเปิด <video> และ <audio> มีแอตทริบิวต์อื่นๆ ได้หลายรายการ ได้แก่ controls, autoplay, loop, mute, preload และแอตทริบิวต์ส่วนกลาง องค์ประกอบ <video> รองรับแอตทริบิวต์ height, width และ poster ด้วย

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

ตัวอย่าง <video> นี้มีแหล่งที่มาเดียวที่มีแอตทริบิวต์ src ลิงก์กับแหล่งที่มาของวิดีโอ แอตทริบิวต์ poster มีรูปภาพที่จะแสดงเมื่อวิดีโอโหลด สุดท้าย แอตทริบิวต์ controls จะให้การควบคุมวิดีโอสำหรับผู้ใช้

เนื้อหาทางเลือกจะรวมอยู่ระหว่างแท็กเปิดและแท็กปิด หาก User Agent ไม่รองรับ <video> (หรือ<audio> ระบบจะแสดงเนื้อหานี้ ต้องใช้แท็กปิด </video> แม้ว่าจะไม่มีเนื้อหาระหว่างทั้ง 2 ไฟล์ก็ตาม (แต่ควรมีเนื้อหาสำรองเสมอใช่ไหม)

หากไม่มีแอตทริบิวต์ src ในแท็กเปิด <video> หรือ <audio> ให้ใส่เอลิเมนต์ <source> อย่างน้อย 1 รายการ โดยแต่ละรายการมีแอตทริบิวต์ src สำหรับไฟล์สื่อ ตัวอย่างต่อไปนี้ประกอบด้วยตัวเลือกไฟล์สื่อ 3 ตัวเลือก เนื้อหาสำรอง และคำบรรยายภาษาอังกฤษและฝรั่งเศสระหว่างแท็กเปิดและแท็กปิด

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

ข้อมูลย่อย <source> แต่ละรายการจะมีแอตทริบิวต์ src ที่ชี้ไปยังทรัพยากร และแอตทริบิวต์ type จะแจ้งให้เบราว์เซอร์ทราบถึงประเภทสื่อของไฟล์ที่ลิงก์ ซึ่งจะป้องกันไม่ให้เบราว์เซอร์เรียกไฟล์สื่อที่ไม่สามารถถอดรหัสได้

ในแอตทริบิวต์ type คุณใส่พารามิเตอร์ codecs ได้ ซึ่งจะระบุวิธีเข้ารหัสทรัพยากรอย่างชัดเจน ตัวแปลงรหัสให้คุณรวมการเพิ่มประสิทธิภาพสื่อที่ยังไม่รองรับในเบราว์เซอร์ทั้งหมด ตัวแปลงรหัสจะแยกออกจากประเภทสื่อด้วยเครื่องหมายเซมิโคลอน ตัวอย่างเช่น ตัวแปลงรหัสอาจเขียนโดยใช้ไวยากรณ์ที่ไม่ซับซ้อน เช่น <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> ซึ่งระบุว่าไฟล์ WebM มีวิดีโอ VP8 และเสียง vorbis ตัวแปลงรหัสก็อาจยากกว่าเช่นกัน เช่น <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> ซึ่งระบุว่าการเข้ารหัส MP4 เป็น Advanced Video Coding Main Profile ระดับ 4.2 การอธิบายไวยากรณ์นี้อยู่นอกเหนือ ขอบเขตของบทเรียนนี้ Jake Archibald มีโพสต์ที่อธิบายวิธีระบุพารามิเตอร์ตัวแปลงรหัสสำหรับวิดีโอ AV1 หากต้องการดูข้อมูลเพิ่มเติม

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

อย่าลืมกำหนดสัดส่วนภาพของวิดีโอ เนื่องจากเมื่อวิดีโอโหลด ขนาดที่แตกต่างกันระหว่างโปสเตอร์และวิดีโอจะทำให้เกิดการจัดเรียงใหม่และการวาดใหม่

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

แทร็ก

ระหว่างแท็กเปิดและแท็กปิดที่จำเป็นของทั้งเสียงและวิดีโอ ให้รวมองค์ประกอบ <track> อย่างน้อย 1 รายการเพื่อระบุแทร็กข้อความที่กำหนดเวลา ตัวอย่างต่อไปนี้มีไฟล์ <track> 2 ไฟล์ ซึ่งมีคำบรรยายข้อความแบบกำหนดเวลาทั้งภาษาอังกฤษและฝรั่งเศส

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

ไฟล์แทร็กที่ระบุในแอตทริบิวต์ src ควรเป็นรูปแบบ WebVTT (.vtt) ไฟล์ควรอยู่ในโดเมนเดียวกับเอกสาร HTML เว้นแต่จะระบุแอตทริบิวต์ crossorigin ไว้

ค่า 5 ค่าสำหรับแอตทริบิวต์ของแทร็ก kind ได้แก่ subtitles, captions, descriptions, chapters และ metadata อื่นๆ

ใส่ subtitles พร้อมกับแอตทริบิวต์ srclang สำหรับการถอดเสียงเป็นคำและการแปลบทสนทนา ค่าของแอตทริบิวต์ label แต่ละรายการ จะแสดงเป็นตัวเลือกให้แก่ผู้ใช้ เนื้อหาของตัวเลือก VTT ที่เลือกจะปรากฏขึ้นเหนือวิดีโอ คุณจัดสไตล์ของคำบรรยายได้โดยกำหนดเป้าหมาย ::cue/ ::cue()

ค่า kind="caption" ควรเก็บไว้สำหรับการถอดเสียงเป็นคำและคำแปลที่มีเอฟเฟกต์เสียงและข้อมูลเสียงที่เกี่ยวข้องอื่นๆ การดำเนินการนี้ไม่ได้มีไว้สำหรับผู้ชมที่หูหนวกเท่านั้น ผู้ใช้อาจหาหูฟังไม่เจอ ผู้ใช้จึงเปิดคำบรรยายแทนเสียง หรือบางทีพวกเขาอาจไม่เข้าใจประเด็นการพูดคุยล่าสุด จากพอดแคสต์ที่ชอบเลย ผู้ชมจึงต้องการอ่านข้อความถอดเสียงเพื่อยืนยันความเข้าใจ การมีทางเลือกในการเข้าถึงเนื้อหาเสียงและวิดีโอต่างก็มีความสำคัญและสะดวกสบาย

kind="description" มีไว้สำหรับข้อความอธิบายเนื้อหาภาพในวิดีโอสำหรับผู้ใช้ที่มองไม่เห็นวิดีโอ ไม่ว่าจะใช้ระบบที่ไม่มีหน้าจออย่าง Google Home หรือ Alexa หรือตาบอดก็ตาม

หมายเหตุ: ส่วนเสียงและวิดีโอของเรียนรู้การช่วยเหลือพิเศษมีรายละเอียดเพิ่มเติมเกี่ยวกับคำบรรยายวิดีโอ transcripts และคำอธิบายเสียง

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

ข้อควรพิจารณาสำหรับวิดีโอพื้นหลัง

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

<video autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

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

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

การควบคุมสื่อที่กำหนดเอง

หากต้องการแสดงตัวควบคุมวิดีโอหรือเสียงที่กำหนดเองแทนการควบคุมในตัวของเบราว์เซอร์ ให้ใส่แอตทริบิวต์ controls จากนั้นใช้ JavaScript เพื่อเพิ่มการควบคุมสื่อที่กำหนดเองและนำแอตทริบิวต์การควบคุมออก เช่น เพิ่ม <button> ที่สลับสถานะการเล่นของไฟล์เสียงได้

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

ตัวอย่างนี้มีปุ่มที่มีแอตทริบิวต์ dataset ซึ่งประกอบด้วยข้อความที่จะอัปเดตเมื่อผู้เข้าชมสลับไปมาระหว่างสถานะเล่นและหยุดชั่วคราว แอตทริบิวต์ aria-controls จะรวมอยู่ใน id ขององค์ประกอบที่ควบคุมโดยปุ่ม ซึ่งในกรณีนี้คือเสียง แต่ละปุ่มที่ควบคุมเสียงจะมีตัวแฮนเดิลเหตุการณ์

หากต้องการสร้างการควบคุมที่กำหนดเอง ให้ใช้ HTMLMediaElement.play() และ HTMLMediaElement.pause() เมื่อสลับสถานะการเล่น ให้สลับข้อความของปุ่มด้วย ดังนี้

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

เมื่อระบุแอตทริบิวต์ controls ผู้ใช้จะควบคุมเสียง (หรือวิดีโอ) ได้แม้ว่า JavaScript จะล้มเหลวก็ตาม นำแอตทริบิวต์การควบคุมออกหลังจากที่สร้างอินสแตนซ์ปุ่มทดแทนแล้วเท่านั้น

document.querySelector('[aria-controls]').removeAttribute('controls');

รวมการควบคุมภายนอกเสมอเมื่อผู้ใช้ไม่สามารถเข้าถึงตัวควบคุม เช่น วิดีโอพื้นหลังที่มีการควบคุมซ่อนอยู่ด้านหลังเนื้อหาเว็บไซต์ การทำความเข้าใจพื้นฐานของข้อกำหนดด้านการเข้าถึงสื่อเพื่ออำนวยความสะดวกให้แก่ผู้ใช้ที่มีความต้องการทางสิ่งแวดล้อมและประสาทสัมผัสที่แตกต่างกัน ซึ่งรวมถึงผู้คนนับล้านที่มีการสูญเสียการได้ยินและความบกพร่องทางสายตา เราเพิ่งกล่าวถึง HTMLMediaElement ซึ่งมีพร็อพเพอร์ตี้ เมธอด และเหตุการณ์ที่รับค่ามาจากทั้ง HTMLVideoElement และ HTMLAudioElement โดยที่ HTMLMediaElement ได้เพิ่มพร็อพเพอร์ตี้ เมธอด และเหตุการณ์ของตนเองบางรายการ ยังมี API สื่ออื่นๆ อีกหลายรายการ ซึ่งรวมถึง TextTrack API คุณสามารถใช้ API การจับภาพและสตรีมสื่อและ MediaDevices เพื่อบันทึกเสียงจากไมโครโฟนของผู้ใช้หรือบันทึกหน้าจอของผู้ใช้ Web Audio API ช่วยให้ควบคุมเสียงและการสตรีมแบบสดและที่บันทึกไว้ล่วงหน้า บันทึก หรือส่งเสียงไปยังองค์ประกอบ <audio> ได้

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับเสียงและวิดีโอ

องค์ประกอบ <track> ใช้ทำอะไร

เพื่อจัดเก็บข้อมูลเกี่ยวกับความยาวและขนาดไฟล์ของวิดีโอ

โปรดลองอีกครั้ง

ใส่คำบรรยายหรือคำบรรยายวิดีโอ

ถูกต้องแล้ว!

เพื่อจัดเก็บวิดีโอหลายเวอร์ชันสำหรับเบราว์เซอร์หรืออุปกรณ์ที่แตกต่างกัน

โปรดลองอีกครั้ง

แอตทริบิวต์ poster ควบคุมอะไร

รูปภาพที่จะแสดงหากเบราว์เซอร์ของผู้ใช้ไม่รองรับวิดีโอ

โปรดลองอีกครั้ง

วิดีโอแนะนำการเป็นสมาชิก

โปรดลองอีกครั้ง

รูปภาพที่แสดงเป็นภาพนิ่งก่อนเล่นวิดีโอ

ถูกต้องแล้ว!