处理网页内容中的媒体支持问题
网页上音频和视频呈现和操作的一个现实情况是，存在许多媒体格式，其流行程度和功能各不相同。对于用户来说，选择众多是件好事，因为他们可以选择最适合其需求的格式。然而，也存在一个缺点：由于可供选择的格式太多，并且涉及许多不同类型的许可证和设计原则，因此每个网页浏览器开发者在决定支持哪些媒体文件类型和编解码器时都只能依靠自身。
这给网页开发者带来了一点负担，但相当容易克服：在用户浏览器无法处理特定类型的媒体时，正确处理这种情况。本指南介绍了可用于开发满足媒体需求并提供尽可能广泛兼容体验的网页内容的技术。我们将探讨的主题包括回退、基线媒体格式和错误处理实践，这些实践将使您的内容在尽可能多的情况下都能正常工作。
使用海报帧
**海报帧**是指代表视频内容的静态图像。这可能是视频的第一帧；但是，在许多情况下，第一帧是空白的，或者只包含企业徽标或其他不向读者提供视频内容上下文的一些图像。
好的海报帧要么代表视频内容，要么是并非来自视频本身的图像，但包含向读者提供视频内容有用信息的图像和/或文本。例如，对于动作片，海报帧可能是电影最著名场景之一的标志性示例图像。
类似的概念可以应用于静态图像；如果您要呈现的图像非常大，并且可能需要时间下载（尤其对于速度较慢的设备或连接），您可以提供一个低分辨率或替代版本，该版本将在完整质量版本可用显示之前显示。
我们将介绍这两种情况以及如何实现它们。
视频的海报帧
渐进式图像
图像（无论是使用 <img> 还是 <picture> 嵌入）都不支持类似于海报帧的概念。但是，有一些方法可以在图像仍在加载时以低质量呈现图像。这需要使用**渐进式**格式（如渐进式 JPEG 或隔行扫描 PNG）创建图像。
将图像转换为渐进式格式后，您可以照常使用它。
<img
src="/images/staff-photo-huge-progressive.jpg"
alt="Staff Photo, taken in January of 1972" />
使用渐进式图像时，数据以这样一种方式存储，即浏览器能够尽快呈现图像的低质量表示，然后在加载图像时或加载完成后更新图像以呈现完整质量的图像。
注意：渐进式（或隔行扫描）图像本质上比相同图像的非渐进式版本略大。是否进行隔行扫描以使您的用户受益，取决于您自己决定。