คุณได้เตรียมไฟล์วิดีโอสำหรับเว็บอย่างถูกต้องแล้ว คุณได้ระบุขนาดและความละเอียดที่ถูกต้องแล้ว คุณยังสร้างไฟล์ WebM และ MP4 แยกกันสำหรับเบราว์เซอร์แต่ละประเภทได้ด้วย
คุณยังคงต้องเพิ่มวิดีโอลงในหน้าเว็บเพื่อให้ผู้อื่นเห็น การทำอย่างถูกต้องนั้นต้องเพิ่มองค์ประกอบ HTML 2 รายการ ได้แก่ องค์ประกอบ <video> และองค์ประกอบ <source> นอกจากข้อมูลเบื้องต้นเกี่ยวกับแท็กเหล่านี้แล้ว บทความนี้ยังอธิบายแอตทริบิวต์ที่คุณควรเพิ่มลงในแท็กเหล่านั้นเพื่อสร้างประสบการณ์ที่ดีให้แก่ผู้ใช้
ระบุไฟล์เดียว
คุณใช้องค์ประกอบวิดีโอเพียงอย่างเดียวได้ แม้ว่าเราจะไม่แนะนําก็ตาม ใช้แอตทริบิวต์ type เสมอตามที่แสดงด้านล่าง เบราว์เซอร์จะใช้ข้อมูลนี้เพื่อระบุว่าเล่นไฟล์วิดีโอที่ระบุได้หรือไม่ หากไม่พบ ข้อความที่แนบมาจะแสดงขึ้น
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
ระบุรูปแบบไฟล์หลายรูปแบบ
โปรดทราบว่าจากข้อมูลเบื้องต้นเกี่ยวกับไฟล์สื่อ เบราว์เซอร์บางรุ่นอาจไม่รองรับรูปแบบวิดีโอเดียวกัน องค์ประกอบ <source> ช่วยให้คุณระบุรูปแบบหลายรูปแบบเป็นรูปแบบสำรองได้ในกรณีที่เบราว์เซอร์ของผู้ใช้ไม่รองรับรูปแบบใดรูปแบบหนึ่ง
ตัวอย่างด้านล่างจะสร้างวิดีโอที่ฝังไว้ซึ่งใช้เป็นตัวอย่างในบทความนี้
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
คุณควรเพิ่มแอตทริบิวต์ type ลงในเหตุการณ์แท็ก <source> เสมอ แม้ว่าจะเลือกไม่เพิ่มก็ได้ วิธีนี้ช่วยให้มั่นใจว่าเบราว์เซอร์จะดาวน์โหลดเฉพาะไฟล์ที่เล่นได้
แนวทางนี้มีข้อดีหลายประการเหนือกว่าการแสดง HTML หรือสคริปต์ฝั่งเซิร์ฟเวอร์ที่แตกต่างกัน โดยเฉพาะในอุปกรณ์เคลื่อนที่
- คุณสามารถแสดงรูปแบบตามลำดับที่ต้องการได้
- การเปลี่ยนฝั่งไคลเอ็นต์จะช่วยลดเวลาในการตอบสนอง เนื่องจากมีการสร้างคำขอเพียงรายการเดียวเพื่อรับเนื้อหา
- การให้เบราว์เซอร์เลือกรูปแบบนั้นง่ายกว่า เร็วกว่า และอาจเชื่อถือได้มากกว่าการใช้ฐานข้อมูลการสนับสนุนฝั่งเซิร์ฟเวอร์ที่มีการตรวจหา User Agent
- การระบุประเภทของแหล่งที่มาของไฟล์แต่ละแหล่งจะช่วยปรับปรุงประสิทธิภาพเครือข่าย เนื่องจากเบราว์เซอร์จะเลือกแหล่งที่มาของวิดีโอได้โดยไม่ต้องดาวน์โหลดวิดีโอบางส่วนเพื่อ "สแกนสอดแนม" รูปแบบ
ปัญหาเหล่านี้มีความสำคัญอย่างยิ่งในบริบทของอุปกรณ์เคลื่อนที่ซึ่งมีแบนด์วิดท์และเวลาในการตอบสนองที่มีค่า และผู้ใช้อาจมีความอดทนจำกัด การละเว้นแอตทริบิวต์ type อาจส่งผลต่อประสิทธิภาพเมื่อมีแหล่งที่มาหลายแห่งที่มีประเภทที่ไม่รองรับ
คุณดูรายละเอียดได้หลายวิธี ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของวิดีโอและเสียงบนเว็บได้จากข้อมูลเบื้องต้นเกี่ยวกับสื่อดิจิทัลสำหรับมือโปร นอกจากนี้ คุณยังใช้การแก้ไขข้อบกพร่องจากระยะไกลในเครื่องมือสําหรับนักพัฒนาเว็บเพื่อเปรียบเทียบกิจกรรมในเครือข่ายที่มีแอตทริบิวต์ประเภทและไม่มีแอตทริบิวต์ประเภทได้ด้วย
ระบุเวลาเริ่มต้นและเวลาสิ้นสุด
ประหยัดแบนด์วิดท์และทำให้เว็บไซต์ตอบสนองเร็วขึ้น: ใช้เศษสื่อเพื่อเพิ่มเวลาเริ่มต้นและสิ้นสุดลงในองค์ประกอบวิดีโอ
หากต้องการใช้ข้อมูลโค้ดของสื่อ ให้เพิ่ม #t=[start_time][,end_time] ลงใน URL ของสื่อ เช่น หากต้องการเล่นวิดีโอจากวินาทีที่ 5 ถึง 10 ให้ระบุดังนี้
<source src="video/chrome.webm#t=5,10" type="video/webm">
นอกจากนี้ คุณยังระบุเวลาใน <hours>:<minutes>:<seconds> ได้ด้วย ตัวอย่างเช่น #t=00:01:05 จะเริ่มต้นวิดีโอที่นาทีที่ 1:05 หากต้องการเล่นเฉพาะนาทีแรกของวิดีโอ ให้ระบุ #t=,00:01:00
คุณสามารถใช้ฟีเจอร์นี้เพื่อแสดงมุมมองหลายมุมมองในวิดีโอเดียวกันได้ เช่น จุดเริ่มเล่นใน DVD โดยไม่ต้องเข้ารหัสและแสดงไฟล์หลายไฟล์
เพื่อให้ฟีเจอร์นี้ใช้งานได้ เซิร์ฟเวอร์ของคุณต้องรองรับคำขอช่วงและต้องเปิดใช้ความสามารถดังกล่าว เซิร์ฟเวอร์ส่วนใหญ่จะเปิดใช้คำขอช่วงโดยค่าเริ่มต้น เนื่องจากบริการโฮสติ้งบางรายปิดใช้คุณจึงควรตรวจสอบว่าคำขอช่วงพร้อมใช้งานสำหรับการใช้ข้อมูลโค้ดในเว็บไซต์ของคุณ
แต่คุณดำเนินการนี้ได้ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ เช่น ใน Chrome ตัวเลือกนี้จะอยู่ในแผงเครือข่าย มองหาส่วนหัว Accept-Ranges และตรวจสอบว่าส่วนหัวดังกล่าวระบุว่า bytes ในรูปภาพนี้ เราได้วาดกล่องสีแดงรอบส่วนหัวนี้ หากไม่เห็นค่า bytes คุณจะต้องติดต่อผู้ให้บริการโฮสติ้ง
ใส่ภาพโปสเตอร์
เพิ่มแอตทริบิวต์โปสเตอร์ลงในองค์ประกอบ video เพื่อให้ผู้ชมเห็นภาพเนื้อหาทันทีที่องค์ประกอบโหลดโดยไม่ต้องดาวน์โหลดวิดีโอหรือเริ่มเล่น
<video poster="poster.jpg" ...>
…
</video>
โปสเตอร์ยังใช้เป็นทางเลือกสำรองได้ในกรณีที่วิดีโอsrcใช้งานไม่ได้ หรือในกรณีที่ระบบไม่รองรับรูปแบบวิดีโอที่ระบุ ข้อเสียเพียงอย่างเดียวของภาพโปสเตอร์คือคำขอไฟล์เพิ่มเติม ซึ่งจะกินแบนด์วิดท์บางส่วนและต้องมีการเรนเดอร์
ดูข้อมูลเพิ่มเติมได้ที่เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ
ตรวจสอบว่าวิดีโอไม่ล้นคอนเทนเนอร์
เมื่อองค์ประกอบวิดีโอมีขนาดใหญ่เกินกว่าวิวพอร์ต องค์ประกอบเหล่านั้นอาจแสดงเกินคอนเทนเนอร์ ทำให้ผู้ใช้ไม่เห็นเนื้อหาหรือใช้ตัวควบคุมไม่ได้
คุณควบคุมขนาดวิดีโอได้โดยใช้ CSS หาก CSS ไม่ตรงกับความต้องการทั้งหมดของคุณ ไลบรารีและปลั๊กอิน JavaScript เช่น FitVids จะช่วยคุณได้ แม้กระทั่งกับวิดีโอจาก YouTube และแหล่งที่มาอื่นๆ แต่ทรัพยากรเหล่านี้อาจเพิ่มขนาดเพย์โหลดของเครือข่าย ซึ่งส่งผลเสียต่อรายได้และกระเป๋าสตางค์ของผู้ใช้
สําหรับการใช้งานแบบง่าย เช่น ที่เราอธิบายไว้ที่นี่ ให้ใช้ CSS Media Queries เพื่อระบุขนาดขององค์ประกอบตามมิติข้อมูลของวิวพอร์ต โดย max-width:
100% จะเป็นตัวช่วยของคุณ
สำหรับเนื้อหาสื่อใน iframe (เช่น วิดีโอ YouTube) ให้ลองใช้แนวทางที่ตอบสนองได้ (เช่น แนวทางที่John Surdakowski เสนอ)
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
เปรียบเทียบตัวอย่างที่ตอบสนองกับเวอร์ชันที่ไม่ตอบสนอง ดังที่คุณเห็น เวอร์ชันที่ไม่ตอบสนองนั้นไม่ใช่ประสบการณ์การใช้งานที่ยอดเยี่ยม
การวางแนวของอุปกรณ์
การวางแนวของอุปกรณ์ไม่ใช่ปัญหาสำหรับจอภาพเดสก์ท็อปหรือแล็ปท็อป แต่มีความสำคัญอย่างยิ่งเมื่อพิจารณาการออกแบบหน้าเว็บสำหรับอุปกรณ์เคลื่อนที่และแท็บเล็ต
Safari ใน iPhone เปลี่ยนการวางแนวระหว่างแนวตั้งกับแนวนอนได้ดี
การวางแนวอุปกรณ์ใน iPad และ Chrome ใน Android อาจทำให้เกิดปัญหาได้ ตัวอย่างเช่น หากไม่มีการปรับเปลี่ยนใดๆ วิดีโอที่เล่นบน iPad ในแนวนอนจะมีลักษณะดังนี้
การตั้งค่าวิดีโอเป็น width: 100% หรือ max-width: 100% ด้วย CSS ช่วยแก้ปัญหาการจัดวางการวางแนวอุปกรณ์ได้หลายอย่าง
เล่นอัตโนมัติ
แอตทริบิวต์ autoplay จะควบคุมว่าเบราว์เซอร์จะดาวน์โหลดและเล่นวิดีโอทันทีหรือไม่ วิธีการที่แน่ชัดจะขึ้นอยู่กับแพลตฟอร์มและเบราว์เซอร์
Chrome: ขึ้นอยู่กับหลายปัจจัย ซึ่งรวมถึงแต่ไม่จํากัดเพียงการดูบนเดสก์ท็อปและผู้ใช้อุปกรณ์เคลื่อนที่ได้เพิ่มเว็บไซต์หรือแอปของคุณลงในหน้าจอหลักหรือไม่ โปรดดูรายละเอียดที่หัวข้อแนวทางปฏิบัติแนะนำสำหรับการเล่นอัตโนมัติ
Firefox: บล็อกวิดีโอและเสียงทั้งหมด แต่ให้ผู้ใช้สามารถผ่อนคลายข้อจำกัดเหล่านี้สำหรับทุกเว็บไซต์หรือบางเว็บไซต์ โปรดดูรายละเอียดที่หัวข้ออนุญาตหรือบล็อกการเล่นสื่ออัตโนมัติใน Firefox
Safari: ที่ผ่านมาต้องใช้ท่าทางสัมผัสของผู้ใช้ แต่ได้ผ่อนปรนข้อกำหนดดังกล่าวในเวอร์ชันล่าสุด โปรดดูรายละเอียดที่หัวข้อนโยบายใหม่สำหรับ <video> ใน iOS
แม้ในแพลตฟอร์มที่เปิดใช้การเล่นอัตโนมัติได้ คุณก็ควรพิจารณาว่าควรเปิดใช้หรือไม่ โดยพิจารณาจากปัจจัยต่อไปนี้
- การใช้อินเทอร์เน็ตอาจทำให้สิ้นเปลืองเงิน
- การเล่นสื่อก่อนที่ผู้ใช้ต้องการอาจทำให้แบนด์วิดท์และ CPU ทำงานหนัก และทำให้การแสดงผลหน้าเว็บล่าช้า
- ผู้ใช้อาจอยู่ในบริบทที่การเล่นวิดีโอหรือเสียงเป็นการรบกวน
โหลดล่วงหน้า
แอตทริบิวต์ preload บอกใบ้ให้เบราว์เซอร์ทราบว่าควรโหลดข้อมูลหรือเนื้อหาล่วงหน้าเท่าใด
| ค่า | คำอธิบาย |
|---|---|
none |
ผู้ใช้อาจเลือกไม่ดูวิดีโอ ดังนั้นอย่าโหลดล่วงหน้า |
metadata |
ควรโหลดข้อมูลเมตา (ระยะเวลา ขนาด แทร็กข้อความ) ไว้ล่วงหน้า แต่ใช้วิดีโอให้น้อยที่สุด |
auto |
การดาวน์โหลดวิดีโอทั้งเรื่องทันทีถือว่าเหมาะสม สตริงว่างจะให้ผลลัพธ์แบบเดียวกัน |
แอตทริบิวต์ preload มีผลแตกต่างกันในแพลตฟอร์มต่างๆ
เช่น Chrome บัฟเฟอร์วิดีโอ 25 วินาทีบนเดสก์ท็อป แต่ไม่มีบัฟเฟอร์ใน iOS หรือ Android ซึ่งหมายความว่าบนอุปกรณ์เคลื่อนที่อาจมีความล่าช้าในการเริ่มเล่นซึ่งไม่เกิดขึ้นบนเดสก์ท็อป ดูรายละเอียดเพิ่มเติมได้ที่การเล่นแบบเร็วด้วยการโหลดเสียงและวิดีโอล่วงหน้าหรือบล็อกของ Steve Souders
เมื่อทราบวิธีเพิ่มสื่อลงในหน้าเว็บแล้ว ก็ถึงเวลาเรียนรู้เกี่ยวกับการช่วยเหลือพิเศษสำหรับสื่อ ซึ่งคุณจะเพิ่มคำบรรยายแทนเสียงลงในวิดีโอสำหรับผู้ที่มีปัญหาการได้ยิน หรือในกรณีที่เล่นเสียงไม่ได้