ดูวิดีโอพื้นฐาน เพิ่มการมีส่วนร่วม
หากกำลังคิดที่จะเพิ่มวิดีโอลงในเว็บไซต์ เมื่ออุปกรณ์และการเชื่อมต่อเครือข่ายเร็วขึ้นและมีประสิทธิภาพมากขึ้น คุณก็สามารถใช้เทคนิคอื่นๆ นอกเหนือจากรูปภาพได้ เช่น เพิ่มวิดีโอลงในกล่องเครื่องมือสำหรับสร้างเว็บ งานวิจัยแสดงให้เห็นว่าเว็บไซต์ที่มีวิดีโอจะทําให้การมีส่วนร่วมและยอดขายสูงขึ้น ดังนั้น แม้ว่าคุณจะยังไม่ได้เพิ่มวิดีโอลงในเว็บไซต์ แต่คุณก็อาจเพิ่มวิดีโอในเร็วๆ นี้
ไฟล์วิดีโอที่คุณเพิ่มลงในเว็บไซต์มักจะเป็นไฟล์ที่ดาวน์โหลดมากที่สุด ด้วยเหตุนี้ คุณจึงต้องตรวจสอบว่าไฟล์สร้างขึ้นเพื่อให้เล่นได้อย่างรวดเร็วและราบรื่นสำหรับลูกค้าทุกคน
แม้ว่าวิดีโอจะช่วยเพิ่มการมีส่วนร่วมและความพึงพอใจของลูกค้า แต่วิดีโอที่ไม่เล่นหรือเล่นติดขัดระหว่างการเล่นอาจทำให้ลูกค้าไม่พอใจ
โพสต์นี้มุ่งเน้นที่การใช้แท็ก <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
ทําให้การเล่นเริ่มขึ้นด้วยสถานะปิดเสียง หากไม่มีการควบคุม วิดีโอจะปิดเสียงตลอดการเล่น หากตั้งใจให้เป็นแบบนั้น คุณอาจต้องนำแทร็กเสียงออกจากวิดีโอ ซึ่งจะช่วยลดขนาดไฟล์วิดีโอที่จะส่งไปยังลูกค้าได้
การนำไฟล์เสียงออกหรือที่เรียกว่า "การแยกข้อมูล" อยู่นอกเหนือขอบเขตของบทความนี้เช่นเดียวกับคอนเทนเนอร์และตัวแปลงรหัส ดูวิธีการได้ในชีตเคล็ดลับเกี่ยวกับการดัดแปลงสื่อ
วนซ้ำ
หากต้องการส่งวิดีโอที่เล่นเนื้อหาซ้ำ (เช่น GIF แบบเคลื่อนไหว) ให้เพิ่มแอตทริบิวต์ loop
เนื่องจากโดยทั่วไปไฟล์วิดีโอจะมีขนาดเล็กกว่า GIF แบบเคลื่อนไหวมาก กลไกนี้จึงช่วยให้คุณแทนที่ GIF ด้วยไฟล์วิดีโอได้
การเล่นวิดีโออัตโนมัติ
หากต้องการให้วิดีโอเล่นทันที (เช่น เป็นวิดีโอพื้นหลังหรือวิดีโอที่เล่นวนซ้ำเหมือน GIF แบบเคลื่อนไหว) ให้เพิ่มแอตทริบิวต์ autoplay
ดังนี้
<video src="myVideo.mp4" playsinline autoplay>
อย่างไรก็ตาม หากต้องการให้วิดีโอเล่นอัตโนมัติในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ คุณต้องเพิ่มแอตทริบิวต์ muted
ด้วย
<video src="myVideo.mp4" playsinline autoplay muted>
บทสรุป
การเพิ่มวิดีโอลงในเว็บไซต์จะช่วยเพิ่มการมีส่วนร่วมของลูกค้าไปอีกระดับ แต่คุณต้องแสดงเนื้อหาอย่างถูกต้องเพื่อให้การเล่นวิดีโอเป็นไปอย่างราบรื่นและไม่หยุดชะงัก การใช้แอตทริบิวต์ในตัวของแท็ก <video> จะช่วยคุณอย่างมากในการแสดงวิดีโอที่ราบรื่นต่อทุกคนที่เข้าชมเว็บไซต์