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