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

已发表: 2019-05-28

快速链接
  1. 属性
  2. 常用属性
  3. 布局
  4. 分析支持
  5. AMP 视频组件
  6. 结论

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

它是通过降低页面的“权重”——它们的大小数据——通过对 JavaScript 的限制、流行编码语言的轻量级替代以及在谷歌的内容交付网络上缓存来实现的。

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

属性

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

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

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

通用属性

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

倒退

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

AMP 视频后备属性

高地

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

AMP 视频高度属性

布局

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

AMP 视频布局属性

媒体

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

AMP 视频媒体属性

空载

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

AMP 视频无加载属性

占位符

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

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

AMP 视频占位符属性

尺寸

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

AMP 视频尺寸属性

宽度和高度

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

AMP 视频宽度高度属性

布局

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

反应灵敏

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

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

无显示

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

固有的

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

弹性项目

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

固定高度

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

固定的

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

填

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

容器

与 HTML div 一样，此布局让元素的子元素定义其大小。 有了容器，组件只是作为一个容器，本身没有特定的布局。 它的孩子立即呈现。

分析支持

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

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

对于某些 AMP 视频组件，您将能够检测到所有这些指标。 对于其他人，您只会获得部分分析支持。 部分支持意味着除了currentTime、aduration、playedRangesJson和playedTotal 之外的所有都支持。 在 AMP 视频组件部分，您将找到不同级别的分析支持。 在此处了解有关 AMP 视频分析的更多信息。

AMP 视频组件

放大器视频

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

例子

AMP 视频组件

分析支持：完整

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

可用布局： fill、fixed、fixed-height、flex-item、nodisplay、responsive

属性： src、poster、autoplay、controls、controlsList、dock、loop、crossorigin、disableremoteplayback、noaudio、rotate-to-fullscreen、通用属性

amp-3q 播放器

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

例子

AMP 媒体 3q 播放器

分析支持：部分

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

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

属性：自动播放（可选）、常用属性

amp-brightcove

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

例子

AMP 媒体 Brightcove

分析支持：完整

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

可用布局： fill、fixed、fixed-height、flex-item、nodisplay、responsive

属性：数据帐户、数据播放器或数据播放器 ID、数据嵌入、数据视频 ID、数据播放列表 ID、数据引用者、数据参数-

amp-dailymotion

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

例子

AMP 媒体 Dailymotion

分析支持：部分

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

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

属性： autoplay、data-videoid（必填）、data-mute（可选）、data-endscreen-enable（可选）、data-sharing-enable（可选）、data-start（可选）、data-ui-highlight（可选） )、data-ui-logo（可选）、data-info（可选）、data-param-*（可选）、dock、通用属性

amp-facebook

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

例子

AMP 媒体脸书

分析支持：部分

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

可用布局： fill、fixed、fixed-height、flex-item、nodisplay、responsive

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

amp-gfycat

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

例子

AMP 媒体 Gfycat

分析支持：部分

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

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

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

安培葫芦

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

例子

AMP 媒体 Hulu

分析支持：部分

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

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

属性： data-eid、常用属性

amp-ima-video

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

例子

AMP 媒体 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 视频。

例子

AMP 媒体 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 Video Platform 播放器嵌入视频。

例子

AMP 媒体 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 视频。

例子

AMP 媒体 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

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

例子

AMP 媒体到达播放器

分析支持：部分

所需脚本： <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 中使用的播放器。

例子

AMP 媒体跳板播放器

分析支持：部分

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

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

属性： date-site-id（必填）、data-mode（必填）、data-content-id（必填）、data-player-id（必填）、data-domain（必填）、data-items（必填）、共同属性

放大器视频对接

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

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

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

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

  • amp-brightcove
  • amp-dailymotion
  • amp-delight-player
  • amp-ima-video
  • 放大器视频
  • 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。

例子

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

AMP 视频 iframe

分析支持：部分

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

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

属性： src（必需）、海报（必需）、自动播放、通用属性、dock、implements-media-session、implements-rotate-to-fullscreen

amp-vimeo

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

例子

AMP 媒体 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 视频播放器。

例子

AMP 媒体 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-player

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

例子

AMP 媒体 Wistia 播放器

分析支持：部分

所需脚本： <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>

属性：自动播放、data-videoid、data-live-channelid、data-param-*、dock、凭证（可选）、通用属性。

结论

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

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