數字廣告商必須了解的關於 AMP 視頻和屬性的一切

今天，數以百萬計的域使用 Accelerated Mobile Pages 框架發布了數十億個即時加載頁面。 該項目始於幾年前，不僅成功地幫助改善了網頁加載時間，還幫助改善了用戶體驗，從而提高了業務投資回報率。

它是通過降低頁面的“權重”——它們的大小數據——通過對 JavaScript 的限制、流行編碼語言的輕量級替代以及在谷歌的內容交付網絡上緩存來實現的。

然而，對項目最大的批評是它用參與換取速度。 雖然這曾經是真的——AMP 主要用於新聞網站的靜態內容——但現在已經不是這樣了。 現在 AMP 可用於構建整個網站，包括視頻等重型頁面元素的高速版本。 今天，我們準確概述了這些 AMP 視頻組件的工作原理，包括特定編碼術語、分析功能、佈局等的定義。

屬性

每個 AMP 視頻組件都帶有一組屬性。 有些重疊，有些是組件獨有的，每個都控制視頻行為或顯示方式的一個方面。

以下是您將在組件中找到的屬性列表，以及它們的含義。 這份清單並不全面。 最好在將組件添加到頁面之前仔細檢查組件的專用 AMP 開發人員頁面。

• src：如果沒有指定 <source>，則此元素是必需的。 它必須在 HTTPS 中指定。
• 海報：這指定在查看者單擊“播放”之前顯示的圖像縮略圖。 默認顯示第一幀。 您還可以選擇顯示疊加層，即點擊播放。
• autoplay：如果瀏覽器支持自動播放，您可以使用此屬性使視頻在訪問者可見時立即自動播放。
• 控件：使用此屬性，瀏覽器將提供用戶可以控制視頻播放器的控件。
• 控件列表：僅部分瀏覽器支持，控件列表允許用戶顯示可用於調整播放的控件。
• 停靠：當與 amp-video-docking 擴展結合使用時，當用戶滾動出其區域時，此屬性最小化視頻播放器並將其固定到角落。
• loop：如果實現，視頻會在到達結尾時自動循環回到開頭。
• crossorigin：如果視頻託管在原始文檔以外的其他地方，則此元素是必需的。
• disableremoteplayback：使用此元素，通過 Chromecast 或 AirPlay 等系統禁用遠程播放。
• noaudio：此屬性禁用視頻上的音頻。
• 旋轉全屏：如果啟用此屬性，當用戶轉動他們的設備時，視頻將調整為全屏。

通用屬性

通用屬性是適用於許多 AMP 組件的屬性。 在我們的 AMP 視頻組件列表中，當您看到對“通用屬性”的引用時，表示以下內容可以與它們一起使用。

倒退

通過回退，當瀏覽器不支持某個元素或加載失敗時，它會與查看器進行通信。 在下面的示例中，錯誤消息顯示為“無法在此設備上播放動畫圖像”。 回退可用於支持回退的任何 AMP 元素，並將代替不受支持的元素顯示。

高地

如果一個元素支持響應式佈局，它也支持高度屬性。 height 屬性是基於媒體表達式指定的，僅適用於高度。 允許使用百分比值。 如果高度為 80%，如下例所示，元素的高度將是其寬度的 80%。

佈局

layout 屬性指定元素的行為方式。 您可以通過添加具有元素支持的佈局值之一的佈局屬性來為組件指定佈局（稍後將詳細介紹這些值）。

媒體

大多數 AMP 元素都支持 media 屬性。 media 的值是一個媒體查詢。 如果查詢不匹配，則不會呈現該元素，並且不會獲取其資源及其潛在的子資源。 如果瀏覽器窗口改變大小或方向，媒體查詢會被重新評估，元素會根據新結果隱藏和顯示。

空載

在加載時，許多 AMP 元素會顯示一個基本的加載動畫，這表明正在處理該元素以供顯示。 noloading 屬性控制是否顯示該動畫。

佔位符

用 placeholder 屬性標記的元素將為其父元素顯示一個佔位符。 在下面的示例中，預覽圖像顯示為動畫 gif 的佔位符。 此屬性可用於作為支持佔位符的 AMP 元素的子元素的任何 HTML 元素。

默認情況下，佔位符將立即顯示在其父級的位置。 當資源被提供時，佔位符被隱藏，資源顯示在它的位置。

尺寸

