處理 Web 內容中的媒體支援問題
在 Web 上處理音訊和影片的呈現和操作，其現實情況是存在多種媒體格式，它們的流行程度和功能各不相同。格式選擇的多樣性對使用者來說是件好事，因為他們可以選擇最適合自己需求的格式。然而，這也存在一個缺點：由於格式眾多，涉及的許可和設計原則也各不相同，每個 Web 瀏覽器開發人員在決定支援哪些媒體檔案型別和編解碼器時，都必須自行其是。
這給 Web 開發人員帶來了一個小但相對容易克服的負擔：當用戶的瀏覽器無法處理特定型別的媒體時，需要妥善處理這種情況。本指南介紹了你可以用來開發滿足媒體需求，同時提供最廣泛相容性體驗的技術。我們將探討後備方案、基礎媒體格式以及錯誤處理實踐，以確保你的內容在儘可能多的情況下都能正常工作。
使用海報幀
海報幀是代表影片內容的靜態影像。這可以是影片的第一幀；然而，在許多情況下，第一幀是空白的，或者只包含公司徽標，或者其他無法讓讀者瞭解影片內容的影像。
一個好的海報幀應該是能夠代表影片內容的，或者即使不是來自影片本身，但包含能夠讓讀者對影片內容有一個有用概念的影像和/或文字。例如，對於一部動作片，海報幀可能是電影最著名場景中的標誌性示例影像。
類似的概念也可以應用於靜態影像；如果你想顯示的影像非常大，並且下載可能需要一些時間（尤其是在裝置或連線速度較慢的情況下），你可以提供一個低解析度或替代版本，在完整質量版本準備好顯示之前顯示它。
我們將探討這兩種情況以及如何實現它們。
影片的海報幀
漸進式影像
影像——無論是使用 <img> 還是 <picture> 嵌入——都不支援類似海報幀的概念。然而，有一些方法可以在影像載入時以低質量顯示它。這需要你使用漸進式格式建立影像，例如漸進式 JPEG 或隔行掃描 PNG。
一旦你的影像轉換為漸進式格式，你就可以像往常一樣使用它。
<img
src="/images/staff-photo-huge-progressive.jpg"
alt="Staff Photo, taken in January of 1972" />
使用漸進式影像時，資料儲存的方式使得瀏覽器能夠儘快渲染影像的低質量表示，然後在載入時——或載入完成後——更新影像以顯示完整質量。
注意：漸進式（或隔行掃描）影像的體積通常比同一影像的非漸進式版本略大。是否採用隔行掃描能夠真正惠及你的使用者，還需要你自己決定。
指定多個源
在 JavaScript 中檢查相容性
HTMLMediaElement.canPlayType 和 MediaSource.isTypeSupported()…