เสียงและภาพ

ตามที่คุณได้เรียนรู้ในโมดูลรูปภาพ 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 รวมอยู่ด้วย

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

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

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

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

การใส่คำบรรยาย โดยใช้รูปแบบ 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 เพิ่มพร็อพเพอร์ตี้ 2-3 รายการ และเหตุการณ์ของตนเอง ยังมี API สื่ออื่นๆ อีกมากมาย ซึ่งรวมถึง TextTrack API คุณสามารถใช้การจับภาพและสตรีมสื่อ และ MediaDevices API เพื่อบันทึกเสียงจากไมโครโฟนของผู้ใช้ หรือบันทึกหน้าจอของผู้ใช้ Web Audio API ช่วยให้ควบคุมเสียงและสตรีมมิงแบบสดและบันทึกไว้ล่วงหน้า รวมถึงการบันทึกหรือส่งเสียงไปยังองค์ประกอบ <audio> ได้

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

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