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` 屬性縮小至角落或自訂位置的元素。

如果此屬性存在且影片為手動播放，當使用者捲動離開影片元件的可視區域時，影片將會「停靠」並浮動於角落或自訂位置。如果使用者捲動回來，影片會恢復到原本的靜態位置。

• 影片可以停靠到預設角落或自訂的固定位置。
• 影片可以被使用者拖曳並重新定位到不同的角落。
• 影片可以被輕 flick 以從其停靠位置關閉。
• 同一頁面上的多個影片可以停靠，但一次只會有一個影片停靠並固定。

支援

此擴充功能與支援的影片播放器搭配使用。目前支援的播放器有

• 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 by Example。

屬性

不適用。amp-video-docking 未定義任何自訂元素。若要使用此擴充功能，請在合格的影片播放器元件上設定 dock 屬性。

活動

dock 和 undock

當影片因捲動而停靠或取消停靠時，系統會分別觸發低信任度事件 dock 和 undock。

這些可以觸發 amp-animation，例如滑動內容以騰出空間給停靠的元素。如需事件觸發停靠所需動畫的範例，請參閱 AMP by Example。

事件來源

根據停靠目標，對應的事件將從不同的來源元素觸發

• 從影片元素本身觸發，當影片停靠到角落時。
• 從插槽元素觸發，當影片停靠到插槽元素時。

您可以在影片或插槽上設定 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 規則。