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，则视频将停靠到左上角。在这种模式下，用户可以拖动停靠的视频以捕捉到任一角落。

通过“slot”自定义位置

当将 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 类名的影响。因为它在它的集合中是唯一的按钮，所以它也比其他按钮大，尺寸为 64x64 像素。其他控制按钮的尺寸为 40x40 像素。

此按钮的图标（通过 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 规则。