Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
ZH
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe

添加图片和视频

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

为什么不支持 <img>、<video> 和 <audio>？

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

尽管默认的 HTML 组件不受支持，但仍会 呈现在网页上，不过 AMP 不会 验证您的网页， 如果您的网页上显示了 HTML 组件，您将无法享受 AMP 提供的所有优势。

图片

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

<amp-img alt="A beautiful sunset"
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195">
</amp-img>
在 playground 中打开此代码片段

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

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>
在 playground 中打开此代码片段

高级布局

与使用标准 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>
在 playground 中打开此代码片段

详细了解 高级布局技术。

行为和占位符

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>
在 playground 中打开此代码片段

您需要在网页的标头部分添加 <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> 才能使用此组件。

视频

使用 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>
在 playground 中打开此代码片段

音频

使用 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>
在 playground 中打开此代码片段

您需要在网页的标头部分添加 <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> 才能使用此组件。