คุณได้เตรียมไฟล์วิดีโอสำหรับเว็บอย่างถูกต้องแล้ว คุณได้ระบุขนาดและความละเอียดที่ถูกต้องแล้ว คุณยังสร้างไฟล์ 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="chrome.webm" type="video/webm">
<source src="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="chrome.webm#t=5,10" type="video/webm">
นอกจากนี้ คุณยังระบุเวลาใน <hours>:<minutes>:<seconds> ได้ด้วย ตัวอย่างเช่น #t=00:01:05 จะเริ่มวิดีโอที่ 1 นาที 5 วินาที หากต้องการเล่นเฉพาะนาทีแรกของวิดีโอ ให้ระบุ #t=,00:01:00
คุณสามารถใช้ฟีเจอร์นี้เพื่อแสดงมุมมองหลายมุมมองในวิดีโอเดียวกัน เช่น จุดเริ่มโฆษณาใน DVD โดยไม่ต้องเข้ารหัสและแสดงไฟล์หลายไฟล์
เพื่อให้ฟีเจอร์นี้ทำงานได้ เซิร์ฟเวอร์ของคุณต้องรองรับคำขอช่วงและต้องเปิดใช้ความสามารถดังกล่าว เซิร์ฟเวอร์ส่วนใหญ่จะเปิดใช้คำขอช่วงโดยค่าเริ่มต้น เนื่องจากบริการโฮสติ้งบางแห่งปิดใช้คำขอช่วง คุณจึงควรยืนยันว่าคำขอช่วงพร้อมใช้งานสำหรับการใช้ส่วนย่อยในเว็บไซต์ของคุณ
แต่คุณสามารถทำได้ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ เช่น ใน Chrome จะอยู่ในแผงเครือข่าย มองหาส่วนหัว Accept-Ranges และตรวจสอบว่ามีข้อความ bytes ในรูปภาพ ฉันได้วาดกล่องสีแดงรอบส่วนหัวนี้ หากไม่เห็น bytes เป็นค่า คุณจะต้องติดต่อผู้ให้บริการโฮสติ้ง
ใส่ภาพโปสเตอร์
เพิ่มแอตทริบิวต์โปสเตอร์ลงในองค์ประกอบ video เพื่อให้ผู้ชมทราบถึงเนื้อหาทันทีที่องค์ประกอบโหลด โดยไม่ต้องดาวน์โหลดวิดีโอหรือเริ่มเล่น
<video poster="poster.jpg" ...>
…
</video>
นอกจากนี้ โปสเตอร์ยังใช้เป็นทางเลือกสำรองได้หากวิดีโอ src เสียหรือระบบไม่รองรับรูปแบบวิดีโอที่ระบุ ข้อเสียเพียงอย่างเดียวของรูปภาพโปสเตอร์คือคำขอไฟล์เพิ่มเติม ซึ่งใช้แบนด์วิดท์บางส่วนและต้องมีการแสดงผล
ดูข้อมูลเพิ่มเติมได้ที่เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ
ตรวจสอบว่าวิดีโอไม่ล้นคอนเทนเนอร์
เมื่อองค์ประกอบวิดีโอมีขนาดใหญ่เกินกว่าวิวพอร์ต องค์ประกอบอาจล้นคอนเทนเนอร์ ทำให้ผู้ใช้ดูเนื้อหาหรือใช้ตัวควบคุมไม่ได้
คุณควบคุมขนาดวิดีโอได้โดยใช้ CSS หาก CSS ไม่ตอบโจทย์ความต้องการทั้งหมดของคุณ ไลบรารีและปลั๊กอิน JavaScript เช่น FitVids จะช่วยได้ แม้จะเป็นวิดีโอจาก YouTube และแหล่งที่มาอื่นๆ ก็ตาม แต่ทรัพยากรเหล่านี้อาจเพิ่มขนาดเพย์โหลดของเครือข่าย ซึ่งส่งผลเสียต่อรายได้ของคุณและเงินในกระเป๋าของผู้ใช้
สำหรับการใช้งานง่ายๆ อย่างที่ฉันอธิบายไว้ที่นี่ ให้ใช้คิวรี่สื่อ CSS เพื่อระบุขนาดขององค์ประกอบโดยขึ้นอยู่กับขนาดวิวพอร์ต 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
เมื่อคุณทราบวิธีเพิ่มสื่อลงในหน้าเว็บแล้ว ก็ถึงเวลาเรียนรู้เกี่ยวกับการช่วยเหลือพิเศษสำหรับสื่อ ซึ่งคุณจะเพิ่มคำบรรยายแทนเสียงลงในวิดีโอสำหรับผู้ที่มีความบกพร่องทางการได้ยิน หรือเมื่อการเล่นเสียงไม่ใช่ตัวเลือกที่เหมาะสม