การเล่นวิดีโอบนเว็บ: แนวทางปฏิบัติที่ดีที่สุดในการส่งวิดีโอ (ตอนที่ 2)

ในโพสต์ที่แล้ว ฉันได้ตรวจสอบแนวโน้มของวิดีโอบนเว็บในปัจจุบัน โดยใช้ข้อมูลจาก HTTP Archive ฉันพบว่าเว็บไซต์จำนวนมากให้บริการเนื้อหาวิดีโอเดียวกันบนอุปกรณ์เคลื่อนที่ และ เดสก์ท็อป และมีการสตรีมวิดีโอจำนวนมากที่อัตราบิตที่สูงเกินไปสำหรับการเล่นบนการเชื่อมต่อความเร็ว 3G เรายังค้นพบด้วยว่าเว็บไซต์อาจดาวน์โหลดวิดีโอไปยังอุปกรณ์มือถือโดยอัตโนมัติ — สร้างความเสียหายต่อแผนข้อมูลของลูกค้า อายุการใช้งานแบตเตอรี่ สำหรับวิดีโอที่อาจไม่เคยเล่น

TL; DR : ในโพสต์นี้ เราจะพิจารณาเทคนิคต่างๆ ในการเพิ่มประสิทธิภาพความเร็วและการส่งวิดีโอให้กับลูกค้าของคุณ และจัดเตรียมรายการแนวทางปฏิบัติที่ดีที่สุด 9 ประการเพื่อช่วยให้คุณส่งมอบเนื้อหาวิดีโอของคุณ

ตัวชี้วัดการเล่นวิดีโอ

มีเมตริกการเล่นวิดีโอหลัก 3 รายการที่ใช้อยู่ในปัจจุบัน:

1. เวลาเริ่มต้นวิดีโอ
2. วิดีโอหยุดนิ่ง
3. คุณภาพวีดีโอ

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

การเริ่มต้นวิดีโอ

เมื่อผู้ใช้กดเล่นวิดีโอ พวกเขาคาดหวังว่าจะสามารถดูวิดีโอได้อย่างรวดเร็ว จากข้อมูลของ Conviva (ผู้นำด้านการวิเคราะห์เมตริกวิดีโอ) ในไตรมาสที่ 1 ของปี 2018 ระบุว่า 14% ของวิดีโอไม่เคยเริ่มเล่นเลย (นั่นคือ การเล่นวิดีโอ 2.4 พันล้านรายการ) หลังจากที่ผู้ใช้กดเล่น

2.3% ของวิดีโอ (คำขอวิดีโอ 400 ล้านรายการ) ไม่สามารถเล่นได้หลังจากที่ผู้ใช้กดปุ่มเล่น 11.54% (เล่น 2B) ถูกยกเลิกโดยผู้ใช้หลังจากกดเล่น เรามาลองแยกแยะสิ่งที่อาจเป็นสาเหตุของปัญหาเหล่านี้กัน

ความล้มเหลวในการเล่นวิดีโอ

ความล้มเหลวในการเล่นวิดีโอคิดเป็น 2.3% ของการเล่นวิดีโอทั้งหมด อะไรจะนำไปสู่สิ่งนี้ ในข้อมูล HTTP Archive เราเห็น 0.3% ของคำขอวิดีโอทั้งหมดซึ่งส่งผลให้มีการตอบสนอง HTTP 4xx หรือ 5xx ดังนั้นเปอร์เซ็นต์บางส่วนจึงล้มเหลวต่อ URL ที่ไม่ดีหรือการกำหนดค่าเซิร์ฟเวอร์ผิดพลาด ปัญหาที่อาจเกิดขึ้นอีกประการหนึ่ง (ที่ไม่ได้พบเห็นในข้อมูล HTTP Archive) คือวิดีโอที่ถูกบล็อกโดย Geolocation (บล็อกตามตำแหน่งของผู้ชมและใบอนุญาตของผู้ให้บริการในการแสดงวิดีโอในภาษานั้น)

การละทิ้งการเล่นวิดีโอ

