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

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

它是通過降低頁面的“重量”（它們的大小數據）來實現的，其中包括對 JavaScript 的限制、流行編碼語言的輕量級替換以及在 Google 的內容交付網絡上的緩存。

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

屬性

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

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

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

共同屬性

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

倒退

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

高地

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

佈局

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

媒體

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

空載

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

佔位符

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

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

尺碼

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

寬度和高度

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

佈局

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

反應靈敏

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

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

無顯示

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

固有的

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

彈性項目

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

固定高度

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

固定的

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

充滿

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

容器

與 HTML div 一樣，此佈局允許元素的子元素定義其大小。 使用容器，組件僅作為容器，本身沒有特定的佈局。 它的孩子立即呈現。

分析支持

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

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

對於某些 AMP 視頻組件，您將能夠檢測到所有這些指標。 對於其他人，您將只有部分分析支持。 部分支持是指除currentTime、aduration、playedRangesJson、 playedTotal外全部支持。 在 AMP 視頻組件部分，您會找到分析支持級別。 在此處查找有關 AMP 視頻分析的更多信息。

AMP 視頻組件

放大器視頻

amp-video 組件是 HTML5 video 標籤的替代品； 僅用於直接嵌入 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>

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

屬性： src, poster, autoplay, controls, controlsList, dock, loop, crossorigin, disableremoteplayback, noaudio, rotate-to-fullscreen, common attributes

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>

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

屬性： autoplay（可選），常用屬性

amp-brightcove

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

例子

分析支持：完整

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

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

屬性： data-account, data-player or data-player-id, data-embed, data-video-id, data-playlist-id, data-referrer, data-param-

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 (required), data-mute (optional), data-endscreen-enable (optional), data-sharing-enable (optional), data-start (optional), data-ui-highlight (optional) ), 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>

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

屬性： 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-視頻

amp-ima-video 為插播視頻廣告嵌入了一個視頻播放器。 該組件需要一個在數據標籤中提供的廣告標籤，它是一個指向符合 VAST 的廣告響應的 URL（例如，請參閱 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 視頻平台播放器嵌入視頻。

例子

分析支持：：部分

需要腳本： <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 組件允許用戶嵌入在 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 (required), data-mode (required), data-content-id (required), data-player-id (required), data-domain (required), data-items (required),共同屬性

放大器視頻對接

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

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

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

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

• amp-brightcove
• amp-dailymotion
• amp-delight-播放器
• amp-ima-視頻
• 放大器視頻
• 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（必填）、poster（必填）、autoplay、公共屬性、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-播放器

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>

屬性： autoplay、data-videoid、data-live-channelid、data-param-*、dock、credentials（可選）、公共屬性。

結論

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

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