处理 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()…