amp-video

1.0 0.1

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

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-video-1.0.css">

用法

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>

在有效的 AMP 文档之外独立使用

Bento 允许您在非 AMP 页面中使用 AMP 组件，而无需提交完全有效的 AMP。您可以将这些组件放置在不支持 AMP 的框架和 CMS 的实现中。请阅读我们的指南 在非 AMP 页面中使用 AMP 组件 以了解更多信息。

交互性和 API 用法

Bento 组件通过其 API 具有高度的交互性。在 Bento 独立使用中，元素的 API 将取代 AMP 操作和事件以及 amp-bind。

可以通过在文档中包含以下脚本标签来访问 amp-video 组件 API

await customElements.whenDefined('amp-video');
const videoHandle = await video.getApi();

操作

amp-video API 允许您执行以下操作

play()

播放视频。

videoHandle.play();

pause()

暂停视频。

videoHandle.pause();

mute()

静音视频。

videoHandle.mute();

unmute()

取消静音视频。

videoHandle.unmute();

requestFullscreen()

尽可能将视频扩展到全屏。

videoHandle.requestFullscreen();

属性

它还公开以下只读属性

currentTime (数字)

当前播放时间，以秒为单位。

console.log(videoHandle.currentTime);

duration (数字)

视频的持续时间，以秒为单位，当已知时（例如，不是直播）。

console.log(videoHandle.duration);

autoplay (布尔值)

视频是否自动播放。

console.log(videoHandle.autoplay);

controls (布尔值)

视频是否显示控件。

console.log(videoHandle.controls);

loop (布尔值)

视频是否循环播放。

console.log(videoHandle.loop);

属性

src

如果没有 <source> 子元素，则为必填项。必须为 HTTPS。

poster

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

或者，您可以呈现点击播放覆盖。

autoplay

如果存在此属性，并且浏览器支持自动播放，则视频会在变为可见时立即自动播放。组件需要满足一些播放条件，这些条件在 AMP 规范中的视频中概述。

controls

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

controlsList

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

loop

如果存在，则视频会在到达末尾时自动循环回开头。

crossorigin

如果 track 资源托管在与文档不同的源上，则为必填项。

disableremoteplayback

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

muted（已弃用）

muted 属性已弃用，不再起作用。autoplay 属性会自动控制静音行为。

noaudio

将视频注释为没有音频。这具有以下影响

• 设置 autoplay 时，不会绘制均衡器图标。

• 包含此视频的 <amp-story> 不会绘制不必要的静音按钮。

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，则 Media Session API 助手将使用 schema.org 定义中的 image 字段、og:image 或网站的 favicon。

artist

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

album

指示视频的专辑/收藏集，指定为字符串。

title

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

分析

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

样式

点击播放覆盖

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