如果 AMP 元素支持響應式佈局，則它也支持 size 屬性。 該屬性由媒體查詢基於當前用戶的窗口大小定義。

寬度和高度

在某些佈局中，必須為某些 AMP 組件指定包含像素值的寬度和高度屬性。

佈局

根據 AMP 開發人員資源，AMP 的 <amp-img> 和 <amp-video> 元素可以具有六種佈局中的一種，每種佈局都會使元素的行為有所不同：

反應靈敏

當一個元素響應時，它會自動調整大小以適應給定區域的空間。 可用空間取決於父元素。

但是，您不能簡單地將元素指定為響應式。 為了確保它顯示，您必須為包含元素指定寬度和高度。

無顯示

使用此佈局，您的元素將不會顯示。 它根本不會佔用屏幕上的空間。 它可以應用於任何 AMP 元素，並假設用戶操作可以使元素可見，例如懸停以啟用彈出窗口。

固有的

在這種佈局中，元素消耗可用空間，根據寬度和高度屬性調整其高度，直到達到自然大小或像 max-width 這樣的 CSS 約束。
該可用空間取決於父元素。

彈性項目

使用這種佈局，當它是一個靈活的容器時，它們的父元素將消耗該父元素的剩餘空間，例如“display:flex”。

固定高度

指定為固定高度的元素將調整以適應可用空間，但它們的高度將保持不變。 在這種情況下，必須存在高度屬性，而不能存在寬度屬性（如果存在，則等於零）。

固定的

固定元素具有固定的高度和寬度，並且不支持響應性。 要啟用此佈局，必須同時指定寬度和高度。

填

使用此佈局，元素將填充所有可用的高度和寬度。 只要父容器指定“position:relative”或“position:absolute”，它就會匹配其父元素的高度和寬度。

容器

與 HTML div 一樣，此佈局讓元素的子元素定義其大小。 有了容器，組件只是作為一個容器，本身沒有特定的佈局。 它的孩子立即呈現。

分析支持

雖然每個 AMP 視頻組件可能不具備其他視頻播放器具有的分析功能，但這並不意味著您無法跟踪非常具體的視頻性能指標。 以下是您可以跟踪的內容：

• 自動播放：指示視頻是否以自動播放視頻開始。
• currentTime：指定觸發時的當前播放時間（以秒為單位）。
• 持續時間：指定視頻的總持續時間（以秒為單位）。
• 高度：指定視頻的高度（以像素為單位）。
• id：指定視頻元素的ID。
• PlayTotal：指定用戶觀看視頻的總時間。
• state：表示狀態，可以是“playing_auto”、“playing_manual”或“paused”之一。
• 寬度：指定視頻的寬度（以像素為單位）。
• PlayRangesJson：表示用戶觀看視頻的時間段（JSON 格式）。

對於某些 AMP 視頻組件，您將能夠檢測到所有這些指標。 對於其他人，您只會獲得部分分析支持。 部分支持意味著除了currentTime、aduration、playedRangesJson和playedTotal 之外的所有都支持。 在 AMP 視頻組件部分，您將找到不同級別的分析支持。 在此處了解有關 AMP 視頻分析的更多信息。

AMP 視頻組件

放大器視頻

amp-video 組件是 HTML5 視頻標籤的替代品； 僅用於直接嵌入 HTML5 視頻文件。 amp-video 組件在運行時確定的時間延遲加載由其 src 屬性指定的視頻資源。 您可以像控制標準 HTML5 <video> 標籤一樣控制 amp-video 組件。

例子

分析支持：完整

所需腳本： <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

可用佈局： fill、fixed、fixed-height、flex-item、nodisplay、responsive

屬性： src、poster、autoplay、controls、controlsList、dock、loop、crossorigin、disableremoteplayback、noaudio、rotate-to-fullscreen、通用屬性

amp-3q 播放器

amp-3q-player 組件允許開發人員嵌入來自 3Q SDN 的視頻。

例子

分析支持：部分

所需腳本： <script async custom-element="amp-3q-player" src="https://cdn.ampproject.org/v0/amp-3q-player-0.1.js"></script>

可用佈局：填充、固定、彈性項目、響應式

屬性：自動播放（可選）、常用屬性

amp-brightcove

amp-brightcove 組件嵌入了一個視頻播放器，如 Brightcove 的視頻雲或 Brightcove 播放器中所示。

例子

