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 标签可在视频中启用字幕。如果轨道托管在与文档不同的来源，则必须将 crossorigin 属性添加到 <amp-video> 标签。当视频有旁白或重要的音频信息时，请务必为可能听不到或已关闭声音的用户添加字幕/说明。
• 视频开始前的占位符
• 如果浏览器不支持 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，使开发人员可以指定有关视频文件的更多信息。视频的附加信息会显示在用户设备的通知中心（以及播放/暂停控件）。

此示例包含 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，则媒体会话 API 助手会使用 schema.org 定义中的 image 字段、og:image 或网站的 favicon。

artist

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

album

指示从中获取视频的专辑/合集，指定为字符串。

title

指示视频的名称/标题，指定为字符串。如果未提供，则媒体会话 API 助手会使用 aria-label 属性，或回退到页面的标题。

分析

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

样式

点击播放覆盖层

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

验证

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