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