การเพิ่มประสิทธิภาพวิดีโอสำหรับขนาดและคุณภาพ

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

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

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

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

ข้อมูลในโลกแห่งความเป็นจริง

ไม่ใช่เรื่องแปลกที่จะค้นหาเว็บไซต์ที่มีวิดีโอขนาดใหญ่มาก — ตัวอย่างเช่น ใช้เป็นวิดีโอพื้นหลังฮีโร่ ในการค้นคว้าของฉัน ฉันกำลังตรวจสอบไซต์ที่พบใน HTTPArchive บนมือถือในเดือนธันวาคม 2020 และไม่ยากที่จะระบุไซต์จำนวนมากที่โหลดไฟล์วิดีโอ ขนาดใหญ่ โดยค่าเริ่มต้น ทั้งบนมือถือและบนเดสก์ท็อป

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

ฟักทองเรื่องแพทช์

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

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

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

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

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

เมื่อดูที่ ส่วนหัวการตอบกลับ สำหรับไฟล์นี้ เราจะเห็นรายละเอียดบางประการ:

 accept-ranges: bytes access-control-allow-headers: x-test-header, Origin, X-Requested-With, Content-Type, Accept access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS Content-Length: 87690242 Content-Range: bytes 70025216-157715457/157715458 content-type: video/mp4 date: Fri, 22 Jan 2021 15:27:26 GMT last-modified: Mon, 24 Jun 2019 05:13:04 GMT server: Apache

ตอนนี้ ตัวเลขเหล่านี้บางส่วนทำให้ตกใจเล็กน้อยเนื่องจากมีขนาดใหญ่เล็กน้อย อันที่จริง ไฟล์มักจะมีขนาดใหญ่มากจนฉันพบว่าตัวเองชอบใส่เครื่องหมายจุลภาค ดังนั้นฉันจึงสามารถเข้าใจได้ว่าไฟล์จริง ๆ แล้วใหญ่แค่ไหน ในกรณีนี้ การดาวน์โหลดบางส่วนคือ 87 MB และไฟล์ทั้งหมดคือ 157,715,457 ไบต์ ใช่ ถูกต้อง วิดีโอนี้มีขนาด 157MB และ (พยายาม) ให้โหลดบนโทรศัพท์ของฉันก่อนหน้านี้ในวันนี้! ไม่น่าแปลกใจที่มันไม่สำเร็จ

เกิดอะไรขึ้นกับวิดีโอนี้

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

เริ่มจากเครื่องมือวินิจฉัยที่เรียกว่า FFprobe กันก่อน FFprobe รวบรวมข้อมูลจากสตรีมมัลติมีเดีย และให้รายละเอียดเกี่ยวกับวิธีการเข้ารหัสวิดีโอและวิธีเล่นวิดีโอ เป็นส่วนหนึ่งของแพ็คเกจ FFMPEG และค่อนข้างใช้งานง่าย

ดียิ่งขึ้นไปอีก: หากวิดีโอของคุณออนไลน์อยู่แล้ว มี ffprobe เวอร์ชันออนไลน์ที่เราสามารถข้ามไปได้ทันที ดังนั้น ให้ใส่ URL ลงในแบบฟอร์ม แล้วรับรายละเอียดเกี่ยวกับวิดีโอกลับ (เช่น ขนาดวิดีโอ อัตราบิต และข้อมูลเมตาอีกเล็กน้อย)

เมื่อฉันเพิ่ม MP4 URL จากฟาร์มฟักทอง เราจะเห็นปัญหาหนึ่งข้อในทันที การตอบสนอง show_format จาก ffprobe ส่งคืนข้อมูลสรุป: เห็นได้ชัดว่ามี 2 สตรีม และยาว 62 วินาที (ซึ่งฟังดูปกติมากจนไม่ทำให้เกิดความสงสัยใดๆ ขึ้น) แต่เมื่อเราได้ ขนาดและอัตราบิต เราจะเห็นทันทีว่าวิดีโอเสียตรงจุดใด

