数字广告商必须了解的有关 AMP 视频和属性的一切

如今，数百万域已使用 Accelerated Mobile Pages 框架发布了数十亿个即时加载页面。 几年前开始的这个项目不仅成功地帮助改善了网页加载时间，还改善了用户体验，从而提高了业务投资回报率。

它是通过降低页面的“重量”（它们的大小数据）来实现的，其中包括对 JavaScript 的限制、流行编码语言的轻量级替换以及在 Google 的内容交付网络上的缓存。

然而，该项目最大的批评是它以参与换取速度。 虽然这曾经是真的——AMP 主要用于静态内容的新闻网站——但现在已经不是了。 现在 AMP 可用于构建整个网站，包括视频等大型页面元素的高速版本。 今天，我们将准确概述这些 AMP 视频组件的工作原理，具体到特定编码术语、分析功能、布局等的定义。

属性

每个 AMP 视频组件都带有一组属性。 有些是重叠的，有些是组件独有的，并且每个都控制着视频行为或显示方式的一个方面。

以下是您将在组件中找到的属性列表及其含义。 此列表并不全面。 在将组件添加到您的页面之前，最好仔细检查组件的专用 AMP 开发人员页面。

• src：如果未指定 <source>，则此元素是必需的。 它必须在 HTTPS 中指定。
• 海报：这指定了在查看者单击“播放”之前显示的图像缩略图。 默认显示第一帧。 您还可以选择显示叠加层，即点击播放。
• 自动播放：如果浏览器支持自动播放，您可以使用此属性让视频在访问者看到时自动播放。
• controls：有了这个属性，浏览器将提供用户可以控制视频播放器的控件。
• controlsList：仅部分浏览器支持，controlsList允许用户显示可用于调整播放的控件。
• dock：当与 amp-video-docking 扩展结合使用时，此属性会在用户滚动出其区域时最小化视频播放器并将其固定在角落。
• loop：如果实现，视频到达结尾时会自动循环回到开头。
• crossorigin：如果视频托管在原始文档以外的其他地方，则此元素是必需的。
• disableremoteplayback：使用此元素，通过 Chromecast 或 AirPlay 等系统禁用远程播放。
• noaudio：此属性禁用视频上的音频。
• rotate-to-fullscreen：如果启用此属性，当用户转动他们的设备时，视频将调整为全屏。

共同属性

通用属性适用于许多 AMP 组件。 在我们的 AMP 视频组件列表中，当您看到对“通用属性”的引用时，这意味着它们可以使用以下内容。

倒退

通过回退，浏览器将在不支持某个元素或加载失败时与查看器进行通信。 在下面的示例中，错误消息显示为“无法在此设备上播放动画图像”。 后备可以用在任何支持后备的 AMP 元素上，并将显示在不受支持的元素的位置。

高地

如果一个元素支持响应式布局，它也支持 height 属性。 height 属性是根据媒体表达式指定的，仅适用于高度。 允许使用百分比值。 如果高度为 80%，如下例所示，元素的高度将是其宽度的 80%。

布局

布局属性指定元素的行为方式。 您可以通过为元素添加具有支持的布局值之一的布局属性来指定组件的布局（稍后会详细介绍）。

媒体

大多数 AMP 元素都支持媒体属性。 media 的值是媒体查询。 如果查询不匹配，则不会呈现该元素，并且不会获取其资源及其子资源。 如果浏览器窗口改变大小或方向，媒体查询将重新评估，并根据新结果隐藏和显示元素。

空载

在加载时，许多 AMP 元素会显示基本的加载动画，这表明正在处理该元素以供显示。 noloading 属性控制是否显示该动画。

占位符

标有 placeholder 属性的元素将为其父元素显示一个占位符。 在下面的示例中，预览图像显示为动画 gif 的占位符。 此属性可用于作为支持占位符的 AMP 元素的子元素的任何 HTML 元素。

默认情况下，占位符将立即显示在其父项的位置。 当资源被提供时，占位符被隐藏，资源显示在它的位置。

