在網頁中加入媒體的方法有好幾種。您之前已學會如何使用標準 <video> 標記。在本文中，您將瞭解一些可用的媒體架構 (或程式庫)，可用來擴充或取代預設 HTML5 影片播放器的行為。
媒體架構具有專屬和開放原始碼類型，且核心是一組 API，可支援各種容器格式和傳輸通訊協定的音訊和/或影片播放。良好的架構包含模組架構，並提供清楚詳盡的說明文件。理想情況下，設定及使用方法應相對簡單。您可能會想知道：如果 HTML5 影片播放器已提供大部分的功能，那麼為什麼要使用架構或程式庫？」這個問題非常好，我們就來一探究竟。
使用架構的好處
在大部分的情況下，除了基本網頁的需求之外，您還可以使用媒體架構提供內容。除非您已準備好開發並維護豐富的功能組合，例如離線播放、串流、數據分析、子母畫面、預覽縮圖、嵌入和營利 (例如供應率最佳化、廣告時段或標頭出價)，否則應將複雜的情形轉化為現有的解決方案。
這時媒體架構就能派上用場。這些合作夥伴會提供一系列功能和條件 讓您使用這些功能，然後決定專案適合哪種架構下一篇文章將會探討我們如何建構具有離線串流的 PWA，並實作多項複雜功能。還有劇透警告，這是很多工作的問題，目前仍未成為可用於實際工作環境的解決方案。妥善運用架構，省下麻煩。
有許多選項可以選擇，目前本文將著重介紹三個選項：Shaka Player、JW Player 和 Video.js。
Shaka 播放器
根據說明文件，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 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 有一些方法，但最簡單的方法是使用 Fastly 提供的 CDN 版本。如要進一步瞭解如何設定玩家，請參閱「開始使用」頁面。Video.js 是非常強大的影片播放器，和 Shaka Player 一樣，您還需要代管和編碼影片。但有一項不同之處是外掛程式系統，可讓您執行多種操作，例如在 Video.js 播放器中播放 YouTube 影片 (可以自訂)。
其他架構
有許多不同的架構和程式庫可用，本文僅著重介紹其特色。選擇架構時，您應該考量專案需要哪些功能，以及您規劃媒體的託管和編碼或轉碼方式。是否需要使用片頭廣告 或其他營利策略？你的媒體是否可以離線使用？你的預算有多少？或任何其他需要考量的因素。因此請自行研究 並請人脈網路中人提供建議在做出選擇前，不妨先參考數十種其他實用方案，在做出選擇前，請花點時間挑選適合團隊的做法，避免在專案生命週期產生不必要的技術債或作業複雜性。
接下來，您將瞭解我們建構的「具離線串流功能的 PWA」，示範如何只需使用 HTML5 影片物件，且無需使用架構來處理繁瑣作業，即可瞭解如何處理及解決主要難題。