ดังที่ได้กล่าวไว้ข้างต้น อาจเป็นความคิดที่ดีที่จะทำความคุ้นเคยกับการเพิ่มเครื่องหมายจุลภาคให้กับตัวเลขจำนวนมากเหล่านี้ ตามที่ปรากฏ อันที่จริงภาพโดรนที่บินอยู่เหนือสนามคือ 157MB และมีอัตราบิต 20 MB ต่อวินาที! หมายความว่าเพื่อให้วิดีโอเล่นได้อย่างราบรื่น เครือข่ายจะต้องสามารถ สตรีมวิดีโอ ด้วยอัตราที่เร็วกว่า 20 MBPS ซึ่งเป็นสาเหตุที่ทำให้โทรศัพท์หยุดทำงาน

อัตราบิตในการเล่นที่เหมาะสมคืออะไร?

เพื่อหลีกเลี่ยงไม่ให้หยุดชะงัก เราต้อง สตรีมวิดีโอในอัตราที่เหมาะสม นั่นคือจุดที่บิตเรตมีความสำคัญ บิตเรตคือความเร็วในการเล่นของวิดีโอ เพื่อให้เบราว์เซอร์เล่นวิดีโอได้อย่างราบรื่น วิดีโอจะต้องดาวน์โหลดเร็วกว่าที่เล่น ซึ่งหมายความว่าวิดีโอจะเล่นได้อย่างราบรื่นก็ต่อเมื่อความเร็วเครือข่ายมากกว่า 20 MBPS เมื่อฉันนึกถึงความเร็วของเครือข่าย ฉันมักจะพึ่งพาโปรไฟล์การรับส่งข้อมูลของ WebPageTest:

ดังที่เราสามารถบอกได้จากภาพรวมข้างต้น วิดีโอ อาจ เล่นได้ดีบน "การเชื่อมต่อแบบเนทีฟ" และในการเชื่อมต่อ FIOS ของสายเคเบิลใยแก้วนำแสงที่เร็วเป็นพิเศษ (20 MBPS เป็นความเร็วที่ต้องการพอดี ดังนั้นหวังว่าจะไม่ต้องดาวน์โหลดอย่างอื่นอีกใน พื้นหลัง). อย่างไรก็ตาม การเชื่อมต่ออื่นๆ ทั้งหมดมีความเร็วดาวน์ลิงก์ที่ ต่ำกว่า 20 MBPS อย่างเห็นได้ชัด หากวิดีโอกำลังโหลดด้วยความเร็วเหล่านี้ โปรแกรมเล่นจะพยายามใช้วิดีโอให้เร็วกว่าที่สามารถดาวน์โหลดได้ และวิดีโอจะหยุดทำงานอย่างถาวร

อัตราบิตของวิดีโอของคุณกำหนดความเร็วเครือข่ายขั้นต่ำที่ลูกค้าของคุณสามารถใช้ได้ โดยทั่วไป อัตราบิตของวิดีโอควรอยู่ที่ประมาณ 80% ของปริมาณงานที่มีอยู่บนเครือข่าย ดังนั้นวิดีโอ 20 MBPS จึงต้องการอัตราความเร็วเครือข่าย 24 MBPS เพื่อเล่นวิดีโอได้อย่างราบรื่น ทุกคนในการเชื่อมต่อที่ช้ากว่าจะได้รับประสบการณ์ที่ค่อนข้างแย่และมีแนวโน้มที่จะไม่สามารถดูวิดีโอได้เลย โดยเฉพาะอย่างยิ่ง นี่หมายความว่าเพื่อให้เราเล่น 4G ได้อย่างราบรื่นและราบรื่นบน 4G บิตเรตต้อง ต่ำกว่า 7.2 MBPS

เราลดบิตเรตของวิดีโอนี้ได้ไหม

ใช่! มาดูการกำหนดค่าบางอย่างที่เราสามารถใช้เพื่อลดบิตเรตของวิดีโอนี้ได้ แต่ก่อนอื่น มาดูข้อมูลที่เราได้รับจาก FFprobe กันก่อน สิ่งหนึ่งที่ค่อนข้างชัดเจนคือค่า r_frame_rate ซึ่งเป็นจำนวนเฟรมต่อวินาทีในวิดีโอ มูลค่าของมันคือ 60000/1001 หมายความว่าอัตราเฟรมสำหรับวิดีโอคือ 60 เฟรมต่อวินาที อย่างไรก็ตาม อัตราเฟรมทั่วไปบนเว็บคือ 25–30 ดังนั้น สิ่งแรกที่เราทำได้คือ เข้ารหัสวิดีโอใหม่ด้วยบิตเรตที่ต่ำกว่า

