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

将视频标注为没有音频。这会隐藏在视频自动播放时显示的均衡器图标。

在故事中，此属性将有效地使视频静音。

volume

设置视频的当前音量，该值必须在 [0, 1] 范围内。默认值为 1。

使用 volume 属性时，如果故事中的其他视频没有 crossorigin 属性（如果源是 CORS），则可能无法正确播放。

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

cache

通过添加 cache="google" 指示 Google 视频缓存应存储并提供视频。视频缓存将定期获取并存储视频内容，从而降低视频的提供成本，并生成具有不同质量设置的转码，这些设置会将比特率调整为网络条件。

分析

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

样式

点击播放覆盖

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

验证

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