เปิดใช้ครีเอทีฟโฆษณา JavaScript ของ VPAID 2
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
IMA HTML5 SDK รองรับครีเอทีฟโฆษณา JavaScript VPAID 2 เมื่อเปิดใช้การรองรับ
คุณควรทราบถึงความแตกต่างที่สำคัญ 2 ประการระหว่าง
ข้อกำหนด VPAID 2
กับวิธีที่ IMA SDK รองรับ VPAID 2 ความแตกต่างเหล่านี้ไม่ส่งผลต่อโค้ดการติดตั้งใช้งานเพลเยอร์
หรือ SDK แต่มีความสำคัญสำหรับผู้เขียนครีเอทีฟโฆษณา JavaScript VPAID 2
เนื่องจากครีเอทีฟโฆษณาอาจแสดงข้อผิดพลาดหรือไม่ทำงานตามที่คาดไว้เมื่อ
แสดงผลโดย IMA HTML5 SDK
ข้อกำหนดเบื้องต้น
หากต้องการทำตามคู่มือนี้ ให้เริ่มต้นด้วยแอปที่มีคุณสมบัติดังนี้
- โปรแกรมเล่นวิดีโอ HTML5 ที่ผสานรวม IMA HTML5 SDK หากยังไม่มี ให้ดูตั้งค่า IMA SDK
- URL แท็กโฆษณา VAST ที่ชี้ไปยังครีเอทีฟโฆษณา JavaScript ของ VPAID 2
ข้อมูลเบื้องต้นที่เป็นประโยชน์
เปิดใช้การรองรับ VPAID 2
หากต้องการเปิดใช้การรองรับ JavaScript ของ VPAID 2 ให้เรียกใช้เมธอดต่อไปนี้ก่อน
เริ่มต้น
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 ที่พร้อมใช้งานมีดังนี้
ดูข้อมูลเพิ่มเติมเกี่ยวกับโหมด VPAID ได้ในเอกสารประกอบเกี่ยวกับ API สำหรับ ImaSdkSettings.VpaidMode
ข้อควรระวังเกี่ยวกับการรองรับ VPAID 2
ความปลอดภัยของ iframe
โดยค่าเริ่มต้น IMA SDK จะใช้ iframe ที่ปลอดภัยแทน friendly iframe
(โดเมนเดียวกัน) หรือสคริปต์ในหน้าเว็บเพื่อแสดงครีเอทีฟโฆษณา JavaScript VPAID 2
ซึ่งหมายความว่าหากครีเอทีฟโฆษณาคาดว่าจะเข้าถึง DOM ของหน้าหลัก
ก็อาจทำให้เกิดข้อผิดพลาดได้ หากต้องการแสดงโฆษณาใน friendly iframe
แทน คุณสามารถใช้ ImaSdkSettings.setVpaidMode(...) ดังนี้
adsLoader.getSettings().setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.INSECURE);
องค์ประกอบพร็อกซีวิดีโอเพลเยอร์
เพื่อความปลอดภัยและฟังก์ชันการทำงานที่เหมาะสมบนอุปกรณ์เคลื่อนที่ ในโหมด ENABLED IMA HTML5
SDK จะไม่แสดงองค์ประกอบวิดีโอจริงต่อโฆษณา แต่จะแสดงองค์ประกอบ
พร็อกซีที่เลียนแบบฟังก์ชันการทำงานส่วนใหญ่ขององค์ประกอบวิดีโอปกติแทน
สำหรับครีเอทีฟโฆษณาที่เรียกเฉพาะเมธอด API ที่รองรับเท่านั้น จะไม่มีการเปลี่ยนแปลงลักษณะการทำงานในการแสดงผลครีเอทีฟโฆษณา ในโหมด
VpaidMode.INSECURE SDK จะจัดหาองค์ประกอบวิดีโอเพลเยอร์แทน
พร็อกซี
ต่อไปนี้คือเมธอด Listener และแอตทริบิวต์ที่ใช้ได้ในองค์ประกอบพร็อกซีวิดีโอ
เมธอด
addEventListenercanPlayTypeloadplaypausesetattribute
ประเภทเหตุการณ์สำหรับ addEventListener
abortcanplaycanplaythroughclickdurationchangeemptiedendederrorloadeddataloadedmetadataloadstartpauseplayplayingprogressratechangesuspendseekedseekingtimeupdatewaiting
Attributes
currentTimedurationendedpausedplaybackRatesrctype
คำถามที่พบบ่อย
- SDK ของ iOS หรือ Android รองรับครีเอทีฟโฆษณา JavaScript VPAID 2 ไหม
-
IMA HTML5 SDK เป็นแพลตฟอร์ม IMA SDK เพียงแพลตฟอร์มเดียวที่รองรับครีเอทีฟโฆษณา JavaScript ของ VPAID 2
- การตั้งค่านี้จะเปิดใช้ครีเอทีฟโฆษณา VPAID ใน IMA HTML5 SDK ไหม
- ได้ IMA HTML5 SDK รองรับครีเอทีฟโฆษณา JavaScript VPAID 2
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-31 UTC
[null,null,["อัปเดตล่าสุด 2025-08-31 UTC"],[[["\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."]]
