ไม่ใช่แค่รูปภาพ แต่ใช้วิดีโอพื้นฐานสำหรับเว็บ

ดูวิดีโอพื้นฐาน เพิ่มการมีส่วนร่วม

หากกำลังคิดที่จะเพิ่มวิดีโอลงในเว็บไซต์ เมื่ออุปกรณ์และการเชื่อมต่อเครือข่ายเร็วขึ้นและมีประสิทธิภาพมากขึ้น คุณก็สามารถใช้เทคนิคอื่นๆ นอกเหนือจากรูปภาพได้ เช่น เพิ่มวิดีโอลงในกล่องเครื่องมือสำหรับสร้างเว็บ งานวิจัยแสดงให้เห็นว่าเว็บไซต์ที่มีวิดีโอจะทําให้การมีส่วนร่วมและยอดขายสูงขึ้น ดังนั้น แม้ว่าคุณจะยังไม่ได้เพิ่มวิดีโอลงในเว็บไซต์ แต่คุณก็อาจเพิ่มวิดีโอในเร็วๆ นี้

ไฟล์วิดีโอที่คุณเพิ่มลงในเว็บไซต์มักจะเป็นไฟล์ที่ดาวน์โหลดมากที่สุด ด้วยเหตุนี้ คุณจึงต้องตรวจสอบว่าไฟล์สร้างขึ้นเพื่อให้เล่นได้อย่างรวดเร็วและราบรื่นสำหรับลูกค้าทุกคน แม้ว่าวิดีโอจะช่วยเพิ่มการมีส่วนร่วมและความพึงพอใจของลูกค้า แต่วิดีโอที่ไม่เล่นหรือเล่นติดขัดระหว่างการเล่นอาจทำให้ลูกค้าไม่พอใจ โพสต์นี้มุ่งเน้นที่การใช้แท็ก <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> จะช่วยคุณอย่างมากในการแสดงวิดีโอที่ราบรื่นต่อทุกคนที่เข้าชมเว็บไซต์