สิ่งที่ควรทราบอีกประการหนึ่งคือ ปัจจัยอัตราคง ที่ ใน FFMPEG เกณฑ์มาตรฐานคุณภาพ/ขนาดหลักคือการบีบอัด Constant Rate Factor (CRF) โดยมีค่าตั้งแต่ 0 (ไม่มีการบีบอัด) ถึง 50 (การบีบอัดสูง) ค่าเริ่มต้นสำหรับ CRF ใน FFMPEG คือ 23 (หากคุณไม่ใช้พารามิเตอร์ CRF แสดงว่าวิดีโอของคุณมีค่านั้น) จากประสบการณ์ส่วนตัวของฉัน ค่านิยมตั้งแต่ 23-28 ยังคงผลิต วิดีโอคุณภาพสูง ดูดีบนเว็บ และลดขนาดไฟล์ลงอย่างมาก

มาเริ่มกันที่ 30fps และ CRF 23 กัน คำสั่ง Terminal จะมีลักษณะดังนี้:

 ffmpeg -i input.mp4 -vcodec h264 -acodec aac -crf 23 -strict -2 :v fps=fps=30 output.mp4

โว้ว! ส่งผลให้วิดีโอ 81.5 MB — ดีขึ้น 48% แล้ว แต่วิดีโอยังคงมีขนาดใหญ่มาก โดยมีบิตเรต 10 MBPS หากเราตั้งค่า CRF เป็น 28 ไฟล์จะลดลงเหลือ 35.4MB โดยมีอัตราบิต 4.5 MBPS ซึ่งมีแนวโน้มที่จะเล่นได้ดีบนการเชื่อมต่อ 4G

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

เรื่องหิวพิซซ่า

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

คืนนั้น คุณได้รับข้อความจากผู้ให้บริการเครือข่ายที่คุณใช้ข้อมูลมากกว่าที่คุณคิด (และมากกว่าที่คุณวางแผนไว้ในตอนแรกแน่นอน!) แท็กซี่สองสามคันและเว็บไซต์พิซซ่า - เว็บไซต์พิซซ่ามีราคาแพงแค่ไหนอีกครั้ง?

คุณเปิดเว็บไซต์พิซซ่าลงใน WebPageTest และตรวจสอบผ่านการเชื่อมต่อมือถือ:

วิดีโอขนาด 44 MB มันมาจากไหน? ยิ่งไปกว่านั้น เมื่อเราตรวจสอบแหล่งที่มาและน้ำตกอย่างละเอียดมากขึ้น เราจะพบว่ามีวิดีโอสองรายการจริงๆ โชคดี (หรือโชคร้าย?) ไม่สามารถดาวน์โหลดทั้งหมดได้:

สิ่งนี้ทำให้เกิดข้อกังวลและคำถามสองสามข้อ

ประการแรก เหตุใดจึงมีการดาวน์โหลดวิดีโอจำนวนมากในเมื่อไม่ได้เล่นอัตโนมัติ เรายังไม่ได้คลิกอะไรเลย แต่ใช้ข้อมูลไปแล้วเกือบ 40 MB แล้ว คำตอบอยู่ในแหล่งที่มาเช่นเคย "ดูแหล่งที่มา" นั่นคือ

 <video class="video-js vjs-big-play-centered" controls preload="auto" width="1050" height="591" poster="assets/home_poster.jpg" data-setup='{"fluid": true}'>
  <source src="assets/home_1.mp4" type='video/mp4'> <source src="assets/home.webm" type='video/webm'>
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video>

จากค้างคาว เราเห็นอย่างน้อยสองประเด็น:

