啟用 VPAID 2 JavaScript 廣告素材
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
IMA HTML5 SDK 支援 VPAID 2 JavaScript 廣告素材。啟用支援功能時,請注意 VPAID 2 規格與 IMA SDK 支援 VPAID 2 的方式之間,有兩項主要差異。這些差異不會影響播放器或 SDK 實作程式碼,但對於 VPAID 2 JavaScript 廣告素材作者來說非常重要,因為廣告素材由 IMA HTML5 SDK 算繪時,可能會擲回錯誤或無法正常運作。
必要條件
如要按照本指南操作,請先建立具有下列特性的應用程式:
- 已整合 IMA HTML5 SDK 的 HTML5 影片播放器。如果沒有,請參閱「設定 IMA SDK」。
- 指向 VPAID 2 JavaScript 廣告素材的 VAST 廣告代碼網址。
實用入門資訊
啟用 VPAID 2 支援
如要啟用 VPAID 2 JavaScript 支援,請在初始化 AdDisplayContainer 之前呼叫下列方法:
google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);
...
var adDisplayContainer = new google.ima.AdDisplayContainer(adContainerElement);
var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
...
可用的 VPAID 模式如下:
ENABLED
- 允許使用預設設定的 VPAID 廣告。
INSECURE
- 允許非安全模式的 VPAID 廣告。詳情請參閱「IFrame 安全性」和「影片播放器 Proxy 元素」。
DISABLED
- VPAID 廣告無法播放。如果要求的廣告傳回 VPAID 廣告素材,就會擲回錯誤。
如要進一步瞭解 VPAID 模式,請參閱 ImaSdkSettings.VpaidMode 的 API 說明文件。
VPAID 2 支援注意事項
IFrame 安全性
根據預設,IMA SDK 會使用安全 iframe,而非同網域的同網域 iframe 或網頁內指令碼,來轉譯 VPAID 2 JavaScript 廣告素材。也就是說,如果廣告素材預期存取父項網頁的 DOM,就可能導致錯誤。如要改用同網域 iframe 顯示廣告,請使用 ImaSdkSettings.setVpaidMode(...)
,如下所示:
adsLoader.getSettings().setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.INSECURE);
影片播放器 Proxy 元素
為確保安全和行動功能正常運作,在 ENABLED
模式下,IMA HTML5 SDK 不會將實際的影片元素提供給廣告,而是提供代理元素,模擬一般影片元素的大部分功能。如果廣告素材只呼叫支援的 API 方法,廣告素材的顯示行為就不會改變。在 VpaidMode.INSECURE
模式下,SDK 會提供影片播放器元素,而非 Proxy。
以下是影片 Proxy 元素可用的方法、監聽器和屬性:
方法
addEventListener
canPlayType
load
play
pause
setattribute
addEventListener 的事件類型
abort
canplay
canplaythrough
click
durationchange
emptied
ended
error
loadeddata
loadedmetadata
loadstart
pause
play
playing
progress
ratechange
suspend
seeked
seeking
timeupdate
waiting
屬性
currentTime
duration
ended
paused
playbackRate
src
type
常見問題
- iOS 或 Android SDK 是否支援 VPAID 2 JavaScript 廣告素材?
-
只有 IMA HTML5 SDK 平台支援 VPAID 2 JavaScript 廣告素材。
- 這是否會在 IMA HTML5 SDK 中啟用 VPAID 廣告素材?
- 是,IMA HTML5 SDK 支援 VPAID 2 JavaScript 廣告素材。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-08-31 (世界標準時間)。
[null,null,["上次更新時間:2025-08-31 (世界標準時間)。"],[[["\u003cp\u003eThe IMA HTML5 SDK supports VPAID 2 JavaScript creatives, requiring a simple setup process outlined in the guide.\u003c/p\u003e\n"],["\u003cp\u003eKey differences exist between the VPAID 2 spec and the IMA SDK's implementation, primarily impacting creative authors.\u003c/p\u003e\n"],["\u003cp\u003eBy default, the SDK uses a secure iframe for rendering VPAID 2 creatives, but you can switch to a friendly iframe for DOM access.\u003c/p\u003e\n"],["\u003cp\u003eA video proxy element is used for security and mobile functionality, providing a subset of video element functionalities to the ad.\u003c/p\u003e\n"],["\u003cp\u003eVPAID 2 JavaScript creative support is currently exclusive to the IMA HTML5 SDK, not available in the iOS or Android SDKs.\u003c/p\u003e\n"]]],[],null,["# Enable VPAID 2 JavaScript creatives\n\nThe IMA HTML5 SDK supports VPAID 2 JavaScript creatives. Enabling support is easy, but there are two differences to be aware of between the [VPAID 2 spec](//iabtechlab.com/standards/video-player-ad-interface-definition-vpaid/) and the way the IMA SDK supports VPAID 2. These differences do not impact player or SDK implementation code, but they are important for VPAID 2 JavaScript creative authors, as creatives may throw errors or not work as expected when rendered by the IMA HTML5 SDK.\n\nPrerequisites\n-------------\n\n- HTML5 video player with the IMA HTML5 SDK integrated. If you don't have one, check out [Set up the IMA SDK](/interactive-media-ads/docs/sdks/html5/client-side).\n- A VAST ad tag URL that points to a VPAID 2 JavaScript creative.\n\nHelpful primers\n---------------\n\n- If you're not familiar with VPAID 2, you can read more at [IAB's VPAID page](//iabtechlab.com/standards/video-player-ad-interface-definition-vpaid/).\n\nEnabling VPAID 2 support\n------------------------\n\nTo enable VPAID 2 JavaScript support, call the following method before initializing your [AdDisplayContainer](/interactive-media-ads/docs/sdks/html5/client-side/reference/class/google.ima.AdDisplayContainer): \n\n```gdscript\n google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);\n ...\n var adDisplayContainer = new google.ima.AdDisplayContainer(adContainerElement);\n var adsLoader = new google.ima.AdsLoader(adDisplayContainer);\n ...\n```\n\nThe available VPAID modes are as follows:\n\n- `ENABLED` - Allows VPAID ads with the default settings.\n- `INSECURE` - Allows VPAID ads in insecure mode. For more information, see [IFrame security](#iframe-security) and [Video player proxy element](#proxyelement).\n- `DISABLED` - VPAID ads do not play. If a requested ad returns a VPAID creative, an error is thrown.\n\nFor more information on VPAID modes, see the API documentation for [ImaSdkSettings.VpaidMode](/interactive-media-ads/docs/sdks/html5/client-side/reference/namespace/google.ima.ImaSdkSettings#google.ima.ImaSdkSettings.VpaidMode).\n\nVPAID 2 support caveats\n-----------------------\n\n### IFrame security\n\nBy default, the IMA SDK uses a secure iframe instead of a friendly iframe (same domain) or an in-page script to render VPAID 2 JavaScript creatives. This means that if a creative expects to access the DOM of the parent page, it could potentially cause an error. To render your ad in a friendly iframe instead, you can use `ImaSdkSettings.setVpaidMode(...)` like so: \n\n```text\nadsLoader.getSettings().setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.INSECURE);\n```\n\n\u003cbr /\u003e\n\n### Video player proxy element\n\nFor security and proper mobile functionality, in `ENABLED` mode the IMA HTML5 SDK doesn't provide the actual video element to the ad; instead it provides a proxy element that mimics much of the functionality of the normal video element. For ad creatives that call only supported API methods, there should be no behavior changes in the rendering of the creatives. With `VpaidMode.INSECURE` mode, the SDK provides the video player element instead of the proxy.\n\nHere are the methods, listeners and attributes available on the video proxy element:\n\n#### Methods\n\n- `addEventListener`\n- `canPlayType`\n- `load`\n- `play`\n- `pause`\n- `setattribute`\n\n#### Event types for addEventListener\n\n- `abort`\n- `canplay`\n- `canplaythrough`\n- `click`\n- `durationchange`\n- `emptied`\n- `ended`\n- `error`\n- `loadeddata`\n- `loadedmetadata`\n- `loadstart`\n- `pause`\n- `play`\n- `playing`\n- `progress`\n- `ratechange`\n- `suspend`\n- `seeked`\n- `seeking`\n- `timeupdate`\n- `waiting`\n\n#### Attributes\n\n- `currentTime`\n- `duration`\n- `ended`\n- `paused`\n- `playbackRate`\n- `src`\n- `type`\n\nFAQ\n---\n\nAre VPAID 2 JavaScript creatives supported in the iOS or Android SDKs?\n: The IMA HTML5 SDK is the only IMA SDK platform that currently supports VPAID 2 JavaScript creatives.\n\nDoes this enable VPAID creatives in the IMA HTML5 SDK?\n: Yes, the IMA HTML5 SDK supports VPAID 2 JavaScript creatives."]]