尺码

如果 AMP 元素支持响应式布局，它也支持 sizes 属性。 该属性由基于当前用户窗口大小的媒体查询定义。

宽度和高度

在某些布局中，必须为某些 AMP 组件指定包含像素值的宽度和高度属性。

布局

根据 AMP 开发人员资源，AMP 的 <amp-img> 和 <amp-video> 元素可以有六种布局之一，每种布局都会使元素表现不同：

反应灵敏

当一个元素变成响应式时，它会自动调整大小以适应给定区域的空间。 可用空间取决于父元素。

但是，您不能简单地将元素指定为响应式。 为确保它显示，您必须指定包含元素的宽度和高度。

无显示

使用此布局，您的元素将不会显示。 它根本不会占用屏幕空间。 它可以应用于任何 AMP 元素，并假定用户操作可以使元素可见，例如悬停以启用弹出窗口。

固有的

在这种布局中，元素会消耗可用空间，根据 width 和 height 属性调整其高度，直到达到自然大小或 CSS 约束（如 max-width）。
该可用空间取决于父元素。

弹性项目

使用这种布局，当它是一个灵活的容器时，其父元素中的元素将占用该父元素的剩余空间，如“display: flex”。

固定高度

指定为固定高度的元素将调整以适应可用空间，但它们的高度将保持不变。 在这种情况下，高度属性必须存在，而宽度属性不得存在（或者如果存在，则等于零）。

固定的

固定元素具有固定的高度和宽度，并且不支持响应性。 要启用此布局，必须指定宽度和高度。

充满

使用此布局，元素将填充所有可用的高度和宽度。 只要父容器指定“position:relative”或“position:absolute”，它就会匹配其父元素的高度和宽度。

容器

与 HTML div 一样，此布局允许元素的子元素定义其大小。 使用容器，组件仅作为容器，本身没有特定的布局。 它的孩子立即呈现。

分析支持

虽然每个 AMP 视频组件可能不具备其他视频播放器所具有的分析功能，但这并不意味着您无法跟踪非常具体的视频性能指标。 以下是您将能够跟踪的内容：

• 自动播放：指示视频是否以自动播放视频开始。
• currentTime：指定触发时的当前播放时间（以秒为单位）。
• 持续时间：指定视频的总持续时间（以秒为单位）。
• height：指定视频的高度（以像素为单位）。
• id：指定视频元素的ID。
• playedTotal：指定用户观看视频的总时间。
• state：表示状态，可以是“playing_auto”、“playing_manual”或“paused”。
• width：指定视频的宽度（以像素为单位）。
• playedRangesJson：表示用户观看视频的时间段（JSON 格式）。

对于某些 AMP 视频组件，您将能够检测到所有这些指标。 对于其他人，您将只有部分分析支持。 部分支持是指除currentTime、aduration、playedRangesJson、 playedTotal外全部支持。 在 AMP 视频组件部分，您会找到分析支持级别。 在此处查找有关 AMP 视频分析的更多信息。

AMP 视频组件

放大器视频

amp-video 组件是 HTML5 video 标签的替代品； 仅用于直接嵌入 HTML5 视频文件。 amp-video 组件延迟加载由其 src 属性指定的视频资源，时间由运行时确定。 您可以像控制标准 HTML5 <video> 标签一样控制 amp-video 组件。

例子

分析支持：完整

需要脚本： <script async custom-element=”amp-video” src=”https://cdn.ampproject.org/v0/amp-video-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、无显示、响应式

属性： src, poster, autoplay, controls, controlsList, dock, loop, crossorigin, disableremoteplayback, noaudio, rotate-to-fullscreen, common attributes

amp-3q-播放器

amp-3q-player 组件允许开发人员嵌入来自 3Q SDN 的视频。

示例

分析支持：部分

所需脚本： <script async custom-element=”amp-3q-player” src=”https://cdn.ampproject.org/v0/amp-3q-player-0.1.js”></script>

