การเพิ่มสื่อลงในหน้าเว็บทำได้หลายวิธี ก่อนหน้านี้คุณได้เรียนรู้วิธีใช้แท็ก <video> มาตรฐาน บทความนี้จะอธิบายเฟรมเวิร์ก (หรือไลบรารี) สื่อบางส่วนที่ใช้ขยายหรือแทนที่ลักษณะการทํางานของโปรแกรมเล่นวิดีโอ HTML5 เริ่มต้น
เฟรมเวิร์กสื่อมีทั้งแบบที่เป็นกรรมสิทธิ์และแบบโอเพนซอร์ส โดยหัวใจหลักคือชุด API ที่รองรับการเล่นเสียงและ/หรือวิดีโอสำหรับรูปแบบคอนเทนเนอร์และโปรโตคอลการส่งข้อมูลต่างๆ เฟรมเวิร์กที่ดีจะมีสถาปัตยกรรมแบบโมดูลและมีเอกสารประกอบที่ชัดเจนและละเอียด การตั้งค่าและใช้งานควรทำได้ง่าย คุณอาจสงสัยว่า "หากโปรแกรมเล่นวิดีโอ HTML5 มีฟีเจอร์ส่วนใหญ่อยู่แล้ว ทำไมฉันจึงต้องใช้เฟรมเวิร์กหรือไลบรารี" นี่เป็นคำถามที่ดีมาก มาดูรายละเอียดกันเลย
ประโยชน์ของการใช้เฟรมเวิร์ก
ในกรณีส่วนใหญ่ที่นอกเหนือจากความต้องการพื้นฐานของหน้าเว็บ คุณจะต้องการใช้เฟรมเวิร์กสื่อเพื่อแสดงเนื้อหา เว้นแต่คุณจะพร้อมที่จะพัฒนาและดูแลรักษาชุดฟีเจอร์ที่หลากหลาย เช่น การเล่นแบบออฟไลน์ สตรีมมิง ข้อมูลวิเคราะห์ ภาพซ้อนภาพ ภาพขนาดย่อของตัวอย่างเพลง การวางฝัง และการสร้างรายได้ เช่น การเพิ่มประสิทธิภาพอัตราการส่งโฆษณา การกำหนดเวลาโฆษณา หรือการเสนอราคาส่วนหัว เป็นต้น คุณอาจต้องมอบความซับซ้อนนี้ให้กับโซลูชันที่มีอยู่
ตรงนี้เองที่เฟรมเวิร์กสื่อเข้ามามีบทบาท เฟรมเวิร์กจะมอบชุดฟีเจอร์และเงื่อนไขที่คุณสามารถใช้ฟีเจอร์เหล่านั้นได้ จากนั้นคุณจะต้องตัดสินใจว่าเฟรมเวิร์กใดเหมาะกับโปรเจ็กต์ของคุณ ในบทความถัดไป เราจะพูดถึงวิธีที่เราสร้าง PWA ที่มีการสตรีมแบบออฟไลน์ซึ่งใช้ฟีเจอร์ที่ซับซ้อนหลายรายการ เราขอบอกก่อนว่างานนี้ต้องใช้ความพยายามอย่างมากและยังห่างไกลจากโซลูชันที่พร้อมใช้งานจริง ประหยัดเวลาและไม่ต้องปวดหัวด้วยการใช้เฟรมเวิร์ก
ตัวเลือกมีมากมายให้เลือก แต่บทความนี้จะมุ่งเน้นไปที่ 3 ตัวเลือก ได้แก่ Shaka Player, JW Player และ Video.js
Shaka Player
เอกสารระบุว่า Shaka Player ของ Google เป็นไลบรารี JavaScript แบบโอเพนซอร์สสําหรับสื่อแบบปรับเปลี่ยน โดยสามารถเล่นรูปแบบสื่อแบบปรับเปลี่ยนได้ (เช่น DASH และ HLS) ในเบราว์เซอร์โดยไม่ต้องใช้ปลั๊กอิน แต่จะใช้มาตรฐานเว็บแบบเปิดอย่างMediaSource Extensions และEncrypted Media Extensions แทน
นอกจากนี้ Shaka Player ยังรองรับการจัดเก็บและการเล่นสื่อแบบออฟไลน์โดยใช้ IndexedDB ด้วย เนื้อหาจัดเก็บไว้ในเบราว์เซอร์ใดก็ได้ พื้นที่เก็บใบอนุญาตจะขึ้นอยู่กับการรองรับของเบราว์เซอร์
ดูวิธีการการใช้งานขั้นพื้นฐานได้ในเว็บไซต์เอกสารประกอบของ Shaka Player อย่างไรก็ตาม สรุปสั้นๆ ก็คือ หากต้องการใช้ Shaka Player คุณต้องสร้างหน้า HTML ที่มีองค์ประกอบวิดีโอหรือเสียงก่อน จากนั้นใน JavaScript ของแอปพลิเคชัน ให้ติดตั้ง polyfill และตรวจสอบการรองรับของเบราว์เซอร์ เมื่อเบราว์เซอร์ยืนยันการรองรับ Shaka Player แล้ว สคริปต์จะสร้างออบเจ็กต์ Player เพื่อรวมองค์ประกอบสื่อ ตรวจหาข้อผิดพลาด แล้วโหลดไฟล์ Manifest Shaka Player จะรับช่วงต่อจากตรงนั้น
เมื่อใช้ Shaka คุณจะต้องโฮสต์และเข้ารหัสไฟล์สื่อด้วยตนเอง การสร้างเซิร์ฟเวอร์สื่อนั้นไม่ซับซ้อนมากนัก แต่การโค้ด/แปลงสื่ออาจใช้เวลานานและซับซ้อน คุณอาจต้องส่งผ่านส่วนนี้ไปยังบริการ เช่น Zencoder, Amazon Elastic Encoder หรือ Google Transcoder API เพื่อทำงานซ้ำๆ แบบอัตโนมัติและเร่งกระบวนการให้เร็วขึ้น
สิ่งที่ยอดเยี่ยมเกี่ยวกับ Shaka Player คือมีเครื่องมือและ SDK การจัดแพ็กเกจสื่อที่ยอดเยี่ยมมากสำหรับการจัดแพ็กเกจและการเข้ารหัส DASH และ HLS ที่เรียกว่า Shaka Packager ซึ่งสามารถเตรียมและแพ็กเกจเนื้อหาสื่อสำหรับการสตรีมออนไลน์ ดังที่ได้ทราบก่อนหน้านี้ในหัวข้อการเปลี่ยนรูปแบบสื่อและการเข้ารหัสสื่อ
JW Player
หากกำลังมองหาตัวเลือกที่มีบริการโฮสติ้งและการเข้ารหัส/การเปลี่ยนรูปแบบ คุณอาจต้องพิจารณา JW Player แต่โปรดทราบว่า JW Player เป็นซอฟต์แวร์ที่เป็นกรรมสิทธิ์ ซึ่งหมายความว่าคุณไม่สามารถควบคุมแพลตฟอร์มหรือแผนพัฒนาได้ โดยจะมีเวอร์ชันพื้นฐานแบบไม่มีค่าใช้จ่ายที่วิดีโอจะแสดงพร้อมกับลายน้ำ และเวอร์ชันเชิงพาณิชย์
JW Player รองรับสตรีมมิงด้วย MPEG-DASH (เวอร์ชันแบบชำระเงินเท่านั้น), การจัดการสิทธิ์ดิจิทัล (DRM) (ด้วย Vualto), โฆษณาแบบอินเทอร์แอกทีฟ, การปรับแต่งอินเทอร์เฟซ และการฝัง มี API และ SDK ที่อธิบายไว้อย่างชัดเจน อย่างไรก็ตาม หากคุณเพียงต้องการวิธีโฮสต์สื่ออย่างรวดเร็วและไม่มีค่าใช้จ่าย โดยทั่วไปการฝังวิดีโอ YouTube จะเป็นตัวเลือกที่ดีที่สุดแบบไม่มีค่าใช้จ่าย
Video.js
เว็บไซต์ของ Video.js ระบุว่าสร้างขึ้นตั้งแต่ต้นสำหรับโลก HTML5 โดยรองรับวิดีโอ HTML5 และรูปแบบสตรีมมิงสมัยใหม่ เช่น DASH และ HLS รวมถึง YouTube และ Vimeo โดยรองรับการเล่นวิดีโอบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ รวมถึงดูดีในทุกที่ด้วยสกินที่ใช้ CSS
มีวิธีใช้ Video.js อยู่ 2-3 วิธี แต่วิธีที่ง่ายที่สุดคือการใช้ CDN เวอร์ชันที่ไม่มีค่าใช้จ่ายจาก Fastly ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีตั้งค่าโปรแกรมเล่นได้ในหน้าการเริ่มต้นใช้งาน Video.js เป็นวิดีโอเพลเยอร์ที่มีประสิทธิภาพมาก และคุณจะต้องโฮสต์และเข้ารหัสวิดีโอด้วยเช่นเดียวกับ Shaka Player อย่างไรก็ตาม ความแตกต่างอย่างหนึ่งคือระบบปลั๊กอินที่คุณสามารถทําสิ่งต่างๆ เช่น เล่นวิดีโอ YouTube ในวิดีโอเพลเยอร์ Video.js ซึ่งปรับแต่งได้ด้วย
เฟรมเวิร์กอื่นๆ
มีเฟรมเวิร์กและไลบรารีต่างๆ มากมายที่พร้อมใช้งาน บทความนี้เป็นเพียงข้อมูลเบื้องต้นเกี่ยวกับสิ่งที่มีให้บริการ เมื่อเลือกเฟรมเวิร์ก คุณควรพิจารณาถึงฟีเจอร์ที่ต้องใช้สำหรับโปรเจ็กต์ และวิธีที่จะโฮสต์และเข้ารหัสหรือแปลงสื่อ คุณต้องใช้โฆษณาตอนต้นหรือกลยุทธ์การสร้างรายได้อื่นๆ ไหม สื่อจะพร้อมใช้งานแบบออฟไลน์ไหม คุณมีงบประมาณมากหรือน้อยเพียงใด หรือพิจารณาจากปัจจัยอื่นๆ อีกมากมาย หาข้อมูลและขอคำแนะนำจากคนรอบตัว มีตัวเลือกอื่นๆ ที่ยอดเยี่ยมอีกมากมาย และก่อนที่จะตัดสินใจเลือกตัวเลือกใด โปรดใช้เวลาสักครู่เพื่อเลือกตัวเลือกที่เหมาะกับทีมของคุณและหลีกเลี่ยงการสร้างหนี้ทางเทคนิคหรือความซับซ้อนที่ไม่จำเป็นเพื่อรักษาไว้ตลอดอายุการใช้งานของโปรเจ็กต์
ถัดไป คุณจะได้ดูข้อมูลเกี่ยวกับ PWA ที่มีสตรีมมิงแบบออฟไลน์ที่เราสร้างขึ้นเพื่อสาธิตวิธีจัดการและรับมือกับปัญหาหลักๆ ที่มาพร้อมกับการเปิดตัวโซลูชันของคุณเองโดยใช้ออบเจ็กต์วิดีโอ HTML5 เท่านั้นโดยไม่มีเฟรมเวิร์กที่จะจัดการงานหนัก