amp-ima-video

簡介

amp-ima-video 嵌入了一個影片播放器，用於串流內影片廣告，並與 IMA SDK 整合。

此外掛程式提供了一個影片播放器，其中包含內容控制項，並使用 IMA SDK 從您選擇的符合 VAST 標準的廣告伺服器請求和顯示廣告。

設定

匯入 amp-ima-video 元件。

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

基本用法

amp-ima-video 元件 HTML 最多可接受兩種獨特的 HTML 節點作為子節點 - 用於內容影片的 source 標籤，以及用於字幕的 track 標籤。這兩者都可以像標準 video 標籤一樣使用。

此元件需要一個廣告標籤，在 data-tag 中提供，這是一個 VAST 相容廣告回應的 URL (範例請參閱 IMA Sample Tags)。它有一個可選的 data-poster 屬性，用於在播放前顯示海報圖片。

<amp-ima-video id="myVideo" width="640" height="360" layout="responsive" data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=" data-poster="/static/samples/img/ima-poster.jpg">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</amp-ima-video>

data-ad-label

在 data-ad-label 屬性中提供格式字串，以自訂在廣告播放時顯示的廣告揭露聲明。這讓使用者能夠支援不同語言的廣告揭露聲明。

格式字串應看起來像 "Ad (%s of %s)"。格式字串中的 "%s" 會分別替換為序列中的目前廣告編號和廣告總數 (例如，Ad 2 of 3)。如果未提供值，則預設為 "Ad (%s of %s)"。

<amp-ima-video id="myVideo2" width="640" height="360" layout="responsive" data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpreonlybumper&cmsid=496&vid=short_onecue&correlator=" data-poster="/static/samples/img/ima-poster.jpg" data-ad-label="Publicidad (%s de %s)">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</amp-ima-video>

自動播放

使用 autoplay 屬性自動播放影片，而無需使用者按下「播放」。

您可以選擇使用 data-delay-ad-request="true" 來延遲廣告請求，直到使用者捲動頁面或 3 秒鐘，以先到者為準。amp-ima-video 元件的預設行為是在 AMP 頁面載入時請求廣告，即使沒有曝光，也會被視為「程式碼已投放」。

<amp-ima-video id="myVideo3" width="640" height="360" layout="responsive" data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpreonlybumper&cmsid=496&vid=short_onecue&correlator=" data-src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" data-delay-ad-request="true" autoplay>
</amp-ima-video>

需要進一步說明嗎？

如果此頁面上的說明未能涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。

在 GitHub 上編輯範例

由 @shawnbuso 撰寫