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 选择器引用的“slot 元素”的相同位置。

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

slot 元素必须始终是一个amp-layout，这允许我们利用AMP 布局系统，以便在 slot 和视频之间保持相同的大小调整属性。

为了使自定义定位正常工作，slot 元素必须是position: fixed。

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

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

属性

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

活动

dock 和 undock

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

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

事件源

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

• 当视频停靠到角落时，从视频元素本身触发。
• 当视频停靠到 slot 元素时，从 slot 元素触发。

您可以在视频或 slot 上设置 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 规则。