กรอบการทำงานสื่อ

เดเร็ก เฮอร์แมน

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

เมื่อใช้ Shaka คุณจะต้องโฮสต์และเข้ารหัสไฟล์สื่อด้วยตนเอง การสร้างเซิร์ฟเวอร์สื่อไม่ได้ซับซ้อนเกินไป แต่การเข้ารหัส/การแปลงสื่ออาจใช้เวลานานและซับซ้อน คุณอาจต้องนำส่วนนี้ไปใช้ในบริการ เช่น Zencoder, Amazon Elastic Encrypter หรือ Google Transcoder API เพื่อทำให้งานที่ต้องทำซ้ำๆ เป็นไปโดยอัตโนมัติและเร่งกระบวนการให้เร็วขึ้น

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

เครื่องเล่น 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 โดยไม่มีเฟรมเวิร์กเพื่อจัดการกับภาระงานหนัก