• พรีโหลด = "อัตโนมัติ"
  เมื่อเราตั้งค่า preload="auto" เรากำลังแทนที่การตั้งค่าเริ่มต้นของเบราว์เซอร์ บังคับให้ดาวน์โหลดวิดีโอ ไม่ว่าลูกค้าของคุณจะกด "เล่น" หรือไม่ก็ตาม แอตทริบิวต์ preload เริ่มต้นคือ metadata และจะส่งผลให้มีการดาวน์โหลด 100KB สองสามรายการ เป็นที่ยอมรับว่าเป็นผลลัพธ์ที่ดีกว่ามากสำหรับผู้เยี่ยมชมไซต์ที่ไม่เคยดูวิดีโอนี้
• สั่งซื้อวิดีโอ
  หากคุณมีวิดีโอหลายเวอร์ชัน (ในกรณีนี้: วิดีโอที่เข้ารหัส h264 .mp4 และ VP8 .webm) เบราว์เซอร์จะเลือก วิดีโอแรก ที่รู้วิธีเล่น ตอนนี้ ทุกเบราว์เซอร์ที่ทันสมัยรองรับ mp4 ในขณะที่เบราว์เซอร์ที่ทันสมัยส่วนใหญ่ยังรองรับ webm (รองรับทั่วโลก 95.4% ตาม CanIUse)

เคล็ดลับหนึ่งที่ฉันชอบใช้คือการแทรกบรรทัดแหล่งที่มาของวิดีโอที่เหมาะสมด้วย Javascript ด้วยวิธีนี้ หากคุณเลือกที่จะไม่แสดงวิดีโอในบางหน้าจอ คุณก็มีแท็ก <video> ที่ว่างเปล่า และไม่สามารถดาวน์โหลดวิดีโอได้

window.onload = addAutoplay(); var videoLocation = document.getElementById("hero-video"); function addAutoplay() { if(window.innerWidth > 992){ videoLocation.setAttribute("autoplay",""); }; }
window.onload = addAutoplay(); var videoLocation = document.getElementById("hero-video"); function addAutoplay() { if(window.innerWidth > 992){ videoLocation.setAttribute("autoplay",""); }; }

หากตอนนี้เราเรียกใช้ ffprobe ในวิดีโอทั้งสองนี้ เราจะพบความแตกต่างที่สำคัญในขนาด:

webm มีขนาดเล็กกว่า 90% และยัง มี 0 การดู เนื่องจากทุกเบราว์เซอร์รองรับ mp4 วิดีโอทั้งสองนี้มีทั้งขนาด 640×360 และความยาว 140 วินาที การรันคำสั่ง ffmpeg จากด้านบนในไฟล์ mp4 จะทำให้วิดีโอมีขนาด 12.4 MB ดังนั้นจึงมีแนวโน้มว่านักพัฒนาซอฟต์แวร์จะปฏิบัติตามกระบวนการที่คล้ายคลึงกันในการบีบอัดและเข้ารหัสตัวแปร .webm เช่นกัน บางทีการมี preload="auto" สำหรับ 12.5 MB อาจไม่เลวร้ายนัก

วิดีโอที่สอง (คลิปเสียงพึมพำในร้านอาหาร) ถ่ายทำในรูปแบบ Full HD (1080p) แต่บีบอัดจาก 140MB เป็น 35 MB ในทำนองเดียวกัน ดังนั้น 120s ที่มี FFMPEG สามารถ ลดน้ำหนักวิดีโอ ในหน้านี้จาก 160 MB เป็น 57 MB การเปลี่ยนลำดับของ webm/mp4 จะช่วยประหยัดพื้นที่เพิ่มขึ้นอีกสองสาม MB สำหรับ 95% ของเบราว์เซอร์ที่รองรับรูปแบบนั้น

จะเป็นอย่างไรถ้าเราต้องการทำให้ดียิ่งขึ้นไปอีก บางทีอาจทำให้วิดีโอตอบสนองต่อหน้าจอขนาดต่างๆ ได้ มาทำวิดีโอที่เล็กลงกันดีกว่า — ด้วยวิดีโอที่ตอบสนอง!

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

