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 (number)

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

console.log(videoHandle.currentTime);

duration (number)

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

console.log(videoHandle.duration);

autoplay (boolean)

视频是否自动播放。

console.log(videoHandle.autoplay);

controls (boolean)

视频是否显示控件。

console.log(videoHandle.controls);

loop (boolean)

视频是否循环播放。

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

指定指向 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 操作，因此您可以轻松实现点击播放。