ตามที่คุณได้เรียนรู้ในโมดูลรูปภาพ 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>
ได้
ตรวจสอบความเข้าใจ
ทดสอบความรู้ด้านเสียงและวิดีโอ
องค์ประกอบ <track>
ใช้ทำอะไร
แอตทริบิวต์ poster
ควบคุมอะไร