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