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

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

Doug Sillars

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

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

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

แอตทริบิวต์ที่โหลดล่วงหน้า

วิดีโอจะไม่สามารถเริ่มเล่นได้จนกว่าจะมีการดาวน์โหลดและจัดเก็บวิดีโอในเครื่อง เมื่อใช้แอตทริบิวต์การโหลดล่วงหน้า คุณจะสามารถควบคุมจำนวนวิดีโอที่ดาวน์โหลดเมื่อโหลดหน้าเว็บได้ แอตทริบิวต์การโหลดล่วงหน้ามี 3 ค่า ได้แก่ auto, metadata และ none

โหลดล่วงหน้า =' อัตโนมัติ '

หากใช้ 'auto' ระบบจะดาวน์โหลดทั้งวิดีโอ ไม่ว่าผู้ใช้จะกดเล่นหรือไม่ก็ตาม วิธีนี้ช่วยให้เล่นวิดีโอได้อย่างรวดเร็วเนื่องจากระบบจะดาวน์โหลดวิดีโอไว้ในเครื่องก่อนที่ผู้ใช้จะกดเล่น จากมุมมองการใช้อินเทอร์เน็ต (และภาระของเซิร์ฟเวอร์) คุณควรใช้ตัวเลือกนี้เฉพาะในกรณีที่มีแนวโน้มสูงว่าจะมีการรับชมวิดีโอ มิเช่นนั้น ข้อมูลทั้งหมดของการดาวน์โหลดวิดีโอแบบเต็มจะสูญเปล่า

โหลดล่วงหน้า ='metadata'

นี่เป็นการตั้งค่าเริ่มต้นสำหรับการโหลดล่วงหน้าใน Chrome และ Safari เมื่อใช้ 'metadata' ระบบจะดาวน์โหลด 3% แรกของวิดีโอ แม้ว่าวิธีนี้จะมีข้อจำกัดเช่นเดียวกับ 'auto' แต่การดาวน์โหลดเพียง 3% ของวิดีโอจะมีต้นทุนการใช้เซิร์ฟเวอร์/อินเทอร์เน็ตน้อยกว่าการดาวน์โหลดทั้งวิดีโอมาก และยังช่วยให้มั่นใจได้ว่าระบบจะจัดเก็บวิดีโอบางส่วนไว้ในเครื่องเพื่อให้วิดีโอเริ่มเล่นได้อย่างรวดเร็ว

Screenwise='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> จะช่วยคุณอย่างมากในการแสดงวิดีโอที่ราบรื่นต่อทุกคนที่เข้าชมเว็บไซต์