รายงาน Conviva ระบุว่า 11.5% ของการเล่นวิดีโอทั้งหมด จะ เล่น แต่ลูกค้ายกเลิกการเล่นก่อนที่วิดีโอจะเริ่มเล่น ปัญหาคือวิดีโอไม่ได้ส่งถึงลูกค้าเร็วพอและพวกเขาก็ยอมแพ้ มีการศึกษาจำนวนมากเกี่ยวกับเว็บบนอุปกรณ์เคลื่อนที่ซึ่งความล่าช้าเป็นเวลานานทำให้เกิดการละทิ้งหน้าเว็บ และดูเหมือนว่าผลกระทบเดียวกันนี้จะเกิดขึ้นกับการเล่นวิดีโอด้วยเช่นกัน

การวิจัยจาก Akamai แสดงให้เห็นว่าผู้ชมจะรอ 2 วินาที แต่ในแต่ละวินาทีต่อมา ผู้ชม 5.8% จะละทิ้งวิดีโอ

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

MP4: โหลดวิดีโอล่วงหน้า

เพื่อให้แน่ใจว่าสามารถเล่นบนเว็บได้อย่างรวดเร็ว ทางเลือกหนึ่งคือการโหลดวิดีโอล่วงหน้าบนอุปกรณ์ล่วงหน้า ด้วยวิธีนี้ เมื่อลูกค้าของคุณคลิก 'เล่น' วิดีโอจะถูกดาวน์โหลดไปแล้ว และการเล่นจะรวดเร็ว HTML เสนอแอตทริบิวต์โหลดล่วงหน้าด้วย 3 ตัวเลือกที่เป็นไปได้: auto , metadata และ none

preload = auto

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

อย่างไรก็ตาม ควรใช้ preload="auto" ก็ต่อเมื่อมีโอกาสสูงที่จะดูวิดีโอเท่านั้น หากวิดีโอแสดงอยู่บนหน้าเว็บของคุณ และดาวน์โหลดทุกครั้ง จะเป็นการเพิ่มโทษด้านข้อมูลจำนวนมากแก่ผู้ใช้มือถือของคุณ รวมทั้งเพิ่มค่าใช้จ่ายเซิร์ฟเวอร์/CDN สำหรับการส่งวิดีโอทั้งหมดไปยังผู้ใช้ทั้งหมดของคุณ

เว็บไซต์นี้มีส่วนชื่อ “คลังวิดีโอ” พร้อมวิดีโอหลายรายการ แต่ละวิดีโอในส่วนนี้มีการตั้งค่าการโหลดล่วงหน้าเป็น auto และเราสามารถมองเห็นการดาวน์โหลดของพวกเขาในน้ำตก WebPageTest เป็นเส้นแนวนอนสีเขียว:

มีส่วนที่เรียกว่า “แกลเลอรีวิดีโอ” และไฟล์สำหรับส่วนเล็ก ๆ ของเว็บไซต์นี้คิดเป็น 14.6 ล้าน (83%) ของการดาวน์โหลดหน้าเว็บ โอกาสที่วิดีโอหนึ่งรายการ (จากหลายๆ รายการ) จะถูกเล่นนั้นค่อนข้างต่ำ ดังนั้นการใช้ preload="auto" จะสร้างปริมาณข้อมูลจำนวนมากสำหรับไซต์เท่านั้น

ในกรณีนี้ ไม่น่าเป็นไปได้ที่แม้แต่หนึ่งในวิดีโอเหล่านี้จะถูกดู แต่ทั้งหมดถูกดาวน์โหลดอย่างสมบูรณ์ เพิ่มเนื้อหา 14.8MB ลงในไซต์มือถือ (83% ของเนื้อหาบนหน้า) สำหรับวิดีโอที่มีโอกาสเล่นสูง (บางที >90% ของการดูหน้าเว็บส่งผลให้มีการเล่นวิดีโอ) การโหลดวิดีโอไว้ล่วงหน้าเป็นความคิดที่ดีมาก แต่สำหรับวิดีโอที่ไม่น่าจะเล่นได้ preload="auto" จะทำให้เนื้อหาจำนวนมากขึ้นผ่านเซิร์ฟเวอร์ของคุณและไปยังอุปกรณ์เคลื่อนที่ (และเดสก์ท็อป) ของลูกค้าของคุณเท่านั้น

preload="metadata"