分析支持：完整

所需腳本： <script async custom-element=”amp-brightcove” src=”https://cdn.ampproject.org/v0/amp-brightcove-0.1.js”></script>

可用佈局： fill、fixed、fixed-height、flex-item、nodisplay、responsive

屬性：數據帳戶、數據播放器或數據播放器 ID、數據嵌入、數據視頻 ID、數據播放列表 ID、數據引用者、數據參數-

amp-dailymotion

當 amp-dailymotion 組件顯示 Dailymotion 播放器中的視頻時。

例子

分析支持：部分

所需腳本： <script async custom-element=”amp-dailymotion” src=”https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js”></script>

可用佈局：填充、固定、固定高度、彈性項目、響應式

屬性： autoplay、data-videoid（必填）、data-mute（可選）、data-endscreen-enable（可選）、data-sharing-enable（可選）、data-start（可選）、data-ui-highlight（可選） )、data-ui-logo（可選）、data-info（可選）、data-param-*（可選）、dock、通用屬性

amp-facebook

amp-facebook 組件比此列表中的許多標籤具有更多的多功能性。 除了視頻之外，amp-facebook 標籤還可以顯示 Facebook 評論或帖子。

例子

分析支持：部分

所需腳本： <script async custom-element=”amp-facebook” src=”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”></script>

可用佈局： fill、fixed、fixed-height、flex-item、nodisplay、responsive

屬性： data-href（必需）、data-embed-as、data-align-center、data-locale（可選）、通用屬性

amp-gfycat

amp-gfycat 組件顯示來自 gfycat.com 的 GIF。

例子

分析支持：部分

所需腳本： <script async custom-element=”amp-gfycat” src=”https://cdn.ampproject.org/v0/amp-gfycat-0.1.js”></script>

可用佈局：填充、固定、固定高度、彈性項目、響應式

屬性： data-gfyid、寬高、noautoplay、常用屬性

安培葫蘆

amp-hulu 組件嵌入了來自 Hulu 的視頻。

例子

分析支持：部分

所需腳本： <script async custom-element="amp-hulu" src="https://cdn.ampproject.org/v0/amp-hulu-0.1.js"></script>

可用佈局：填充、固定、固定高度、彈性項目、響應式

屬性： data-eid、常用屬性

amp-ima-video

amp-ima-video 為插播視頻廣告嵌入了一個視頻播放器。 該組件需要一個在 data-tag 中提供的廣告標籤，它是一個指向符合 VAST 標準的廣告響應的網址（例如，請參閱 IMA 示例標籤）。

例子

分析支持：部分

所需腳本： <script async custom-element="amp-ima-video" src="https://cdn.ampproject.org/v0/amp-ima-video-0.1.js"></script>

可用佈局：固定，響應式

屬性： data-tag（必填）、data-src、data-crossorigin、data-poster（可選）、data-delay-ad-request（可選）、data-ad-label（可選）、dock、通用屬性

氨芐烯

amp-izlesene 組件允許用戶嵌入 Izlesene 視頻。

例子

分析支持：：部分

所需腳本： <script async custom-element="amp-izlesene" src="https://cdn.ampproject.org/v0/amp-izlesene-0.1.js"></script>

可用佈局：填充、固定、固定高度、彈性項目、響應式

屬性： data-videoid（必填）、data-param-showrel

amp-kaltura-播放器

amp-kaltura-player 組件使用戶能夠使用 Kaltura Video Platform 播放器嵌入視頻。

例子

分析支持：：部分

所需腳本： <script async custom-element=”amp-kaltura-player” src=”https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js”></script>

可用佈局：填充、固定、固定高度、彈性項目、無顯示、響應式

屬性： data-partner、data-uiconf、data-entryid、data-param-*、通用屬性。

amp-ooyala-播放器

amp-ooyala-player 允許用戶嵌入 Ooyala 視頻。

例子

分析支持：部分

所需腳本： <script async custom-element="amp-ooyala-player" src="https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js"></script>

可用佈局：填充、固定、彈性項目、響應式

屬性： data-embedcode（必填）、data-playerid（必填）、data-pcode（必填）、data-playerversion（可選）、data-config（可選）、常用屬性

amp-reach-player

amp-reach-player 組件允許用戶嵌入 Beachfront Reach 平台中的 Reach Player。

例子

分析支持：部分

