Important: this documentation is not applicable to your currently selected format email!
amp-video
Description
替代 HTML5 视频标记。
Required Scripts
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Supported Layouts
替代 HTML5 video 标记；仅用于直接嵌入 HTML5 视频文件。
| 必需的脚本 | <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script> |
| 示例 | AMP By Example 的： |
| 支持的布局 | fill、fixed、fixed-height、flex-item、nodisplay、responsive |
行为
amp-video 组件将按照运行时确定的时间延迟加载通过其 src 属性指定的视频资源。您可以大体上按照控制标准 HTML5 <video> 标记的方式控制 amp-video 组件。
amp-video 组件最多接受四种不同类型的 HTML 节点作为子级：
source标记：和在 HTML<video>标记中一样，您可以添加<source>标记子级，以指定要播放的不同源媒体文件。track标记，用于在视频中启用字幕。如果字幕轨托管在文档之外的其他来源，那么您必须将crossorigin属性添加到<amp-video>标记中。- 视频播放前使用的占位符
- 回调（如果浏览器不支持 HTML5 视频）：一个或零个直接子节点可以具有
fallback属性。如果存在此节点，则在用户的浏览器不支持 HTML5 视频时，则显示此节点及其子级的内容。
示例
This browser does not support the video element.
<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-video 自动支持分析功能。如需了解更多信息，请参阅视频分析。
属性
| src | 如果不存在 <source> 子级，则该属性为必需的属性。必须为 HTTPS。 |
| poster | 视频开始播放之前显示的帧的图片。默认情况下，显示第一帧。 或者，您也可以显示点击播放叠加层。如需了解详情，请参阅下面的点击播放叠加层部分。 |
| autoplay | 如果此属性存在并且浏览器支持自动播放，则视频将在变为可见时自动播放。该组件需要满足一些条件才能播放，在“AMP 中的视频”规范中列出了这些条件。 |
| controls | 此属性类似于 HTML5 video 中的 controls 属性。如果此属性存在，浏览器将提供相应控件，以便用户控制视频播放。 |
| controlsList | 与 HTML5 视频元素的 controlsList 属性相同。只有某些浏览器支持此属性。如需了解详情，请参阅 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsList。 |
| dock | 需要 amp-video-docking 扩展。 如果此属性存在并且视频通过手动方式播放，则当用户滚动到视频组件的可视区域以外时，视频将“最小化”并固定到角落或某个元素。如需了解更多详情，请参阅关于 docking 扩展的文档。 |
| loop | 如果此属性存在，则视频在播放完毕后会自动循环至开始位置。 |
| crossorigin | 如果 track 资源托管在文档之外的其他来源，则此属性为必需的属性。 |
| disableremoteplayback | 确定是否允许媒体元素具有远程播放界面（如 Chromecast 或 AirPlay）。 |
| muted（已弃用） | muted 属性已被弃用且不再有效。autoplay 属性会自动控制静音行为。 |
| noaudio | 将视频注释为没有音频。这会在视频具有 autoplay 属性时隐藏已显示的均衡器图标。 |
| rotate-to-fullscreen | 如果视频可见，则在用户将设备旋转到横屏模式后会全屏显示。如需了解更多详情，请参阅“AMP 中的视频”规范。 |
| 常见属性 | 此元素包含扩展到 AMP 组件的常见属性。 |
Media Session API 属性
amp-video 组件可实现 Media Session API，以便开发者指定关于视频文件的更多信息。关于视频的其他信息将显示在用户设备的通知中心内（该中心内还会显示播放/暂停控件）。
| artwork | 指定用作视频海报图片的 PNG/JPG/ICO 图片对应的网址。如果 `artwork` 属性不存在，则 Media Session API 帮助程序将使用 `schema.org` 定义中的 `image` 字段、`og:image` 或网站的 `favicon`。 |
| artist | 以字符串形式指定视频文件的作者。 |
| album | 以字符串形式指定从哪个专辑/集合获取视频。 |
| title | 以字符串形式指定视频的名称/标题。如果未提供此属性，Media Session API 帮助程序将使用 `aria-label` 属性或回退到网页标题。 |
示例：
此示例同时包含 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>
点击播放叠加层
网站上的视频播放器提供点击播放叠加层是一种常见的用户体验功能。例如，您可以显示自定义播放图标供用户点击，也可以添加视频标题、不同尺寸的海报图片，等等。由于 amp-video 组件支持标准的 play AMP 操作，因此您可以轻松实现点击播放。
如需查看详细示例，请访问 AMP By Example 的 amp-video 的点击播放叠加层。
验证
请参阅 AMP 验证工具规范中的 amp-video 规则。
您已多次阅读本文档，但它仍未能涵盖您的所有问题？也许其他人也这么觉得：在 Stack Overflow 上与他们联系。
前往 Stack Overflow 发现错误或缺少功能？AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。
前往 GitHub