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 组件的通用属性。

Media Session 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 视频播放器常见的用户体验功能。例如，您可以显示用户可以点击的自定义播放图标，以及包含视频标题、不同大小的预览图像等等。由于 amp-video 组件支持标准的 play AMP 操作，您可以轻松实现点击播放。