AMP

amp-video

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

必需的脚本<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
示例AMP By Example 的:
支持的布局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 视频时,则显示此节点及其子级的内容。

示例

显示完整代码

分析

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` 属性或回退到网页标题。

示例:

此示例同时包含 posterartwork 属性。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 规则

需要更多帮助?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub