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 规则。