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

指定一个 URL，指向用作视频作品的 PNG/JPG/ICO 图像。 如果 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 规则。