เมื่อใช้แอตทริบิวต์ preload="metadata" ส่วนเริ่มต้นของวิดีโอจะถูกดาวน์โหลด ซึ่งช่วยให้โปรแกรมเล่นทราบขนาดของหน้าต่างวิดีโอ และอาจมีการดาวน์โหลดวิดีโอหนึ่งหรือ 2 รายการเพื่อเล่นทันที เบราว์เซอร์เพียงแค่สร้าง 206 (คำขอบางส่วน) ของเนื้อหาวิดีโอ การจัดเก็บข้อมูลวิดีโอบนอุปกรณ์เพียงเล็กน้อย เวลาเริ่มต้นวิดีโอจะลดลง โดยไม่ส่งผลกระทบอย่างมากต่อปริมาณข้อมูลที่ถ่ายโอน

ใน Chrome ข้อมูลเมตาจะเป็นตัวเลือกเริ่มต้นหากไม่มีการเลือกแอตทริบิวต์

หมายเหตุ : การดำเนินการนี้ยังสามารถนำไปสู่การดาวน์โหลดวิดีโอจำนวนมากได้ หากวิดีโอมีขนาดใหญ่

ตัวอย่างเช่น บนเว็บไซต์มือถือที่มีชุดวิดีโอที่ preload="metadata" เราเห็นคำขอวิดีโอเพียงรายการเดียว:

และคำขอเป็นการดาวน์โหลดบางส่วน แต่ยังคงส่งผลให้ต้องดาวน์โหลดวิดีโอ 2.7 MB เนื่องจากวิดีโอแบบเต็มคือ 1080p ยาว 150 และ 97 MB (เราจะพูดถึงการปรับขนาดวิดีโอให้เหมาะสมในหัวข้อถัดไป)

ดังนั้น ฉันขอแนะนำให้ใช้ preload="metadata" ต่อเมื่อมีความเป็นไปได้ค่อนข้างสูงที่ผู้ใช้ของคุณจะดูวิดีโอ หรือหากวิดีโอมีขนาดเล็ก

preload="none"

ตัวเลือกการดาวน์โหลดที่ประหยัดที่สุดสำหรับวิดีโอ เนื่องจากไม่มีการดาวน์โหลดไฟล์วิดีโอเมื่อโหลดหน้าเว็บ การทำเช่นนี้อาจเพิ่มความล่าช้าในการเล่น แต่จะส่งผลให้โหลดหน้าแรกเร็วขึ้น สำหรับไซต์ที่มีวิดีโอจำนวนมากในหน้าเดียว การเพิ่มโปสเตอร์ลงในหน้าต่างวิดีโออาจสมเหตุสมผล และไม่ดาวน์โหลดวิดีโอใดๆ จนกว่าจะถึง ผู้ใช้ปลายทางร้องขอโดยชัดแจ้ง วิดีโอ YouTube ทั้งหมดที่ฝังไว้บนเว็บไซต์จะไม่ดาวน์โหลดเนื้อหาวิดีโอใดๆ จนกว่าจะกดปุ่มเล่น โดยพื้นฐานแล้วจะทำงานเหมือนกับว่า preload="none"

แนวทางปฏิบัติ ที่ดีที่สุดสำหรับการโหลดล่วงหน้า : ใช้เฉพาะ preload="auto" หากมีความเป็นไปได้สูงที่วิดีโอจะได้รับการรับชม โดยทั่วไป การใช้ preload="metadata" ทำให้เกิดความสมดุลระหว่างการใช้ข้อมูลกับเวลาเริ่มต้น แต่ควรตรวจสอบการใช้ข้อมูลมากเกินไป

เคล็ดลับการเล่นวิดีโอ MP4

เมื่อวิดีโอได้เริ่มต้นขึ้นแล้ว เราจะแน่ใจได้อย่างไรว่าการเล่นวิดีโอสามารถปรับให้เหมาะสมเพื่อไม่ให้หยุดเล่นและเล่นต่อได้ เคล็ดลับคือต้องแน่ใจว่าวิดีโอมีขนาดเล็กที่สุด

มาดูเทคนิคบางอย่างเพื่อเพิ่มประสิทธิภาพขนาดของการดาวน์โหลดวิดีโอกัน วิดีโอมีหลายมิติที่สามารถปรับให้เหมาะสมเพื่อลดขนาดของวิดีโอได้:

เครื่องเสียง

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

