在網頁中加入媒體的方法有很多種，您之前已瞭解如何使用標準 <video> 標記。本文將說明幾個可用來擴充或取代預設 HTML5 影片播放器行為的媒體架構 (或程式庫)。
媒體架構有專屬和開放原始碼，且核心是一組 API，可支援各種容器格式和傳輸通訊協定的音訊和/或影片播放。理想的架構具備模組化架構，並提供清楚且詳盡的說明文件。在理想情況下，設定及使用方法也應相對簡單您可能會好奇：「如果 HTML5 影片播放器已提供大部分的功能，那我為什麼要使用架構或程式庫？」這個問題非常好，我們來一探究竟。
使用架構的優點
在大部分的情況下，您超出基本網頁的需求，建議您使用媒體架構來提供內容。除非您已準備好開發及維護豐富的功能組合 (例如離線播放、串流、數據分析、子母畫面、預覽縮圖、嵌入功能，以及廣告供應率最佳化、廣告時段或標頭出價等營利)，否則應該會將繁雜的複雜作業交由現有解決方案處理。
這時媒體架構就能派上用場。這些函式會提供一組功能和條件供您使用這些功能，接著您必須決定哪個架構適合您的專案。下一篇文章將會討論我們如何建構具有離線串流功能的 PWA，實作多項複雜功能。劇透警報，需要處理大量工作，目前距離可用於實際工作環境的解決方案還很遠。省去棘手的麻煩，讓您從架構中靈活運用。
選項有很多種，本文將以 Shaka Player、JW Player 和 Video.js 這三者為主。
夏卡播放器
根據說明文件，Google 的 Shaka Player 是開放原始碼的 JavaScript 程式庫，適用於自動調整媒體。這項功能會在瀏覽器中播放自動調整媒體格式 (例如 DASH 和 HLS)，不必使用外掛程式。Shaka Player 改用開放網路標準 MediaSource Extensions 和 Encrypted Media Extensions。
Shaka Player 也支援使用 IndexedDB 進行媒體的離線儲存和播放。內容可以儲存在任何瀏覽器中。授權儲存空間視瀏覽器支援而定。
請參閱 Shaka Player 說明文件網站，瞭解基本用法。 但在簡單來說，如要使用 Shaka Player，您必須先建立含有影片或音訊元素的 HTML 網頁。接著，在應用程式的 JavaScript 中，安裝 polyfill，並檢查瀏覽器是否支援。瀏覽器確認支援 Shaka Player 後，指令碼就會建立播放器物件來包裝媒體元素，監聽錯誤，然後載入資訊清單檔案。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 和 HTTP 即時串流，以及 YouTube 和 Vimeo。這個外掛程式支援在電腦和行動裝置上播放影片，而且不論在哪個地方，都能透過 CSS 外觀來美觀播放。
使用 Video.js 的方法有很多種，但最簡單的方法是使用 Fastly 提供的免費 CDN 版本。如要進一步瞭解如何設定玩家，請參閱開始使用頁面。Video.js 是功能非常強大的影片播放器 與 Shaka Player 一樣，您也必須代管影片並編碼。 但外掛程式系統有一個不同之處，它可讓您在 Video.js 播放器中播放 YouTube 影片，而影片也可以進行自訂。
其他架構
市面上有許多不同的架構和程式庫，本文僅探討現有的介面。選擇架構時，應考量專案需要哪些功能，以及打算如何代管、編碼或轉碼媒體。是否需要片頭廣告或其他營利策略？你的媒體是否可以離線使用？你的預算是多少？或任何其他考量因素。自行研究 並請人脈中的人尋求建議這裡提供許多其他實用選項，在您做任何選擇之前，請花一些時間挑選適合貴團隊的項目，並避免在專案生命週期期間造成不必要的技術債或複雜性進行維護。
接下來，您將瞭解我們建構的「PWA 搭配離線串流」，示範如何在不使用架構的情況下，只使用 HTML5 影片物件導入自己的解決方案，藉此解決主要難題。