將媒體新增至網頁的方法有很多種。您先前已瞭解如何使用標準 <video> 標記。本文將說明幾個可用的媒體架構 (或程式庫)，您可以使用這些架構擴充或取代預設 HTML5 影片播放器的行為。
媒體架構有專屬和開放原始碼的各種版本，其核心是一組 API，可支援各種容器格式和傳輸通訊協定的音訊和/或影片播放功能。優質的架構具有模組化架構，並提供清晰且詳盡的說明文件。理想情況下，您也應該可以輕鬆設定及使用。您可能會問自己：「如果 HTML5 影片播放器已提供大部分功能，那我為什麼要使用架構或程式庫？」這是個好問題，讓我進一步說明。
使用架構的好處
在大多數情況下，如果您需要提供基本網頁以外的內容，就應該使用媒體架構。除非您準備好開發及維護豐富的功能組合 (例如離線播放、串流、分析、子母畫面、預覽縮圖、嵌入和營利功能，例如填充率最佳化、廣告排程或標頭出價)，否則建議您將這些複雜功能交給現有解決方案。
這時媒體架構就派上用場。這些架構會提供一組功能，以及可使用這些功能的條件，您必須決定哪個架構適合您的專案。在下一篇文章中，我們將討論如何建構支援離線串流的 PWA，並實作多項複雜功能。劇透警告：這項工作量非常大，而且仍遠未達到可正式發布的解決方案。請使用架構，避免麻煩。
市面上有許多選項可供選擇，本文將著重於 Shaka Player、JW Player 和 Video.js。
Shaka Player
根據說明文件，Google 的 Shaka Player 是用於自適應媒體的開放原始碼 JavaScript 程式庫。這個 API 可在瀏覽器中播放自適應媒體格式 (例如 DASH 和 HLS)，不必使用外掛程式。相反地，Shaka Player 會使用開放式網頁標準 MediaSource Extensions 和 Encrypted Media Extensions。
Shaka Player 也支援使用 IndexedDB 對媒體進行離線儲存和播放。內容可儲存在任何瀏覽器中。授權儲存空間取決於瀏覽器支援。
您可以在 Shaka Player 說明文件網站上找到基本使用方式的操作說明。不過，簡而言之，如要使用 Shaka Player，您必須先建立含有影片或音訊元素的 HTML 頁面。接著，在應用程式的 JavaScript 中安裝 polyfill，並檢查瀏覽器支援情形。一旦瀏覽器確認支援 Shaka Player，指令碼就會建立 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 影片物件而非架構的解決方案，解決這項作業的繁重負擔。