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

指定一个指向 PNG/JPG/ICO 图像的 URL，该图像用作视频的插图。如果不存在 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 操作，因此您可以轻松实现点击播放。