หากวิดีโอของคุณเล่นในลักษณะที่เงียบ (เช่น GIF แบบวนซ้ำหรือวิดีโอพื้นหลัง) การลบสตรีมเสียงออกจากวิดีโอเป็นวิธีที่ง่ายและรวดเร็วในการลดขนาดไฟล์ ในตัวอย่างหนึ่งของวิดีโอพื้นหลัง ไฟล์เต็มคือ 5.3 MB แต่แทร็กเสียง (ซึ่งไม่เคยได้ยิน) เกือบ 300 KB (5% ของไฟล์) โดยการกำจัดเสียงอย่างง่าย ไฟล์จะถูกจัดส่งอย่างรวดเร็วโดยไม่เสียเปล่า ไบต์

42% ของไฟล์ MP4 ที่พบใน HTTP Archive ไม่มีสตรีมเสียง

แนวทางปฏิบัติ ที่ดีที่สุด : ลบแทร็กเสียงออกจากวิดีโอที่เล่นอย่างเงียบ ๆ

การเข้ารหัสวิดีโอ

เมื่อเข้ารหัสวิดีโอ จะมีตัวเลือกในการลดคุณภาพวิดีโอ (จำนวนพิกเซลต่อเฟรม หรือเฟรมต่อวินาที) การลดวิดีโอคุณภาพสูงให้เหมาะสมกับเว็บนั้นทำได้ง่าย และโดยทั่วไปจะไม่ส่งผลต่อคุณภาพที่ส่งไปยังผู้ใช้ปลายทางของคุณ บทความนี้ไม่นานพอสำหรับการอภิปรายเชิงลึกเกี่ยวกับเทคนิคการบีบอัดต่างๆ ทั้งหมดที่มีสำหรับวิดีโอ ในตัวเข้ารหัส x264 และ x265 มีคำที่เรียกว่า C onstant R ate F actor (CRF) โดยทั่วไปแล้ว การใช้ CRF ที่ 23-28 จะทำให้การบีบอัด/การแลกเปลี่ยนคุณภาพที่ดีและเป็นการเริ่มต้นที่ดีในขอบเขตของการบีบอัดวิดีโอ

ขนาดวิดีโอ

ขนาดวิดีโออาจได้รับผลกระทบจากขนาดต่างๆ เช่น ความยาว ความกว้าง และความสูง (คุณอาจรวมเสียงไว้ที่นี่ด้วยก็ได้)

ระยะเวลาของวิดีโอ

ความยาวของวิดีโอโดยทั่วไปไม่ใช่คุณลักษณะที่นักพัฒนาเว็บสามารถปรับได้ หากวิดีโอจะเล่นเป็นเวลาสามนาที วิดีโอจะเล่นเป็นเวลาสามนาที ในกรณีที่วิดีโอมีความยาวเป็นพิเศษ เครื่องมืออย่าง preload="none" หรือการสตรีมวิดีโอสามารถอนุญาตให้ดาวน์โหลดข้อมูลจำนวนน้อยลงในขั้นต้นเพื่อลดเวลาในการโหลดหน้าเว็บ

ขนาดวิดีโอ

18% ของวิดีโอทั้งหมดที่พบใน HTTP Archive จะเหมือนกันทั้งบนมือถือและเดสก์ท็อป ผู้ที่เคยทำงานกับการออกแบบเว็บแบบตอบสนองจะทราบดีว่าการเพิ่มประสิทธิภาพรูปภาพสำหรับวิวพอร์ตต่างๆ สามารถลดเวลาในการโหลดลงได้อย่างมาก เนื่องจากขนาดของรูปภาพจะเล็กกว่ามากสำหรับหน้าจอขนาดเล็ก

เช่นเดียวกับวิดีโอ เว็บไซต์ที่มีวิดีโอพื้นหลังขนาด 30 MB 2560×1226 จะมีปัญหาในการดาวน์โหลดวิดีโอบนมือถือ (อาจบนเดสก์ท็อปด้วย!) การปรับขนาดวิดีโอจะลดขนาดไฟล์ลงอย่างมาก และอาจอนุญาตให้แสดงวิดีโอพื้นหลังที่แตกต่างกันสามหรือสี่รายการ:

น่าเสียดายที่เบราว์เซอร์ไม่รองรับการสืบค้นสื่อสำหรับวิดีโอใน HTML ซึ่งหมายความว่าวิธีนี้ใช้ไม่ได้:

 <video preload="auto" autoplay muted controls source src="large.mp4" </video>

ดังนั้น เราจะต้องสร้าง JS wrapper ขนาดเล็กเพื่อส่งวิดีโอที่เราต้องการไปยังขนาดหน้าจอต่างๆ แต่ก่อนที่เราจะไปที่นั่น…