所需腳本： <script async custom-element="amp-reach-player" src="https://cdn.ampproject.org/v0/amp-reach-player-0.1.js"></script>

可用佈局：填充、固定、固定高度、彈性項目、響應式

屬性： data-embed-id、常用屬性

放大器跳板播放器

amp-springboard-player 顯示在 Springboard 中使用的播放器。

例子

分析支持：部分

所需腳本： <script async custom-element="amp-springboard-player" src="https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js"></script>

可用佈局：填充、固定、彈性項目、響應式

屬性： date-site-id（必填）、data-mode（必填）、data-content-id（必填）、data-player-id（必填）、data-domain（必填）、data-items（必填）、共同屬性

放大器視頻對接

使用 amp-video-docking 擴展程序，可以將視頻最小化到頁面的一角或自定義定位元素，但前提是視頻是手動播放的。 當用戶滾動出視頻組件的區域時，視頻將最小化並移動到指定位置。 如果用戶向後滾動，它將返回到其原始位置。 此外…

• 視頻可以停靠在默認角落或自定義固定位置。
• 用戶可以將視頻拖動並重新定位到不同的角落。
• 可以輕彈視頻以從其停靠位置解除。
• 同一頁面上的多個視頻可以停靠，但一次只能停靠和修復一個。

默認情況下，視頻將最小化到右上角。 在視口寬度的 30% 處，寬度不小於 180 像素。 如果文檔是 RTL，視頻將停靠在左上角。 在此模式下，用戶可以拖動停靠的視頻以捕捉到任一角。

此擴展程序只能與受支持的視頻播放器一起使用。 目前，支持的播放器有：

• amp-brightcove
• amp-dailymotion
• amp-delight-player
• amp-ima-video
• 放大器視頻
• amp-video-iframe
• amp-youtube

同樣，只有在手動播放時，視頻才會停靠。 這意味著：

• 如果視頻有自動播放，除非用戶先點擊視頻，否則不會觸發該功能。
• 如果視頻沒有自動播放，除非用戶播放視頻，否則不會觸發該功能。
• 如果視頻在滾動時暫停，則不會停靠。

所需腳本： <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>

amp-video-iframe

amp-video-iframe 顯示一個包含視頻播放器的 iframe。 此組件不得用於顯示廣告的主要目的。 可以使用 amp-video-iframe 來顯示視頻，其中部分視頻是廣告。 但是廣告用例應該使用 amp-ad。

例子

為了使視頻集成工作，框架內的文檔必須包含一個小庫：

分析支持：部分

所需腳本： <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>

可用佈局：填充、固定、固定高度、彈性項目、內在、無顯示、響應式

屬性： src（必需）、海報（必需）、自動播放、通用屬性、dock、implements-media-session、implements-rotate-to-fullscreen

amp-vimeo

amp-vimeo 組件使用戶能夠嵌入來自 Vimeo 的視頻。

例子

分析支持：部分

所需腳本： <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>

可用佈局：填充、固定、固定高度、彈性項目、響應式

屬性： autoplay、data-videoid（必填）

amp-viqeo-播放器

amp-viqeo-player 顯示 Viqeo 視頻播放器。

例子

分析支持：部分

所需腳本： <script async custom-element=”amp-viqeo-player” src=”https://cdn.ampproject.org/v0/amp-viqeo-player-0.1.js”></script>

可用佈局：填充、固定、固定高度、彈性項目、響應式

屬性：自動播放、data-profileid、data-videoid、寬高

amp-wistia-player

amp-wistia-player 組件允許用戶嵌入。

例子

分析支持：部分

所需腳本： <script async custom-element="amp-wistia-player" src="https://cdn.ampproject.org/v0/amp-wistia-player-0.1.js"></script>

可用佈局：填充、固定、固定高度、彈性項目、響應式

屬性： data-media-hashed-id、常用屬性

amp-youtube

amp-youtube 組件允許創作者嵌入 YouTube 視頻。

例子

所需腳本： <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

屬性：自動播放、data-videoid、data-live-channelid、data-param-*、dock、憑證（可選）、通用屬性。

結論

AMP 網頁在顯示媒體方面不再受限制。 結合屬性、佈局和分析，AMP 視頻組件使創作者可以在不影響速度的情況下顯示豐富的可視化效果。 您準備好創建更快的移動點擊後登錄頁面了嗎？

立即開始（並完成）使用 Instapage AMP。