使用者喜歡媒體內容，尤其是影片，因為這類內容既有趣又富含資訊。在行動裝置上，影片比文字更容易讓使用者吸收資訊。為提供良好的使用者體驗，影片的頻寬需求不應超過可用頻寬。無論使用者使用哪種裝置瀏覽，都應能使用這些功能。使用者不應需要等待媒體下載。沒有人喜歡按下播放按鈕後沒有任何反應。
你肯定會在自己的裝置上觀看影片，也就是說，上一節的內容不會讓你感到意外。接下來，您需要瞭解如何在自己的網站上放置影片或其他媒體檔案。新增媒體的技術需求應以使用者體驗為優先。
技術相關規定
- 媒體檔案的版本採用常見的網頁友善格式，包含音訊和影片串流。
- 解析度適合使用者裝置。
- 位元率不會造成使用者網路頻寬過載。
- 結果可在所有主要瀏覽器上使用適當技術查看。
- 檔案已加密 (選用)。
本網站的媒體專區可協助你達成這些技術規定。如果這些概念仍有點抽象，請別擔心。我們會在所有文章中逐步說明這些概念。在第一節中，您將瞭解媒體的基本概念，然後在第二節中瞭解如何在網站上新增媒體，最後在第三節中瞭解在網站上使用媒體的實用應用和一些進階技巧。
在網路上顯示影片
在網站上顯示影片時，您可以採用四種方法。
- 將影片上傳至媒體代管服務供應商，例如 YouTube 或 Vimeo。這些選項需要在網站中嵌入播放器。
- 使用 HTML
<video>和<audio>元素進行基本自管嵌入。 - 使用影片程式庫 (例如 Shaka Player、JW Player 或 Video.js) 進行更完整的嵌入。
- 自行建構媒體伺服器和串流應用程式。
本網站主要介紹嵌入媒體的基本知識。不過，我們會介紹一些較進階的主題，協助您開始建立自己的媒體串流應用程式。這項工作並非易事，因此我們已建構可支援離線功能的 Media PWA 做為參考，這應該能讓您瞭解如何完成這項工作，以及所需的努力程度。這個應用程式絕非是可供實際使用的產品，也不是 YouTube 或 Vimeo 等服務的競爭對手，但它可讓您開始學習新技術和新知識。
坦白說，要打造與代管媒體服務競爭的服務，需要一支專業工程師團隊，並投入數千小時的人力。除非您的目標是想以競爭者的身分進入該市場，否則建議您使用其他方法。瞭解這項技術很重要，即使您不打算推出自己的應用程式或影片播放器，還是可以探索並嘗試最新的瀏覽器支援功能，或至少使用其中一個現有的影片程式庫。
學習重點
media 集合包含三個部分，在這個第一個部分，我們會提供概念和必要資訊，協助您在網站中加入媒體。這包括說明如何將媒體檔案組合在一起、準備網頁檔案所需的應用程式基本知識，以及串流概念。第二節將說明如何準備檔案並將檔案轉換為各種格式，並視需要新增加密功能。在最後一節中，我們將說明如何在網頁中嵌入媒體檔案、討論自動播放最佳做法、使用媒體架構、將影片離線，以及讓影片更易於存取。
我們將介紹媒體檔案的基本知識，讓您瞭解相關資訊。