amp-video

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

替代 HTML5 视频标记。

Required Scripts

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item intrinsic nodisplay responsive

示例

amp-app-banner amp-video Advanced Video Docking Click-to-play overlay for amp-video Integrating Videos in AMP an Overview Rich Media Notifications Video Carousels with amp-carousel Video rotate to fullscreen with hint

替代 HTML5 video 标记；仅用于直接嵌入 HTML5 视频文件。

必需的脚本	`<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>`
示例	AMP By Example 的： amp-video 示例 amp-video 的点击播放叠加层
支持的布局	fill、fixed、fixed-height、flex-item、nodisplay、responsive

行为

amp-video 组件将按照运行时确定的时间延迟加载通过其 src 属性指定的视频资源。您可以大体上按照控制标准 HTML5 <video> 标记的方式控制 amp-video 组件。

amp-video 组件最多接受四种不同类型的 HTML 节点作为子级：

source 标记：和在 HTML <video> 标记中一样，您可以添加 <source> 标记子级，以指定要播放的不同源媒体文件。
track 标记，用于在视频中启用字幕。如果字幕轨托管在文档之外的其他来源，那么您必须将 crossorigin 属性添加到 <amp-video> 标记中。
视频播放前使用的占位符
回调（如果浏览器不支持 HTML5 视频）：一个或零个直接子节点可以具有 fallback 属性。如果存在此节点，则在用户的浏览器不支持 HTML5 视频时，则显示此节点及其子级的内容。

示例

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

在 Playground 中打开此代码段

分析

amp-video 自动支持分析功能。如需了解更多信息，请参阅视频分析。

属性

src	如果不存在 `<source>` 子级，则该属性为必需的属性。必须为 HTTPS。
poster	视频开始播放之前显示的帧的图片。默认情况下，显示第一帧。或者，您也可以显示点击播放叠加层。如需了解详情，请参阅下面的点击播放叠加层部分。
autoplay	如果此属性存在并且浏览器支持自动播放，则视频将在变为可见时自动播放。该组件需要满足一些条件才能播放，在“AMP 中的视频”规范中列出了这些条件。
controls	此属性类似于 HTML5 `video` 中的 `controls` 属性。如果此属性存在，浏览器将提供相应控件，以便用户控制视频播放。
controlsList	与 HTML5 视频元素的 controlsList 属性相同。只有某些浏览器支持此属性。如需了解详情，请参阅 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsList。
dock	需要 `amp-video-docking` 扩展。如果此属性存在并且视频通过手动方式播放，则当用户滚动到视频组件的可视区域以外时，视频将“最小化”并固定到角落或某个元素。如需了解更多详情，请参阅关于 docking 扩展的文档。
loop	如果此属性存在，则视频在播放完毕后会自动循环至开始位置。
crossorigin	如果 `track` 资源托管在文档之外的其他来源，则此属性为必需的属性。
disableremoteplayback	确定是否允许媒体元素具有远程播放界面（如 Chromecast 或 AirPlay）。
muted（已弃用）	`muted` 属性已被弃用且不再有效。`autoplay` 属性会自动控制静音行为。
noaudio	将视频注释为没有音频。这会在视频具有 autoplay 属性时隐藏已显示的均衡器图标。
rotate-to-fullscreen	如果视频可见，则在用户将设备旋转到横屏模式后会全屏显示。如需了解更多详情，请参阅“AMP 中的视频”规范。
常见属性	此元素包含扩展到 AMP 组件的常见属性。

Media Session API 属性

amp-video 组件可实现 Media Session API，以便开发者指定关于视频文件的更多信息。关于视频的其他信息将显示在用户设备的通知中心内（该中心内还会显示播放/暂停控件）。

artwork	指定用作视频海报图片的 PNG/JPG/ICO 图片对应的网址。如果 `artwork` 属性不存在，则 Media Session API 帮助程序将使用 `schema.org` 定义中的 `image` 字段、`og:image` 或网站的 `favicon`。
artist	以字符串形式指定视频文件的作者。
album	以字符串形式指定从哪个专辑/集合获取视频。
title	以字符串形式指定视频的名称/标题。如果未提供此属性，Media Session API 帮助程序将使用 `aria-label` 属性或回退到网页标题。

示例：

此示例同时包含 poster 和 artwork 属性。poster 用作视频播放前的占位符图片，而 artwork 是通过 MediaSession API 显示在通知中的图片。

<amp-video width="720" height="305" layout="responsive"
    src="https://yourhost.com/videos/myvideo.mp4"
    poster="https://yourhost.com/posters/poster.png"
    artwork="https://yourhost.com/artworks/artwork.png"
    title="Awesome video" artist="Awesome artist"
    album="Amazing album">
</amp-video>

点击播放叠加层

网站上的视频播放器提供点击播放叠加层是一种常见的用户体验功能。例如，您可以显示自定义播放图标供用户点击，也可以添加视频标题、不同尺寸的海报图片，等等。由于 amp-video 组件支持标准的 play AMP 操作，因此您可以轻松实现点击播放。

如需查看详细示例，请访问 AMP By Example 的 amp-video 的点击播放叠加层。

验证

请参阅 AMP 验证工具规范中的 amp-video 规则。

需要更多帮助？

您已多次阅读本文档，但它仍未能涵盖您的所有问题？也许其他人也这么觉得：在 Stack Overflow 上与他们联系。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub

amp-video 1.0 0.1