ดูวิดีโอพื้นฐาน เพิ่มการมีส่วนร่วม
หากกำลังคิดที่จะเพิ่มวิดีโอลงในเว็บไซต์ เมื่ออุปกรณ์และการเชื่อมต่อเครือข่ายเร็วขึ้นและมีประสิทธิภาพมากขึ้น คุณก็สามารถใช้เทคนิคอื่นๆ นอกเหนือจากรูปภาพได้ เช่น เพิ่มวิดีโอลงในกล่องเครื่องมือสำหรับสร้างเว็บ การวิจัยพบว่าเว็บไซต์ที่มีวิดีโอจะทําให้การมีส่วนร่วมและยอดขายสูงขึ้น ดังนั้น แม้ว่าคุณจะยังไม่ได้เพิ่มวิดีโอลงในเว็บไซต์ แต่เราก็เชื่อว่าคุณคงเพิ่มวิดีโอในเร็วๆ นี้
ไฟล์วิดีโอที่คุณเพิ่มลงในเว็บไซต์มักจะเป็นไฟล์ที่ดาวน์โหลดมากที่สุด ด้วยเหตุนี้ คุณจึงต้องตรวจสอบว่าไฟล์สร้างขึ้นเพื่อให้เล่นได้อย่างรวดเร็วและราบรื่นสำหรับลูกค้าทุกคน
แม้ว่าวิดีโอจะช่วยเพิ่มการมีส่วนร่วมและความพึงพอใจของลูกค้า แต่วิดีโอที่ไม่เล่นหรือเล่นติดขัดระหว่างการเล่นอาจทำให้ลูกค้าไม่พอใจ
โพสต์นี้มุ่งเน้นที่การใช้แท็ก <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 MB |
| H.265 | 5.4 MB |
| H.264 | 16.1 MB |
การนำส่งไฟล์ที่มีขนาดเล็กลงเป็นการเพิ่มประสิทธิภาพที่ดีที่สุดที่คุณทำได้เพื่อแสดงวิดีโอได้ดียิ่งขึ้น เมื่อดาวน์โหลดวิดีโอที่มีขนาดเล็กลง วิดีโอจะเล่นได้เร็วขึ้นและบัฟเฟอร์วิดีโอจะเต็มเร็วขึ้น ซึ่งทำให้วิดีโอเล่นได้ราบรื่นขึ้น นอกจากนี้ ภาระของเซิร์ฟเวอร์จะลดลง ซึ่งช่วยชดเชยพื้นที่เก็บข้อมูลที่จำเป็นมากขึ้นสำหรับไฟล์วิดีโอหลายไฟล์
แอตทริบิวต์ที่โหลดล่วงหน้า
วิดีโอจะเล่นไม่ได้จนกว่าจะมีวิดีโอบางส่วนที่ดาวน์โหลดและจัดเก็บไว้ในพื้นที่ เมื่อใช้แอตทริบิวต์การโหลดล่วงหน้า คุณจะควบคุมปริมาณวิดีโอที่ดาวน์โหลดเมื่อโหลดหน้าเว็บได้ แอตทริบิวต์การโหลดล่วงหน้ามี 3 ค่า ได้แก่ auto, metadata และ none
preload='auto'
หากใช้ 'auto' ระบบจะดาวน์โหลดทั้งวิดีโอ ไม่ว่าผู้ใช้จะกดเล่นหรือไม่ก็ตาม วิธีนี้ช่วยให้เล่นวิดีโอได้อย่างรวดเร็วเนื่องจากระบบจะดาวน์โหลดวิดีโอลงในเครื่องก่อนที่ผู้ใช้จะกดเล่น จากมุมมองการใช้อินเทอร์เน็ต (และภาระของเซิร์ฟเวอร์) คุณควรใช้ตัวเลือกนี้เฉพาะในกรณีที่มีแนวโน้มสูงว่าจะมีการรับชมวิดีโอ ไม่เช่นนั้น ข้อมูลทั้งหมดของการดาวน์โหลดวิดีโอแบบเต็มจะสูญเปล่า
preload='metadata'
นี่เป็นการตั้งค่าเริ่มต้นสำหรับการโหลดล่วงหน้าใน Chrome และ Safari เมื่อใช้ 'metadata'
ระบบจะดาวน์โหลด 3% แรกของวิดีโอ แม้ว่าจะมีข้อจำกัดเช่นเดียวกับ 'auto' แต่การดาวน์โหลดเพียง 3% ของวิดีโอจะมีต้นทุนการใช้เซิร์ฟเวอร์/อินเทอร์เน็ตน้อยกว่าการดาวน์โหลดทั้งวิดีโอมาก และยังช่วยให้มั่นใจได้ว่าระบบจะจัดเก็บวิดีโอบางส่วนไว้ในเครื่องเพื่อให้วิดีโอเริ่มเล่นได้อย่างรวดเร็ว
preload='none'
วิธีนี้จะช่วยประหยัดอินเทอร์เน็ตมากที่สุด แต่จะทำให้วิดีโอเริ่มต้นช้าลงเมื่อกดเล่น เนื่องจากการตั้งค่าระบุว่าระบบจะโหลดวิดีโอ 0 KB ลงในอุปกรณ์ การตั้งค่านี้เป็นการตั้งค่าที่เหมาะสมสำหรับวิดีโอที่มีอยู่ในระบบแต่มีแนวโน้มว่าจะไม่เล่น นอกจากนี้ ระบบอาจใช้ URL นี้ด้วยหากผู้ใช้เปิดใช้โหมด Lite ในเบราว์เซอร์
โปสเตอร์
คุณอาจต้องการมีภาพโปสเตอร์ที่แสดงเหนือหน้าต่างวิดีโอก่อนที่วิดีโอจะเริ่มเล่น โดยทำดังนี้
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
วิดีโอที่ไม่มีโปสเตอร์จะแสดงหน้าจอสีดําก่อนเริ่มเล่น
วิดีโอที่มีโปสเตอร์จะดึงดูดความสนใจได้มากกว่า
การเพิ่มรูปภาพแทนกล่องสีดําในหน้าเว็บทําให้เว็บไซต์น่าสนใจและโต้ตอบกับผู้ใช้มากขึ้น อย่างไรก็ตาม การใช้แอตทริบิวต์ poster จะเพิ่มการดาวน์โหลดรูปภาพก่อนการดาวน์โหลดวิดีโอจะเริ่มขึ้น คุณจึงอาจพิจารณาหลีกเลี่ยงการเพิ่มโปสเตอร์สำหรับวิดีโอที่เล่นอัตโนมัติ (เนื่องจากการดาวน์โหลดเพิ่มเติมจะทำให้การดาวน์โหลดวิดีโอล่าช้า)
ตัวควบคุมการเล่น
การเพิ่มแอตทริบิวต์ controls จะเพิ่มตัวควบคุมการเล่น หากไม่มีปุ่มเหล่านี้ ลูกค้าจะไม่สามารถเริ่มหรือหยุดวิดีโอได้ คุณควรเพิ่มการควบคุมนี้สำหรับวิดีโอเพื่อให้ผู้ใช้หยุดและหยุดชั่วคราว เปลี่ยนระดับเสียง และอื่นๆ ได้ สำหรับวิดีโอที่เล่นอยู่เบื้องหลังหรือวิดีโอที่เล่นวนซ้ำ คุณอาจไม่ต้องใส่แอตทริบิวต์นี้
ปิดเสียงอยู่
แอตทริบิวต์ muted ทําให้การเล่นเริ่มขึ้นด้วยสถานะปิดเสียง หากไม่มีการควบคุม วิดีโอจะปิดเสียงตลอดการเล่น หากตั้งใจให้เป็นแบบนั้น คุณอาจต้องนำแทร็กเสียงออกจากวิดีโอ ซึ่งจะช่วยลดขนาดไฟล์วิดีโอที่จะส่งให้ลูกค้าได้
เช่นเดียวกับคอนเทนเนอร์และโค้ดคิว การนําไฟล์เสียงออกหรือที่เรียกว่า "การแยกข้อมูล" อยู่นอกเหนือขอบเขตของบทความนี้ด้วย ดูวิธีการได้ในชีตเคล็ดลับเกี่ยวกับการดัดแปลงสื่อ
loop
หากต้องการส่งวิดีโอที่เล่นเนื้อหาซ้ำ (เช่น GIF แบบเคลื่อนไหว) ให้เพิ่มแอตทริบิวต์ loop
เนื่องจากโดยทั่วไปไฟล์วิดีโอจะมีขนาดเล็กกว่า GIF แบบเคลื่อนไหวมาก กลไกนี้จึงช่วยให้คุณแทนที่ GIF ด้วยไฟล์วิดีโอได้
การเล่นวิดีโออัตโนมัติ
หากต้องการให้วิดีโอเล่นทันที (เช่น เป็นวิดีโอพื้นหลังหรือวิดีโอที่เล่นวนซ้ำเหมือน GIF แบบเคลื่อนไหว) ให้เพิ่มแอตทริบิวต์ autoplay ดังนี้
<video src="myVideo.mp4" playsinline autoplay>
อย่างไรก็ตาม หากต้องการให้วิดีโอเล่นอัตโนมัติในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ คุณต้องเพิ่มแอตทริบิวต์ muted ด้วย
<video src="myVideo.mp4" playsinline autoplay muted>
บทสรุป
การเพิ่มวิดีโอลงในเว็บไซต์จะช่วยเพิ่มการมีส่วนร่วมของลูกค้าไปอีกระดับ แต่คุณต้องแสดงเนื้อหาอย่างถูกต้องเพื่อให้การเล่นวิดีโอเป็นไปอย่างราบรื่นและไม่หยุดชะงัก การใช้แอตทริบิวต์ในตัวของแท็ก <video> จะช่วยคุณอย่างมากในการแสดงวิดีโอที่ราบรื่นต่อทุกคนที่เข้าชมเว็บไซต์