可用布局：填充、固定、弹性项目、响应式

属性： autoplay（可选），常用属性

amp-brightcove

amp-brightcove 组件嵌入了一个视频播放器，如 Brightcove 的视频云或 Brightcove 播放器所示。

例子

分析支持：完整

所需脚本： <script async custom-element=”amp-brightcove” src=”https://cdn.ampproject.org/v0/amp-brightcove-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、无显示、响应式

属性： data-account, data-player or data-player-id, data-embed, data-video-id, data-playlist-id, data-referrer, data-param-

amp-dailymotion

当 amp-dailymotion 组件显示来自 Dailymotion 播放器的视频时。

例子

分析支持：部分

所需脚本： <script async custom-element=”amp-dailymotion” src=”https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、响应式

属性: autoplay, data-videoid (required), data-mute (optional), data-endscreen-enable (optional), data-sharing-enable (optional), data-start (optional), data-ui-highlight (optional) ), data-ui-logo (可选), data-info (可选), data-param-* (可选), dock, 公共属性

amp-facebook

amp-facebook 组件比此列表中的许多标签具有更多的通用性。 除了视频之外，amp-facebook 标签还可以显示 Facebook 评论或帖子。

例子

分析支持：部分

所需脚本： <script async custom-element=”amp-facebook” src=”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、无显示、响应式

属性： data-href（必填）、data-embed-as、data-align-center、data-locale（可选）、常用属性

amp-gfycat

amp-gfycat 组件显示来自 gfycat.com 的 GIF。

例子

分析支持：部分

所需脚本： <script async custom-element=”amp-gfycat” src=”https://cdn.ampproject.org/v0/amp-gfycat-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、响应式

属性： data-gfyid、宽高、noautoplay、常用属性

扩音器

amp-hulu 组件嵌入了来自 Hulu 的视频。

例子

分析支持：部分

所需脚本： <script async custom-element=”amp-hulu” src=”https://cdn.ampproject.org/v0/amp-hulu-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、响应式

属性： data-eid，常用属性

amp-ima-视频

amp-ima-video 为插播视频广告嵌入了一个视频播放器。 该组件需要一个在数据标签中提供的广告标签，它是一个指向符合 VAST 的广告响应的 URL（例如，请参阅 IMA 样本标签）。

例子

分析支持：部分

所需脚本： <script async custom-element=”amp-ima-video” src=”https://cdn.ampproject.org/v0/amp-ima-video-0.1.js”></script>

可用布局：固定、响应式

属性： data-tag（必填）、data-src、data-crossorigin、data-poster（可选）、data-delay-ad-request（可选）、data-ad-label（可选）、dock、常用属性

安培烯

amp-izlesene 组件允许用户嵌入 Izlesene 视频。

例子

分析支持：：部分

需要脚本： <script async custom-element=”amp-izlesene” src=”https://cdn.ampproject.org/v0/amp-izlesene-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、响应式

属性： data-videoid（必填），data-param-showrel

amp-kaltura-播放器

amp-kaltura-player 组件使用户能够使用 Kaltura 视频平台播放器嵌入视频。

例子

分析支持：：部分

需要脚本： <script async custom-element=”amp-kaltura-player” src=”https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、无显示、响应式

属性： data-partner、data-uiconf、data-entryid、data-param-*、公共属性。

amp-ooyala-播放器

amp-ooyala-player 允许用户嵌入 Ooyala 视频。

例子

分析支持：部分

需要脚本： <script async custom-element=”amp-ooyala-player” src=”https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js”></script>

可用布局：填充、固定、弹性项目、响应式

属性： data-embedcode（必填）、data-playerid（必填）、data-pcode（必填）、data-playerversion（可选）、data-config（可选）、常用属性

功放播放器

amp-reach-player 组件允许用户嵌入在 Beachfront Reach 平台中找到的 Reach Player。

例子

分析支持：部分

需要脚本： <script async custom-element=”amp-reach-player” src=”https://cdn.ampproject.org/v0/amp-reach-player-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、响应式

