คุณได้เตรียมไฟล์วิดีโอสำหรับเว็บอย่างถูกต้องแล้ว คุณระบุขนาดและความละเอียดที่ถูกต้องแล้ว คุณยังสร้างไฟล์ 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 อาจส่งผลต่อประสิทธิภาพเมื่อมีแหล่งที่มาหลายแห่งที่มีประเภทที่ไม่รองรับ
คุณเจาะลึกรายละเอียดได้หลายวิธี ดู Digital Media Primer สำหรับกี๊ก เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของวิดีโอและเสียงในเว็บ นอกจากนี้ คุณยังใช้การแก้ไขข้อบกพร่องระยะไกลในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อเปรียบเทียบกิจกรรมเครือข่ายกับแอตทริบิวต์ประเภทและที่ไม่มีแอตทริบิวต์ประเภทได้
ระบุเวลาเริ่มต้นและเวลาสิ้นสุด
ประหยัดแบนด์วิดท์และทำให้เว็บไซต์ตอบสนองมากขึ้นโดยใช้ Fragment สื่อเพื่อเพิ่มเวลาเริ่มต้นและเวลาสิ้นสุดลงในองค์ประกอบวิดีโอ
หากต้องการใช้ส่วนย่อยสื่อ ให้เพิ่ม #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 นาที 5 วินาที หากต้องการเล่นเฉพาะนาทีแรกของวิดีโอ ให้ระบุ #t=,00:01:00
คุณสามารถใช้ฟีเจอร์นี้เพื่อแสดงการดูวิดีโอเดียวกันหลายครั้ง เช่น จุดเริ่มโฆษณาในดีวีดี โดยไม่ต้องเข้ารหัสและแสดงไฟล์หลายไฟล์
เพื่อให้ฟีเจอร์นี้ทำงานได้ เซิร์ฟเวอร์ของคุณต้องรองรับคำขอช่วงและต้องเปิดใช้ความสามารถดังกล่าว เซิร์ฟเวอร์ส่วนใหญ่จะเปิดใช้คําขอช่วงโดยค่าเริ่มต้น เนื่องจากบริการโฮสติ้งบางอย่างจะปิดไป คุณจึงควรยืนยันว่ามีคำขอช่วงให้ใช้ Fragment ในเว็บไซต์
โชคดีที่คุณสามารถทำได้ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ ตัวอย่างเช่น ใน 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
ตอนนี้คุณทราบวิธีเพิ่มสื่อลงในหน้าเว็บแล้ว ก็ถึงเวลาเรียนรู้เกี่ยวกับการช่วยเหลือพิเศษในสื่อ ซึ่งคุณจะเพิ่มคำบรรยายแทนเสียงลงในวิดีโอสำหรับผู้มีความบกพร่องทางการได้ยิน หรือเมื่อเล่นเสียงไม่ได้