เสียงและวิดีโอ

ดังที่ได้เรียนรู้ในโมดูลรูปภาพ 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 Level 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

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

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

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

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

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

ข้อควรพิจารณาเกี่ยวกับวิดีโอพื้นหลัง

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

<video playsinline 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 เพื่อเพิ่มตัวควบคุมสื่อที่กำหนดเองและนำแอตทริบิวต์ controls ออก เช่น คุณสามารถเพิ่ม <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 จะทำงานไม่สำเร็จ ให้นำแอตทริบิวต์ controls ออกเมื่อสร้างปุ่มแทนที่แล้วเท่านั้น

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

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

ทดสอบความเข้าใจ

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