กำลังดาวน์โหลดวิดีโอ แต่ซ่อนไว้ไม่ให้มองเห็น

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

วิดีโอคุณภาพเรตินา

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

การดาวน์โหลดวิดีโอประเภทต่างๆ ตามขนาดอุปกรณ์และคุณภาพเครือข่าย

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

• ไม่ส่งวิดีโอบนหน้าจอที่ต่ำกว่า 500px;
• ส่งวิดีโอขนาดเล็กสำหรับหน้าจอ 500-1400;
• ส่งวิดีโอขนาดใหญ่ขึ้นไปยังอุปกรณ์อื่นๆ ทั้งหมด

 <html><body> <div> </div> <div></div> <script> //get screen width and pixel ratio var width = screen.width; var dpr = window.devicePixelRatio; //initialise 2 videos — //“small” is 960 pixels wide (2.6 MB), large is 1920 pixels wide (10 MB) var smallVideo="https://res.cloudinary.com/dougsillars/video/upload/w_960/v1534228645/30s4kbbb_oblsgc.mp4"; var bigVideo = "https://res.cloudinary.com/dougsillars/video/upload/w_1920/v1534228645/30s4kbbb_oblsgc.mp4"; //TODO add logic on adding retina videos if (width<500){ console.log("this is a very small screen, no video will be requested"); } else if (width< 1400){ console.log("let's call this mobile sized"); var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +smallVideo +"\"/\>"; console.log(videoTag); document.getElementById('video').innerHTML = videoTag; document.getElementById('text').innerHTML = "This is a small video."; } else{ var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +bigVideo +"\"/\>"; document.getElementById('video').innerHTML = videoTag; document.getElementById('text').innerHTML = "This is a big video."; } </script> </html></body>

สคริปต์นี้แบ่งหน้าจอของผู้ใช้ออกเป็นสามตัวเลือก:

1. ต่ำกว่า 500 พิกเซล จะไม่มีวิดีโอแสดง
2. ระหว่าง 500 ถึง 1400 เรามีวิดีโอขนาดเล็กกว่า
3. สำหรับหน้าจอกว้างมากกว่า 1,400 พิกเซล เรามีวิดีโอที่ใหญ่ขึ้น

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

GIF เคลื่อนไหว

GIF แบบเคลื่อนไหวเป็นไฟล์ขนาดใหญ่ แม้ว่าทั้ง aGIF และไฟล์วิดีโอจะบีบอัดข้อมูลผ่านขนาดความกว้างและความสูง เฉพาะไฟล์วิดีโอเท่านั้นที่มีการบีบอัด (บนแกนเวลาที่มีขนาดใหญ่กว่า) aGIF นั้น "พลิกผ่าน" รูปภาพ GIF แบบคงที่อย่างรวดเร็ว การขาดการบีบอัดนี้จะเพิ่มข้อมูลจำนวนมาก โชคดีที่สามารถแทนที่ aGIF ด้วยวิดีโอแบบวนซ้ำ ซึ่งอาจบันทึกข้อมูลได้เป็น MB สำหรับแต่ละคำขอ

 <video loop autoplay muted playsinline src="pseudoGif.mp4">

ใน Safari มีแนวทางที่ดีกว่านี้: คุณสามารถวาง mp4 แบบวนซ้ำในแท็กรูปภาพได้ดังนี้:

 <picture> <source type="video/mp4" loop autoplay> <source type="image/webp"> <src="animated.gif"> </picture>

ในกรณีนี้ Safari จะเล่น GIF แบบเคลื่อนไหว ในขณะที่ Chrome (และเบราว์เซอร์อื่นๆ ที่รองรับ WebP) จะเล่น WebP แบบเคลื่อนไหว โดยจะใช้ทางเลือกแทน GIF แบบเคลื่อนไหว คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิธีการนี้ได้ในโพสต์ที่ยอดเยี่ยมของ Colin Bendell

วิดีโอของบุคคลที่สาม

