amp-video

1.0 0.1

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

用法

HTML5 video 标签的替换项；仅用于直接嵌入 HTML5 视频文件。

amp-video 组件会延迟加载其 src 属性指定的视频资源，具体时间由运行时决定。你可以像控制标准 HTML5 <video> 标签一样控制 amp-video 组件。

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

• source 标签：就像 HTML <video> 标签一样，你可以添加 <source> 标签子级来指定要播放的不同源媒体文件。
• track 标签可在视频中启用字幕。如果音轨托管在与文档不同的源上，则必须向 <amp-video> 标签添加 crossorigin 属性。每当视频有旁白或重要的音频信息时，务必为可能无法听到或已关闭声音的用户添加字幕/标题。
• 视频开始播放之前的占位符
• 如果浏览器不支持 HTML5 视频，则使用备用项：一个或零个直接子级节点可以具有 fallback 属性。如果存在，则此节点及其子级构成在用户浏览器上不支持 HTML5 视频时显示的内容。

<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>

属性

src

如果没有 <source> 子级，则此项为必需项。必须为 HTTPS。

poster

视频播放开始前要显示的帧的图像。默认情况下，显示第一帧。

或者，你可以显示点击播放叠加层。

autoplay

如果存在此属性，并且浏览器支持自动播放，当视频可见时，将自动播放视频。组件需要满足一些条件才能播放，这些条件在 AMP 规范中的视频中进行了概述。

controls

此属性类似于 HTML5 video 中的 controls 属性。如果存在此属性，浏览器将提供控件，允许用户控制视频播放。

controlsList

与 HTML5 视频元素的 controlsList 属性相同。仅受某些浏览器支持。

dock

需要 amp-video-docking 组件。如果存在此属性且视频正在手动播放，当用户滚动出视频组件的可视区域时，视频将被“最小化”并固定在角落或元素上。

loop

如果存在，视频在达到结尾时将自动循环回到开头。

crossorigin

如果 track 资源托管在与文档不同的来源上，则需要此属性。

disableremoteplayback

确定媒体元素是否允许具有远程播放 UI，例如 Chromecast 或 AirPlay。

muted (已弃用)

muted 属性已弃用，不再有任何效果。autoplay 属性自动控制静音行为。

noaudio

将视频标注为没有音频。当视频具有自动播放功能时，这将隐藏显示的均衡器图标。

rotate-to-fullscreen

如果视频可见，当用户将设备旋转到横向模式后，视频将全屏显示。有关更多详细信息，请参阅 AMP 规范中的视频。

通用属性

此元素包括扩展到 AMP 组件的 通用属性。

媒体会话 API 属性

amp-video 组件实现了 媒体会话 API，该 API 使开发人员能够指定有关视频文件的更多信息。视频的附加信息显示在用户设备的通知中心（以及播放/暂停控件）。

此示例同时包含 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>

artwork

指定一个指向 PNG/JPG/ICO 图像的 URL，该图像用作视频的插图。如果不存在 artwork，Media Session API 帮助程序将使用 schema.org 定义中的 image 字段、og:image 或网站的 favicon。

artist

指示视频文件的作者，指定为字符串。

album

指示视频所在的专辑/集合，指定为字符串。

title

指示视频的名称/标题，指定为字符串。如果没有提供，Media Session API 帮助程序将使用 aria-label 属性或回退到页面的标题。

分析

amp-video 支持开箱即用的分析。有关更多信息，请参阅 视频分析。

样式

点击播放覆盖

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

验证

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