什麼是媒體體驗?

Derek Herman
Derek Herman
Joe Medley
Joe Medley

使用者喜歡媒體,尤其是影片,它可以有趣且具參考價值。在行動裝置上,比起文字,影片更適合用來吸收資訊。為了提供良好的使用者體驗,影片不需要超過可用頻寬。使用者無論使用何種裝置,都應該要能使用。並不需要等待下載媒體。沒人喜歡按下播放,沒有反應

此外,您對於自己的裝置觀看影片並無疑慮,也就是說,最後一段沒有出乎您意料的內容。現在,您必須瞭解如何將影片或其他媒體檔案 加入自己的網站新增媒體的技術要求應要一併顧及使用者體驗。

  • 媒體檔案的版本是適合網頁的常見格式,包含音訊和影片串流。
  • 使用者的裝置會採用最合適的解析度。
  • 位元率不會超載使用者的網路頻寬。
  • 採用適當技術的主要瀏覽器都能查看結果。
  • 檔案已加密 (選用)。

本網站的媒體一節將協助您達成這些技術相關規定。如果這些概念仍然很抽象,請不用擔心。我們會在整篇文章中逐步說明這些方法。在第一部分中,您將瞭解媒體的基本概念,第二節將如何將媒體新增至網路;在實作應用程式的最後一節中,也會介紹一些進階技巧,說明如何在網路上使用媒體。

在網路上顯示影片

在網站上顯示影片時,有四種方法可以選擇。

  • 將影片上傳至 YouTubeVimeo 等媒體代管服務供應商。 如要使用這些選項,請將他們的播放器嵌入網站。
  • 使用 HTML <video><audio> 元素進行基本的自行託管。
  • 使用影片庫 (例如 Shaka PlayerJW PlayerVideo.js) 更豐富的嵌入功能。
  • 建構專屬的媒體伺服器和串流應用程式。

本網站主要說明嵌入媒體的基本概念。不過,我們會介紹一些更進階的主題,協助您開始建構自己的媒體串流應用程式。要做到這一點並不容易,因此我們打造了支援離線支援的 Media PWA,做為參考之用,因此您應該會知道如何達成這個目標,以及需要多少心力。這個應用程式不是完全可用於正式環境的服務或對 YouTube 或 Vimeo 等服務的競爭者,但能讓您的起點,學習具有挑戰性的嶄新事物。

老實說,如要為代管媒體服務建立競爭對手,需要由專家和數千個人力工時組成的團隊。除非您的目標是成為該市場的競爭對手,否則建議您使用其他方法。瞭解這項技術的好處是,即使不推出自己的應用程式或影片播放器,您還是可以探索及嘗試先進的瀏覽器支援,或者至少使用現有的影片程式庫。

課程內容

media 集合包含三個部分。在第一部分中,我們將說明在網站上新增媒體的概念和須知事項。包括媒體檔案的組合方式、準備網頁檔案所需的應用程式相關基本概念,以及串流概念。第二部分將說明如何準備檔案,並將檔案轉換為各種格式,並視需要新增加密功能。在最後一節中,我們將說明如何在網頁中嵌入媒體檔案、討論自動播放的最佳做法、使用媒體架構、將影片離線,以及如何將影片設為可供存取。

有許多基礎概念,讓我們先瞭解媒體檔案基本概念