添加图片和视频
像在普通 HTML 网页上一样,您可以在 AMP 上嵌入 图片、视频 和音频 内容。了解 AMP 标记有何不同以及如何将它们添加到您的网页中。
为什么不支持 <img>
、<video>
和 <audio>
?
AMP 不支持用于显示媒体内容的默认 HTML 组件,如 <img>
。我们出于以下原因提供了相似的组件:
- 我们需要在素材资源加载之前了解网页布局,这对 为第一视口预加载提供支持来说至关重要
- 我们需要控制网络请求,以 延迟加载并高效排定资源的优先顺序
图片
使用 amp-img
元素向您的网页中添加图片,如下所示:

<amp-img alt="A beautiful sunset" src="/static/inline-examples/images/sunset.jpg" width="264" height="195"> </amp-img>
在这个最基本的示例中,图片会以指定的固定高度和宽度显示。至少要设置明确的宽度和高度。
JavaScript 停用时显示图片
由于 <amp-img>
依赖于 JavaScript,因此如果用户选择停用脚本,图片将不会显示。在这种情况下,您应该使用 <img>
和 <noscript>
来提供后备图片,如下所示:
<amp-img src="/static/inline-examples/images/sunset.jpg" width="264" height="195"> <noscript> <img src="/static/inline-examples/images/sunset.jpg" width="264" height="195" /> </noscript> </amp-img>
高级布局
与使用标准 CSS/HTML 相比,使用 AMP 可以更轻松地创建完全自适应的图片。您只需向其最基本的形式中添加 layout="responsive"
即可:
<amp-img alt="A view of the sea" src="/static/inline-examples/images/sea.jpg" width="900" height="675" layout="responsive"> </amp-img>
行为和占位符
AMP HTML 运行时可有效管理图片资源,从而可使您根据视口位置、系统资源、连接带宽或其他因素,选择延迟资源加载或排定资源加载的优先顺序。
动画图片
The amp-anim
元素与 amp-img
元素非常相似,且前者提供额外功能,可以管理 GIF 等动画图片的加载和播放。
<amp-anim width="400" height="300" src="/static/inline-examples/images/wavepool.gif"> <amp-img placeholder width="400" height="300" src="/static/inline-examples/images/wavepool.png"> </amp-img> </amp-anim>
才能使用此组件。 视频
使用 amp-video
元素向您的网页中添加视频。
仅针对直接 HTML5 视频文件嵌入使用此元素。此元素能以 AMP 确定的时间延迟加载由 src
属性所指定的视频资源。
在视频开始播放前添加占位符,如果浏览器不支持 HTML5 视频,则添加后备视频,例如:
This browser does not support the video element.
<amp-video controls width="640" height="360" src="/static/inline-examples/videos/kitten-playing.mp4" poster="/static/inline-examples/images/kitten-playing.png"> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video>
音频
使用 amp-audio
元素向您的网页中添加音频资源。
仅针对直接 HTML5 音频文件嵌入使用此元素。像 AMP 网页中所有嵌入的外部资源一样,此元素能以 AMP 确定的时间延迟加载由 src
属性所指定的音频资源。
在音频开始播放前添加占位符,如果浏览器不支持 HTML5 音频,则添加后备音频,例如:
Your browser doesn’t support HTML5 audio.
<amp-audio width="400" height="200" src="/static/inline-examples/audio/cat-meow.mp3"> <div fallback> <p>Your browser doesn’t support HTML5 audio.</p> </div> <source type="audio/mpeg" src="/static/inline-examples/audio/cat-meow.mp3"> <source type="audio/ogg" src="/static/inline-examples/audio/cat-meow.ogg"> </amp-audio>
才能使用此组件。