Web 上的媒體技術

指南

“媒體指南”是幫助您使用現代 Web 技術理解、轉換和最佳化 Web 上的媒體（包括音訊、影片和影像）的資源。

音訊和影片傳輸

我們可以在網路上以多種方式交付音訊和影片，從“靜態”媒體檔案到自適應直播流。本文旨在作為一個起點，探索基於網路的媒體的各種交付機制以及與流行瀏覽器的相容性。

音訊和影片處理

瀏覽器原生支援音訊和影片，這意味著我們可以使用這些資料流與 <canvas>、WebGL 或 Web Audio API 等技術直接修改音訊和影片，例如為音訊新增混響/壓縮效果，或為影片新增灰度/懷舊濾鏡。

媒體和 Web Audio API 自動播放指南

不希望的媒體或音訊自動播放可能會令使用者感到不悅。雖然自動播放有其用途，但應謹慎使用。為了讓使用者控制這一點，許多瀏覽器現在提供各種形式的自動播放阻止功能。本文是關於自動播放的指南，其中包含何時以及如何使用它的技巧，以及如何與瀏覽器協同工作以優雅地處理自動播放阻止。

適用於 HTML 5 影片的 DASH 自適應流媒體

HTTP 上的動態自適應流 (DASH) 是一種自適應流協議。這意味著它允許影片流根據網路效能在位元率之間切換，以保持影片播放流暢。

流媒體音訊和影片

本指南涵蓋了如何進行音訊和影片流傳輸，以及你可以利用的技術和技巧來確保流的質量和/或效能達到最佳。

Web 上的媒體型別和格式

本指南介紹了 Web 上可用的影像、音訊和影片媒體檔案型別和編解碼器。這包括關於針對不同內容使用哪種格式的建議、最佳實踐（包括如何提供備用方案以及如何優先處理媒體型別），以及每種媒體容器和編解碼器的通用瀏覽器支援資訊。

在 HTML 中使用圖片

這是一份關於如何為網站新增響應式、可訪問且效能良好的圖片的指南。

參考

HTML

以下 HTML 元素用於在頁面中包含媒體。

<audio>

<audio> 元素用於播放音訊。它可以作為更復雜的媒體的不可見目標，或者帶有可見控制元件以供使用者控制音訊檔案的播放。可以透過 JavaScript 訪問，物件型別為 HTMLAudioElement。

<video>

<video> 元素用於播放影片內容。它可以用於呈現影片檔案，或作為流式影片內容的接收端。<video> 還可以用作將媒體 API 與其他 HTML 和 DOM 技術（包括 <canvas>（用於幀捕獲和處理））進行連結的方式，例如。可以透過 JavaScript 訪問，物件型別為 HTMLVideoElement。

<track>

HTML <track> 元素可以放在 <audio> 或 <video> 元素內，以提供對 WebVTT 格式字幕或說明軌的引用，供媒體播放時使用。可以透過 JavaScript 訪問，物件型別為 HTMLTrackElement。

<source>

HTML <source> 元素用於 <audio> 或 <video> 元素內，以指定要呈現的源媒體。可以使用多個源來提供不同格式、大小或解析度的媒體。可以透過 JavaScript 訪問，物件型別為 HTMLSourceElement。

API

Media Capabilities API

Media Capabilities API 允許你確定應用程式或網站執行裝置的編碼和解碼能力。這使你能夠即時決定使用何種格式以及何時使用。

媒體捕獲和流 API

此 API 的參考文件，它使得在本地和跨網路流式傳輸、錄製和處理媒體成為可能。這包括使用本地攝像頭和麥克風捕獲影片、音訊和靜態影像。

Media Session API

Media Session API 提供了一種自定義媒體通知的方式。它透過提供元資料供使用者代理顯示你 Web 應用正在播放的媒體。它還提供操作處理程式，瀏覽器可以使用這些處理程式來訪問平臺媒體鍵，例如鍵盤上的硬體鍵、耳機、遙控器，以及移動裝置通知區域和鎖定螢幕上的軟體鍵。

MediaStream Recording API

MediaStream Recording API 允許你捕獲媒體流以處理或過濾資料，或將其錄製到磁碟。

Web Audio API

Web Audio API 允許你在即時和預錄製材料上生成、過濾和處理聲音資料，然後將音訊傳送到目標，例如 <audio> 元素、媒體流或磁碟。

WebRTC

WebRTC（Web 即時通訊）使得無需中介即可在兩個點對點之間透過 Internet 流式傳輸即時音訊和影片，以及傳輸任意資料。

相關主題

可能感興趣的相關主題，因為它們可以以有趣的方式與媒體 API 協同使用。

可訪問的多媒體

在本指南中，我們介紹了 Web 設計師和開發人員可以建立對不同能力的使用者可訪問的內容的方法。這包括使用 <img> 元素上的 alt 屬性，到字幕，再到為螢幕閱讀器標記媒體。

Canvas API

Canvas API 允許你在 <canvas> 中繪圖，從而操作和更改影像的內容。這可以以多種方式與媒體結合使用，包括將 <canvas> 元素設定為影片播放或攝像頭捕獲的目標，以便你可以捕獲和處理影片幀。

WebGL

WebGL 在現有 Canvas API 之上提供了相容 OpenGL ES 的 API，使得在 Web 上進行強大的 3D 圖形處理成為可能。透過 canvas，這可以用於為媒體內容新增 3D 影像。

WebXR

WebXR，取代了現已廢棄的 WebVR API，是一種支援建立虛擬現實 (VR) 和增強現實 (AR) 內容的技術。然後可以在裝置的螢幕上或透過頭戴式顯示器或耳機顯示混合現實內容。

WebVR 已棄用

Web Virtual Reality API 支援虛擬現實 (VR) 裝置，如 Oculus Rift 或 HTC Vive，使開發人員能夠將使用者的姿勢和移動轉化為 3D 場景中的移動，然後顯示在裝置上。WebVR 已被 WebXR 取代，即將從瀏覽器中移除。

Web Audio 空間化基礎

在 3D 環境中，這些環境可以是渲染到螢幕的 3D 場景，也可以是使用頭戴式顯示器體驗的混合現實體驗，音訊的播放方式很重要，使其聽起來像是來自其源頭的方向。本指南涵蓋了如何實現這一點。