像在普通 HTML 网页上一样,您可以在 AMP 上嵌入 图片视频音频 内容。了解 AMP 标记有何不同以及如何将它们添加到您的网页中。

为什么不支持 <img><video><audio>

AMP 不支持用于显示媒体内容的默认 HTML 组件,如 <img>。我们出于以下原因提供了相似的组件:

图片

使用 amp-img 元素向您的网页中添加图片,如下所示:

Show full code

在这个最基本的示例中,图片会以指定的固定高度和宽度显示。至少要设置明确的宽度和高度。

JavaScript 停用时显示图片

由于 <amp-img> 依赖于 JavaScript,因此如果用户选择停用脚本,图片将不会显示。在这种情况下,您应该使用 <img><noscript> 来提供后备图片,如下所示:

Show full code

高级布局

与使用标准 CSS/HTML 相比,使用 AMP 可以更轻松地创建完全自适应的图片。您只需向其最基本的形式中添加 layout="responsive" 即可:

Show full code

行为和占位符

AMP HTML 运行时可有效管理图片资源,从而可使您根据视口位置、系统资源、连接带宽或其他因素,选择延迟资源加载或排定资源加载的优先顺序。

动画图片

The amp-anim 元素与 amp-img 元素非常相似,且前者提供额外功能,可以管理 GIF 等动画图片的加载和播放。

Show full code

视频

使用 amp-video 元素向您的网页中添加视频。

仅针对直接 HTML5 视频文件嵌入使用此元素。此元素能以 AMP 确定的时间延迟加载由 src 属性所指定的视频资源。

在视频开始播放前添加占位符,如果浏览器不支持 HTML5 视频,则添加后备视频,例如:

Show full code

音频

使用 amp-audio 元素向您的网页中添加音频资源。

仅针对直接 HTML5 音频文件嵌入使用此元素。像 AMP 网页中所有嵌入的外部资源一样,此元素能以 AMP 确定的时间延迟加载由 src 属性所指定的音频资源。

在音频开始播放前添加占位符,如果浏览器不支持 HTML5 音频,则添加后备音频,例如:

Show full code