วิธีที่ง่ายที่สุดในการเพิ่มวิดีโอลงในเว็บไซต์ของคุณคือการคัดลอก/วางโค้ดจากบริการแบ่งปันวิดีโอและวางไว้บนไซต์ของคุณ อย่างไรก็ตาม เช่นเดียวกับการเพิ่มบุคคลที่สามในไซต์ของคุณ คุณต้องระมัดระวังเกี่ยวกับประเภทของเนื้อหาที่เพิ่มลงในหน้าเว็บของคุณ และจะส่งผลต่อการโหลดหน้าเว็บอย่างไร "เพียงแค่วางสิ่งนี้ลงในวิดเจ็ต HTML ของคุณ" เหล่านี้เพิ่ม 100 KB ของ JavaScript คนอื่นจะดาวน์โหลดหนังทั้งเรื่อง (think preload="auto" ) และบางคนจะทำทั้งสองอย่าง

แนวทางปฏิบัติที่ดีที่สุดสำหรับวิดีโอของบุคคลที่สาม : เชื่อถือแต่ยืนยัน ตรวจสอบจำนวนเนื้อหาที่เพิ่มเข้ามา และผลกระทบต่อเวลาในการโหลดหน้าเว็บของคุณ นอกจากนี้ พฤติกรรมอาจเปลี่ยนแปลง ดังนั้นให้ติดตามด้วยการวิเคราะห์ของคุณอย่างสม่ำเสมอ

การเริ่มต้นสตรีมมิ่ง

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

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

ในการตรวจสอบ 1,065 ไฟล์ Manifest ที่ส่งไปยังอุปกรณ์มือถือจาก HTTP Archive เราพบว่า 59% ของวิดีโอมีบิตเรตเริ่มต้นต่ำกว่า 1.2 MBPS และมีแนวโน้มที่จะเริ่มสตรีมโดยไม่ล่าช้ามากที่อัตราข้อมูล 3G 1.6 MBPS 11% ใช้บิตเรตระหว่าง 1.2 ถึง 1.6 MBPS ซึ่งอาจทำให้การเริ่มต้นระบบ 3G ช้าลง และ 30% มีอัตราบิตที่สูงกว่า 1.6 MBPS และไม่สามารถเล่นที่บิตเรตนี้ในการเชื่อมต่อ 3G จากข้อมูลนี้ ดูเหมือนว่า ~41% ของวิดีโอทั้งหมดจะไม่สามารถรักษาบิตเรตเริ่มต้นบนมือถือได้ — เพิ่มความล่าช้าในการเริ่มต้น และอาจเพิ่มจำนวนการหยุดชะงักระหว่างการเล่น

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

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

เราสามารถเห็นภาพนี้โดยการสร้างรายการวิดีโอที่มีบิตเรตเริ่มต้นที่แตกต่างกัน เราทดสอบ 3 สถานการณ์ที่แตกต่างกัน: เริ่มต้นด้วยต่ำสุด (215 KBPS), กลาง (600 KBPS) และบิตเรตสูงสุด (2.6 MBPS)

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

เมื่อเริ่มต้นด้วยบิตเรตสูงสุด (ทดสอบกับการเชื่อมต่อ 3G ที่ 1.6 MBPS) โปรแกรมเล่นจะทราบได้อย่างรวดเร็วว่าไม่สามารถเล่นได้ และเปลี่ยนเป็นวิดีโอบิตเรตต่ำสุด (215 KBPS) วิดีโอเริ่มเล่นที่ 17 วินาที มีการหน่วงเวลา 6 วินาที และคุณภาพของวิดีโอก็มีคุณภาพต่ำเหมือนกันในการทดสอบครั้งแรก

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการเริ่มเล่นวิดีโอ : เพื่อการเล่นที่รวดเร็วที่สุด ให้เริ่มด้วยการสตรีมคุณภาพต่ำที่สุด สำหรับวิดีโอที่ยาวขึ้น คุณอาจลองใช้สตรีม 'คุณภาพปานกลาง' ในตอนเริ่มต้นเพื่อนำเสนอวิดีโอที่คมชัดเมื่อเริ่มต้นใช้งาน (ด้วยความล่าช้าที่นานขึ้นเล็กน้อย)

ผลการทดสอบ WebPageTest: สตรีมวิดีโอเริ่มต้นต่ำ กลาง และสูง (จากบนลงล่าง) วิดีโอเริ่มต้นเร็วที่สุดด้วยวิดีโอคุณภาพต่ำสุด สิ่งสำคัญคือต้องสังเกตว่าวิดีโอเริ่มต้นคุณภาพสูงที่อายุ 17 ปีมีคุณภาพเท่ากับวิดีโอเริ่มต้นคุณภาพต่ำที่ 11 วินาที

