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 标签可在视频中启用字幕。如果字幕轨道托管在与文档不同的来源上，您必须向 <amp-video> 标签添加 crossorigin 属性。每当视频有旁白或重要音频信息时，请务必为可能听不到或关闭声音的用户添加字幕/说明。
• 视频开始之前的占位符
• 如果浏览器不支持 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

指定一个 URL 到 PNG/JPG/ICO 图像，该图像用作视频的艺术作品。如果 artwork 不存在，则 Media Session API 帮助程序会使用 schema.org 定义中的 image 字段、og:image 或网站的 favicon。

artist

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

album

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

title

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

分析

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

样式

点击播放覆盖层

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