属性： data-embed-id，常用属性

放大器跳板播放器

amp-springboard-player 显示 Springboard 中使用的播放器。

例子

分析支持：部分

需要脚本： <script async custom-element=”amp-springboard-player” src=”https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js”></script>

可用布局：填充、固定、弹性项目、响应式

属性: date-site-id (required), data-mode (required), data-content-id (required), data-player-id (required), data-domain (required), data-items (required),共同属性

放大器视频对接

使用 amp-video-docking 扩展，视频可以最小化到页面的一角或自定义定位的元素，但前提是视频是手动播放的。 当用户滚动出视频组件的区域时，视频将最小化并移动到指定位置。 如果用户向后滚动，它将返回到原来的位置。 此外…

• 视频可以停靠在默认角落或自定义固定位置。
• 用户可以将视频拖动并重新定位在不同的角落。
• 可以轻弹视频以使其从停靠位置消失。
• 同一页面可以停靠多个视频，但一次只能停靠固定一个。

默认情况下，视频将最小化到右上角。 在视口宽度的 30% 处，宽度不少于 180 像素。 如果文档是 RTL，视频将停靠在左上角。 在此模式下，用户可以拖动停靠的视频以捕捉到任一角。

此扩展只能与受支持的视频播放器一起使用。 目前支持的播放器有：

• amp-brightcove
• amp-dailymotion
• amp-delight-播放器
• amp-ima-视频
• 放大器视频
• amp-video-iframe
• amp-youtube

同样，视频只有在手动播放时才会停靠。 这意味着：

• 如果视频有自动播放功能，除非用户先点击视频，否则不会触发该功能。
• 如果视频没有自动播放功能，除非用户播放视频，否则不会触发该功能。
• 如果视频在滚动时暂停，则不会停靠。

需要脚本： <script async custom-element=”amp-video-docking” src=”https://cdn.ampproject.org/v0/amp-video-docking-0.1.js”></script>

amp-video-iframe

amp-video-iframe 显示包含视频播放器的 iframe。 此组件不得用于显示广告的主要目的。 出于显示视频的目的使用 amp-video-iframe 是可以的，其中部分视频是广告。 但是广告用例应该改用 amp-ad。

例子

为了使视频集成工作，框架内的文档必须包含一个小型库：

分析支持：部分

需要脚本： <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、固有、无显示、响应式

属性： src（必填）、poster（必填）、autoplay、公共属性、dock、implements-media-session、implements-rotate-to-fullscreen

amp-vimeo

amp-vimeo 组件使用户能够嵌入来自 Vimeo 的视频。

例子

分析支持：部分

需要脚本： <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、响应式

属性： autoplay，data-videoid（必填）

amp-viqeo-播放器

amp-viqeo-player 显示 Viqeo 视频播放器。

例子

分析支持：部分

需要脚本： <script async custom-element=”amp-viqeo-player” src=”https://cdn.ampproject.org/v0/amp-viqeo-player-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、响应式

属性：自动播放、data-profileid、data-videoid、宽高

amp-wistia-播放器

amp-wistia-player 组件允许用户嵌入。

例子

分析支持：部分

需要脚本： <script async custom-element=”amp-wistia-player” src=”https://cdn.ampproject.org/v0/amp-wistia-player-0.1.js”></script>

可用布局：填充、固定、固定高度、弹性项目、响应式

属性： data-media-hashed-id，常用属性

amp-youtube

amp-youtube 组件允许创作者嵌入 YouTube 视频。

例子

需要脚本： <script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

属性： autoplay、data-videoid、data-live-channelid、data-param-*、dock、credentials（可选）、公共属性。

结论

AMP 网页在显示媒体方面不再受限。 结合属性、布局和分析，AMP 视频组件使创作者能够在不影响速度的情况下显示丰富的可视化效果。 您准备好创建更快的移动点击后登录页面了吗？

立即开始（并完成）Instapage AMP。