ดูวิดีโอพื้นฐาน เพิ่มการมีส่วนร่วม
หากคุณกำลังคิดที่จะเพิ่มวิดีโอลงในเว็บไซต์ เมื่ออุปกรณ์และการเชื่อมต่อเครือข่าย เร็วขึ้นและมีประสิทธิภาพมากขึ้น คุณสามารถเลิกใช้รูปภาพ และเพิ่มวิดีโอไปยังเครื่องมือของเทคนิคในการสร้างเว็บได้ งานวิจัยแสดงให้เห็นว่า เว็บไซต์ที่มีวิดีโอทำให้เกิดการมีส่วนร่วมและยอดขายที่สูงขึ้น ดังนั้นแม้ว่าคุณจะยังไม่ได้เพิ่มวิดีโอลงในเว็บไซต์ แต่อาจต้องใช้เวลานานพอสมควรก่อนที่จะทำเช่นนั้น
แน่นอนว่าไฟล์วิดีโอที่คุณเพิ่มในเว็บไซต์จะเป็นไฟล์ที่ใหญ่ที่สุดที่มีการดาวน์โหลด ด้วยเหตุนี้ สิ่งที่สำคัญอย่างยิ่งคือต้องตรวจสอบว่าไฟล์สร้างขึ้นเพื่อให้สามารถเล่นเนื้อหาสำหรับลูกค้าทุกคนได้อย่างรวดเร็วและต่อเนื่อง
แม้ว่าวิดีโอจะช่วยเพิ่มการมีส่วนร่วมและความพึงพอใจของลูกค้าได้ แต่วิดีโอที่ไม่เล่นหรือหยุดทำงานขณะเล่นก็อาจทำให้ลูกค้าไม่พอใจได้
โพสต์นี้เน้นการใช้แท็ก <video> ของ HTML5 สำหรับการแสดงวิดีโอ ดังนั้นจึงไม่ครอบคลุมสตรีมวิดีโอ
มาเริ่มกันเลยดีกว่า
แท็ก <video>
ก็คงทราบดีอยู่แล้วใช่ไหม หากต้องการเพิ่มวิดีโอ คุณต้องเพิ่มแท็ก <video> แล้วชี้ไปที่แหล่งที่มา เท่านี้คุณก็เข้าสู่การแข่งแล้ว
<video src="myVideo.mp4">
คุณพูดถูกแล้ว ที่ระดับสูงสุด เพียงเท่านี้คุณก็สามารถเพิ่มวิดีโอลงในเว็บได้ แต่คุณมีแอตทริบิวต์จำนวนมากที่คุณเพิ่มลงในแท็กวิดีโอได้เพื่อปรับปรุงการออกแบบและการนำเสนอวิดีโอ
แท็ก <source>
วิธีที่ดีที่สุดในการปรับปรุงการแสดงวิดีโอบนเว็บอาจเป็นการเพิ่มประสิทธิภาพไฟล์ที่ส่งไปยังเบราว์เซอร์ วิธีการคือใช้แท็ก <source>
<video>
<source src="myWebmVideo.webm" type="video/webm">
<source src="myh265Video.mp4" type="video/mp4">
<source src="myh264Video.mp4" type="video/mp4">
</video>
ซึ่งอ้างอิงไฟล์ต้นฉบับ 3 ไฟล์แยกกัน เบราว์เซอร์จะเริ่มต้นที่ด้านบน แล้วเลือกรูปแบบแรกและตัวแปลงรหัสที่สามารถใช้ได้ ในโลกวิดีโอ รูปแบบไฟล์ (ที่โดยทั่วไปเรียกว่าคอนเทนเนอร์) สามารถบันทึกได้ด้วยตัวแปลงรหัสที่ต่างกัน โดยแต่ละตัวมีแอตทริบิวต์ที่ต่างกัน (ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ ที่นี่) ในตัวอย่างข้างต้น ตัวเลือกแรกคือรูปแบบ WebM (ซึ่งสามารถเข้ารหัสด้วยตัวแปลงรหัส VP8 หรือ VP9) และรองรับ 78% ของผู้ใช้ทั่วโลก ตัวเลือกที่ 2 คือตัวแปลงรหัส H.265 ของ mp4 ซึ่งใช้ได้กับ iOS และ Mac รุ่นใหม่กว่า ตัวแปลงรหัสเหล่านี้ใหม่กว่าและมีการปรับปรุงการบีบอัดข้อมูล ขณะที่แสดงวิดีโอคุณภาพระดับเดียวกับวิดีโอเก่าๆ
ตัวเลือกสุดท้ายในรายการของเราคือ H.264 mp4 ซึ่งรองรับ 92% ของผู้ใช้ทั่วโลกทั้งหมด แต่เป็นรูปแบบที่เก่ากว่าจึงมักมีขนาดใหญ่กว่าวิดีโอ WebM หรือ H.265 มาก ในตัวอย่างหนึ่ง คุณจะเห็นความแตกต่างของภาพยนตร์ความยาว 2 นาที ดังนี้
| ตัวแปลงรหัส | ขนาดไฟล์ |
|---|---|
| VP8 | 5.5 MB |
| VP9 | 4.2 เมกะไบต์ |
| H.265 | 5.4 MB |
| H.264 | 16.1 MB |
การนำส่งไฟล์ที่มีขนาดเล็กกว่าเป็นการเพิ่มประสิทธิภาพที่ดีที่สุดที่คุณทำได้เพื่อแสดงวิดีโอได้ดียิ่งขึ้น เมื่อดาวน์โหลดวิดีโอขนาดเล็กลงแล้ว การเล่นวิดีโอจะเร็วขึ้นและบัฟเฟอร์วิดีโอจะเต็มเร็วขึ้น วิธีนี้ทำให้ หยุดทำงานระหว่างเล่นวิดีโอน้อยลง นอกจากนี้ การโหลดของเซิร์ฟเวอร์ก็ลดลง ซึ่งทำให้มีความต้องการพื้นที่เก็บข้อมูลเพิ่มขึ้นของไฟล์วิดีโอหลายไฟล์
แอตทริบิวต์การโหลดล่วงหน้า
วิดีโอไม่สามารถเริ่มเล่นได้จนกว่าจะมีการดาวน์โหลดและจัดเก็บวิดีโอไว้ในอุปกรณ์ เมื่อใช้แอตทริบิวต์การโหลดล่วงหน้า คุณจะควบคุมจำนวนวิดีโอที่จะดาวน์โหลดเมื่อโหลดหน้าเว็บได้ แอตทริบิวต์การโหลดล่วงหน้ามี 3 ค่า ได้แก่ auto, metadata และ none
โหลดล่วงหน้า=' อัตโนมัติ'
หากใช้ 'auto' ระบบจะดาวน์โหลดวิดีโอทั้งหมด ไม่ว่าผู้ใช้จะกดเล่นหรือไม่ก็ตาม วิธีนี้จะช่วยให้เล่นวิดีโอได้อย่างรวดเร็วเนื่องจากมีการดาวน์โหลดวิดีโอไว้ในเครื่องก่อนที่ผู้ใช้จะกดเล่น ในแง่ของการใช้ข้อมูล (และมุมมองการโหลดของเซิร์ฟเวอร์) คุณควรใช้ตัวเลือกนี้เฉพาะเมื่อมีความเป็นไปได้สูงว่าจะมีการดูวิดีโอ มิเช่นนั้นข้อมูลทั้งหมดของการดาวน์โหลดวิดีโอแบบเต็มจะสูญเปล่า
โหลดล่วงหน้า=' ข้อมูลเมตา'
นี่เป็นการตั้งค่าเริ่มต้นสำหรับการโหลดล่วงหน้าใน Chrome และ Safari เมื่อใช้ 'metadata' ระบบจะดาวน์โหลดวิดีโอ 3% แรก แม้การดำเนินการนี้จะเป็นคำเตือนแก่ 'auto' แต่การดาวน์โหลดวิดีโอเพียง 3% ก็มีต้นทุนการใช้เซิร์ฟเวอร์/ข้อมูลน้อยกว่าทั้งวิดีโอมาก ในขณะเดียวกันก็ยังเก็บข้อมูลบางส่วนของวิดีโอไว้ในเครื่องเพื่อให้วิดีโอเริ่มเล่นได้อย่างรวดเร็ว
โหลดล่วงหน้า='ไม่มี'
วิธีนี้จะประหยัดอินเทอร์เน็ตได้มากที่สุด แต่จะทำให้การเริ่มต้นวิดีโอช้าลงเมื่อกดการเล่น เนื่องจากสถานะการตั้งค่าจะทำให้วิดีโอโหลดล่วงหน้าเป็น 0 กิโลไบต์ในอุปกรณ์ นี่คือการตั้งค่าที่เหมาะสมสำหรับวิดีโอที่แสดงอยู่แต่ไม่น่าจะเล่นได้ นอกจากนี้ยังอาจใช้หากผู้ใช้เปิดใช้โหมด Lite ในเบราว์เซอร์
โปสเตอร์
คุณอาจต้องการให้ภาพโปสเตอร์แสดงเหนือหน้าต่างวิดีโอก่อนที่วิดีโอจะเริ่มเล่น
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
วิดีโอที่ไม่มีโปสเตอร์จะแสดงหน้าจอสีดำก่อนเริ่ม
วิดีโอที่มีโปสเตอร์จะดึงดูดผู้ชมได้มากกว่ามาก
การใส่รูปภาพแทนกล่องดำบนหน้าเว็บช่วยทำให้เว็บไซต์น่าสนใจและโต้ตอบได้มากขึ้น อย่างไรก็ตาม การใช้แอตทริบิวต์ poster จะเพิ่มการดาวน์โหลดรูปภาพก่อนที่วิดีโอจะเริ่มดาวน์โหลดวิดีโอ คุณจึงอาจพิจารณาหลีกเลี่ยงการเพิ่มโปสเตอร์สำหรับวิดีโอที่เล่นอัตโนมัติ (เนื่องจากการดาวน์โหลดเพิ่มเติมจะทำให้การดาวน์โหลดวิดีโอล่าช้า)
ตัวควบคุมการเล่น
การเพิ่มแอตทริบิวต์ controls จะเพิ่มตัวควบคุมการเล่น หากไม่มีสิ่งนี้ ลูกค้าของคุณ
จะไม่สามารถเริ่มหรือหยุดวิดีโอของคุณ คุณควรเพิ่มส่วนนี้สำหรับวิดีโอเพื่อให้ผู้ใช้หยุดและหยุดชั่วคราว เปลี่ยนระดับเสียง และอื่นๆ ได้ คุณอาจข้ามแอตทริบิวต์นี้สำหรับวิดีโอที่เล่นอยู่เบื้องหลังหรือวิดีโอวนซ้ำได้
ปิดเสียงอยู่
แอตทริบิวต์ muted จะทำให้การเล่นเริ่มขึ้นในสถานะปิดเสียง หากไม่ได้ให้ตัวควบคุม การควบคุมจะยังคงปิดเสียงอยู่ตลอดทั้งการเล่น หากเป็นการตั้งใจ การนำแทร็กเสียงออกจากวิดีโออาจเป็นเรื่องที่เหมาะสม ซึ่งจะช่วยลดขนาดของไฟล์วิดีโอที่กำลังนำส่งให้ลูกค้า
เช่นเดียวกับคอนเทนเนอร์และตัวแปลงรหัส การนำไฟล์เสียงออก (หรือที่เรียกกันว่า "demuxing)" ก็อยู่นอกเหนือขอบเขตของบทความนี้ ดูวิธีการได้ใน Media Manipulation CheatSheet
ห่วง
หากต้องการส่งวิดีโอที่วนซ้ำเนื้อหา (เช่น GIF แบบเคลื่อนไหว) ให้เพิ่มแอตทริบิวต์ loop เนื่องจากโดยปกติแล้วไฟล์วิดีโอจะมีขนาดเล็กกว่า GIF แบบเคลื่อนไหวมาก กลไกนี้จึงช่วยให้คุณแทนที่ GIF ด้วยไฟล์วิดีโอได้
วิดีโอที่เล่นอัตโนมัติ
หากคุณต้องการให้วิดีโอเล่นทันที (เช่น วิดีโอพื้นหลังหรือวิดีโอที่เล่นวนซ้ำเหมือน GIF แบบเคลื่อนไหว) ให้เพิ่มแอตทริบิวต์ autoplay ดังนี้
<video src="myVideo.mp4" autoplay>
อย่างไรก็ตาม หากต้องการให้วิดีโอเล่นอัตโนมัติในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ คุณต้องเพิ่มแอตทริบิวต์ muted ด้วยดังนี้
<video src="myVideo.mp4" autoplay muted>
บทสรุป
การเพิ่มวิดีโอลงในเว็บไซต์จะเป็นการเพิ่มการมีส่วนร่วมใหม่สำหรับลูกค้า แต่สิ่งสำคัญคือคุณต้องแสดงเนื้อหาอย่างถูกต้อง เพื่อให้แน่ใจว่าการเล่นวิดีโอจะเป็นไปอย่างราบรื่นและไม่มีการหยุดชะงัก การใช้แอตทริบิวต์ในตัวของแท็ก <video> จะช่วยให้คุณแสดงวิดีโอได้อย่างไร้ที่ติต่อทุกคนที่เข้าชมเว็บไซต์