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 元素時。

您可以將 dock/undock 動作觸發器設定在影片或 slot 上，以便在組合目標類型時以不同方式變更您的版面配置。

樣式

可以透過選取由此擴充功能建立的元素來設定停靠影片的樣式。

.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 規則。