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 开箱即用地支持分析。有关更多信息，请参阅 视频分析。

样式

点击播放覆盖层

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

验证

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