สตรีมมิ่ง: เล่นต่อ

เมื่อโปรแกรมเล่นวิดีโอสามารถกำหนดสตรีมวิดีโอที่เหมาะสมที่สุดสำหรับการเล่นและสตรีมนั้นต่ำกว่าความเร็วเครือข่ายที่มี วิดีโอจะเล่นโดยไม่มีปัญหาใดๆ มีเคล็ดลับที่ช่วยให้มั่นใจได้ว่าวิดีโอจะแสดงในลักษณะที่เหมาะสมที่สุด หากเราตรวจสอบรายการต่อไปนี้:

 #EXT-X-STREAM-INF:BANDWIDTH=912912,PROGRAM-ID=1,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=640x360,SUBTITLES="subs" video/600k.m3u8

สายข้อมูลรายงานว่าสตรีมนี้มีบิตเรต 913 KBPS และความละเอียด 640×360 หากเราดู URL ที่บรรทัดนี้ชี้ไป เราจะเห็นว่า URL นั้นอ้างอิงถึงวิดีโอ 6 แสนรายการ การตรวจสอบไฟล์วิดีโอแสดงให้เห็นว่าวิดีโอมีขนาด 600 KBPS และรายการแสดงบิตเรตเกินจริง

พูดเกินจริงบิตเรตของวิดีโอ

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

สำหรับผู้ใช้ที่มีการเชื่อมต่อ 1.6 MBPS ผู้เล่นจะเลือกบิตเรต 913 KBPS ซึ่งให้บริการลูกค้าวิดีโอ 600 KBPS อย่างไรก็ตาม หากรายงานบิตเรตอย่างถูกต้อง บิตเรต 950 KBPS จะถูกใช้ และน่าจะสตรีมได้โดยไม่มีปัญหา แม้ว่าตัวเลือกที่นี่จะช่วยป้องกันแผงขายของ แต่ก็ลดคุณภาพของวิดีโอที่ส่งไปยังผู้บริโภคด้วย

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

ทดสอบวิดีโอ Neilsen ในเบราว์เซอร์ และดูว่าคุณสามารถข้ามไปมาได้หรือไม่

บทสรุป

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

1. preload="auto"
   ใช้เฉพาะในกรณีที่มีโอกาสสูงที่ลูกค้าของคุณจะดูวิดีโอนี้
2. preload="metadata"
   เป็นค่าเริ่มต้นใน Chrome แต่ยังคงนำไปสู่การดาวน์โหลดไฟล์วิดีโอขนาดใหญ่ได้ ใช้ด้วยความระมัดระวัง
3. วิดีโอเงียบ ( GIF แบบวนซ้ำหรือวิดีโอพื้นหลัง)
   ถอดช่องสัญญาณเสียงออก
4. ขนาดวิดีโอ
   พิจารณาส่งวิดีโอที่มีขนาดต่างกันไปยังอุปกรณ์เคลื่อนที่ผ่านเดสก์ท็อป วิดีโอจะเล็กลง ดาวน์โหลดเร็วขึ้น และผู้ใช้ของคุณไม่น่าจะเห็นความแตกต่าง (โหลดเซิร์ฟเวอร์ของคุณจะลดลงด้วย!)
5. การบีบอัดวิดีโอ
   อย่าลืมบีบอัดวิดีโอเพื่อให้แน่ใจว่าส่งแล้ว
6. อย่า 'ซ่อน' วิดีโอ
   หากวิดีโอไม่แสดง — อย่าดาวน์โหลด
7. ตรวจสอบวิดีโอของบุคคลที่สามของคุณเป็นประจำ
8. สตรีมมิ่ง
   เริ่มต้นด้วยการสตรีมคุณภาพต่ำเพื่อให้แน่ใจว่าการเริ่มต้นอย่างรวดเร็ว (สำหรับวิดีโอที่เล่นนานขึ้น ให้พิจารณาบิตเรตปานกลางเพื่อคุณภาพที่ดีขึ้นเมื่อเริ่มต้น)
9. สตรีมมิ่ง
   เป็นเรื่องปกติที่จะระมัดระวังในบิตเรตเพื่อป้องกันการหยุดชะงัก แต่ให้ไกลเกินไป และสตรีมจะให้วิดีโอที่มีคุณภาพต่ำกว่า

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