amp-video-docking

<script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>

用法

amp-video-docking 组件允许通过 dock 属性将视频最小化到一个角或自定义位置的元素。

如果存在此属性，并且视频正在手动播放，当用户滚动出视频组件的可视区域时，视频将“停靠”并浮动在一个角或自定义位置。如果用户滚动回去，视频将恢复到其原始的静态位置。

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

支持

此扩展与 受支持的视频播放器 结合使用。目前，受支持的播放器有

• amp-brid-player
• amp-brightcove
• amp-connatix-player
• amp-dailymotion
• amp-delight-player
• amp-ima-video
• amp-jwplayer
• amp-video
• amp-video-iframe
• amp-youtube

触发条件

请注意，除非视频是手动播放，否则不会停靠视频。这意味着

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

停靠目标

在滚动时，视频将最小化到自动计算的角或自定义定义的位置。

角落

当使用空值设置 dock 属性时，视频将停靠到扩展定义的角

<amp-video src="my-video.mp4" ... dock></amp-video>

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

通过“插槽”自定义位置

当将 dock 属性设置为非空值时，视频将停靠到属性值中引用的“插槽元素”的相同位置，通过 CSS 选择器。

<amp-layout id="my-dock-slot" ...>
  <amp-video src="my-video.mp4" ... dock="#my-dock-slot"></amp-video
></amp-layout>

插槽元素必须始终是 amp-layout，这使我们能够利用 AMP 布局系统 以在插槽和视频之间保持相同的尺寸属性。

为了使自定义定位正常工作，插槽元素必须为 position: fixed.

组合角落和自定义位置行为

当元素目标不可见时，将拒绝自定义定位。这意味着可以根据布局通过 CSS 媒体查询 来选择角落目标或插槽元素。有关在不同布局条件下组合和应用目标类型的示例，请参阅 AMP 实例。

属性

不适用。amp-video-docking 未定义任何自定义元素。要使用此扩展，请在 符合条件的视频播放器组件 上设置 dock 属性。

活动

dock 和 undock

当视频通过滚动停靠或取消停靠时，低信任事件 dock 和 undock 将分别触发。

例如，这些事件可以触发 amp-animation，该动画会滑动内容以腾出停靠元素的空间。有关事件触发停靠所需的动画的示例，请参阅 AMP 实例。

事件源

根据 停靠目标，将从不同的源元素触发相应事件

• 来自视频元素本身，当视频停靠到角落时。
• 来自插槽元素，当视频停靠到插槽元素时。

您可以在视频或插槽上设置 dock/undock 操作触发器，以便在组合目标类型时以不同的方式更改布局。

样式

停靠的视频可以通过选择此扩展创建的元素来设置样式。

.amp-docked-video-shadow

引用一个在视频下方绘制 box-shadow 的图层。可以覆盖或删除阴影。当视频正在停靠时，其不透明度将从 0 更改为 1。

.amp-docked-video-controls

引用一个包含停靠视频控件的图层。通常，不需要设置此样式。有关背景图层，请参阅 .amp-docked-video-controls-bg。

当在小区域（宽小于 300 像素）中呈现时，此元素还会应用类名 amp-small，而不在小区域中呈现时则应用类名 amp-large。

.amp-docked-video-controls-bg

引用一个在视频上和控件下绘制覆盖背景的图层。仅在显示控件时显示该图层。可以覆盖或删除其背景。

.amp-video-docked-main-button-group

一个包含一组按钮的控件组。一次仅显示其中一个元素，具体取决于视频的状态

• 播放集显示在大多数场景中，包含播放/暂停、静音/取消静音和全屏按钮。

• 回滚设置只包含一个按钮，用于将文档滚动回视频的内嵌位置。这在广告播放期间显示，以便允许用户交互。

关闭按钮不是控件设置的一部分，且始终显示。

.amp-docked-video-button-group

一个按钮“组”，通常包含两个按钮，一次只显示一个。当按钮处于活动状态时，它用于绘制背景。它有一个border-radius和一个background-color默认设置，两者都可以移除或覆盖。

直接子项（.amp-docked-video-button-group > [role=button]）表示按钮，它们有 SVG 背景。可以通过修改fill属性来更改 SVG 的颜色。此外，可以通过更改background属性来替换它们。

.amp-docked-video-play

表示play按钮。

.amp-docked-video-pause

表示pause按钮。

.amp-docked-video-mute

表示mute按钮。

.amp-docked-video-unmute

表示unmute按钮。

.amp-docked-video-fullscreen

表示fullscreen按钮。

.amp-docked-video-scroll-back

表示一个按钮，用于在广告播放期间将文档滚动回视频的内嵌位置，以便允许用户交互。

此按钮与其他控制按钮不同，因为.amp-docked-video-controls容器上的amp-small/amp-large类名不会影响它。由于它是其集合中的唯一按钮，因此它也比其他按钮更大，为 64 x 64 像素。其他控制按钮的大小为 40 x 40 像素。

此按钮的图标（通过background-image CSS 属性设置）会根据停靠区域的相对方向而改变。当视频从左到右停靠时，.amp-docked-video-controls容器不会获得任何其他类名，但当视频从相反方向停靠时，它将获得amp-rtl类名。这允许按钮绘制成箭头，指向正确方向。

.amp-video-docked-placeholder-background

表示放置在空组件区域上的占位元素的容器。

.amp-video-docked-placeholder-background-poster

表示在空组件区域上显示视频的poster或placeholder图像的图层。默认情况下模糊处理。

.amp-video-docked-placeholder-icon

表示显示在空组件区域上的 UX 可用性的动画图标。

当在小视口中（宽度小于 420 像素）呈现时，此元素还会获得类名 amp-small。当从右到左动画时，它还会获得类名 amp-rtl。

验证

请参阅 AMP 验证器规范中的 amp-video-docking 规则。