เราสามารถสร้างสตรีมวิดีโอด้วย FFMPEG (ฉันเคยใช้ bash script แบบนี้มาก่อน) แต่สิ่งนี้ต้องการให้เราทราบขนาดและการตั้งค่าทั้งหมดที่เราต้องการใช้ (และดังที่ได้กล่าวไว้ก่อนหน้านี้ FFMPEG มีการตั้งค่ามากมาย! ).

เพื่อให้สตรีมวิดีโอง่ายขึ้น มี API (เช่น api.video และ Mux) ที่คุณอัปโหลดวิดีโอ และเครื่องมือสร้างสตรีมวิดีโอและโฮสต์วิดีโอของคุณ สำหรับการเปิดเผยอย่างเต็มรูปแบบ ฉันทำงานแบบเดิม ดังนั้นเพื่อให้ขั้นตอนการประมวลผลวิดีโอของฉันง่ายขึ้น ฉันจะใช้ api.video เพื่อแปลงรหัสและโฮสต์วิดีโอของฉัน ด้วย API การอัปโหลด ฉันสามารถอัปโหลดวิดีโอใดก็ได้ และเครื่องมือจะสร้างเวอร์ชันการสตรีมในขนาดและบิตเรตที่แตกต่างกันมากมาย (ปัจจุบันคือ 240p, 360p, 480p, 720p, 1080p และ 4K)

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

เพื่อความกระชับ เราจะทดสอบเฉพาะวิดีโอแพตช์ฟักทองเท่านั้น ฉันได้รับผลลัพธ์ที่คล้ายคลึงกันกับวิดีโอโดรน (วิดีโอพิซซ่าอื่นๆ มีเพียง 360p ดังนั้นจึงไม่มีประโยชน์อย่างมากจากขนาดที่เล็กกว่า)

หมายเหตุ : โปรดทราบว่าขณะนี้วิดีโอนี้เป็นวิดีโอ 1080p mp4 ที่ 60fps และมีน้ำหนัก 157 MB สำหรับผู้เยี่ยมชมทั้งหมด

ด้วยการเพิ่มประสิทธิภาพบางอย่าง (CRF 28 และลดอัตราเฟรมเป็น 30fps) วิดีโอจึงลดลงเหลือ 35.7 MB เมื่อใช้ DevTools เราสามารถจำลองอุปกรณ์เพื่อดูว่ามีการใช้ข้อมูลเท่าใดสำหรับการเล่นวิดีโอสตรีมมิงวิดีโอบนหน้าจอขนาดต่างๆ

ตารางด้านล่างแสดงจำนวนการรับส่งข้อมูลทั้งหมดที่ใช้ ด้วยวิดีโอ HLS มีโปรแกรมเล่น JavaScript, CSS, ฟอนต์ ฯลฯ ที่เพิ่มโอเวอร์เฮดเพิ่มเติมประมาณ 1 MB ซึ่งรวมอยู่ในยอดรวมด้านล่าง:

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

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

“

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

เอาล่ะ มันไม่โอเวอร์เฮดไปหน่อยเหรอ? เราไม่สามารถทำเช่นเดียวกัน (เร็วกว่ามาก) กับ YouTube หรือ Vimeo ใช่ไหม เราทำได้แน่นอน แต่หลังจากนั้น เราก็ไม่สามารถลบการสร้างแบรนด์หรือโฆษณาออกจากวิดีโอได้อย่างสมบูรณ์ ไม่ต้องพูดถึงโอเวอร์เฮดของสคริปต์ที่โหลดภายใน iframe ของเครื่องเล่นวิดีโอ นอกจากนี้ บางครั้งคุณอาจต้องการใช้วิดีโอเป็นวิดีโอพื้นหลังบนหน้าผลิตภัณฑ์ของคุณ และหลีกเลี่ยงการสร้างแบรนด์ภายนอกใดๆ เลย

บทสรุป

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

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

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

• การเล่นวิดีโอบนเว็บ: สถานะปัจจุบันของวิดีโอ (ตอนที่ 1)
• การเล่นวิดีโอบนเว็บ: แนวทางปฏิบัติที่ดีที่สุดในการส่งวิดีโอ (ตอนที่ 2)
• การซ่อนวิดีโอบนเว็บบนมือถือ