หากต้องการพูดคุยและแสดงความคิดเห็นเกี่ยวกับผลิตภัณฑ์ของเรา โปรดเข้าร่วมช่อง Discord อย่างเป็นทางการของ Ad Manager ในเซิร์ฟเวอร์ชุมชนการโฆษณาและการวัดผลของ Google
IMA HTML5 SDK รองรับเพลย์ลิสต์โฆษณาแบบอัตโนมัติทั้งหมด ฟีเจอร์นี้จะแทรกช่วงพักโฆษณาลงในเนื้อหาตามที่ระบุไว้ใน Google Ad Manager เมื่อดูแลการแสดงโฆษณา นอกจากนี้ ยังช่วยลดความซับซ้อนของโค้ดวิดีโอเพลเยอร์ที่จําเป็นต่อการสนับสนุนช่วงพักโฆษณา ซึ่งรวมถึงโฆษณาตอนต้น โฆษณาตอนกลาง และโฆษณาตอนท้าย
varadsRenderingSettings=newgoogle.ima.AdsRenderingSettings();adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete=true;adsManager=adsManagerLoadedEvent.getAdsManager(videoContent,adsRenderingSettings);// See API reference for contentPlayback.
functionrequestAds(){}...adsLoader.getSettings().setAutoPlayAdBreaks(false);...}functiononAdsManagerLoaded(){...// For non-auto ad breaks, listen for ad break readyadsManager.addEventListener(google.ima.AdEvent.Type.AD_BREAK_READY,adBreakReadyHandler);...}functionadBreakReadyHandler(){// Once we're ready to play ads. To skip this ad break, simply return// from this handler without calling adsManager.start().adsManager.start();}
varAds=function(application,videoPlayer){...this.currentTime=0;setInterval(this.updateCurrentTime,1000);this.seeking=false;this.seekCheckInterval=1000;// You may need to adjust this value, depending on your platformthis.seekThreshold=100;this.previousTime=0;setInterval(Application.bind(this,this.checkForSeeking),this.seekCheckInterval);};Ads.prototype.updateCurrentTime=function(){if(!this.seeking){this.currentTime=this.videoPlayer_.contentPlayer.currentTime;}};Ads.prototype.checkForSeeking=function(){varcurrentTime=this.videoPlayer_.contentPlayer.currentTime;// How much time has passed since you last ran this method, in millisecondsvardiff=(currentTime-this.previousTime)*1000;// If that difference is greater than the time since you last ran this method,// plus the threshold, the user was seekingif(Math.abs(diff)>this.interval+this.threshold){this.seeking=true;}else{this.seeking=false;}// Grab the current video time again to make up for time spent in this methodpreviousTime=this.videoPlayer_.contentPlayer.currentTime;};Ads.prototype.onAdsManagerLoaded_=function(adsManagerLoadedEvent){this.application_.log('Ads loaded.');this.adsManager_=adsManagerLoadedEvent.getAdsManager(this);this.processAdsManager_(this.adsManager_);};
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-08-17 UTC"],[[["\u003cp\u003eThe IMA HTML5 SDK enables automated ad playlists, simplifying ad integration and supporting pre-rolls, mid-rolls, and post-rolls by leveraging Google Ad Manager.\u003c/p\u003e\n"],["\u003cp\u003eTo ensure proper ad playback, developers must signal content completion using \u003ccode\u003eAdsLoader.contentComplete()\u003c/code\u003e and manage content state synchronization with the SDK.\u003c/p\u003e\n"],["\u003cp\u003eCustom content playback objects can be used to address seeking issues and provide finer control over ad break timing and behavior.\u003c/p\u003e\n"],["\u003cp\u003eThe SDK provides events like \u003ccode\u003eCONTENT_PAUSE_REQUESTED\u003c/code\u003e, \u003ccode\u003eCONTENT_RESUME_REQUESTED\u003c/code\u003e, and \u003ccode\u003eAD_BREAK_READY\u003c/code\u003e for developers to manage content playback and ad interactions.\u003c/p\u003e\n"],["\u003cp\u003eSpecific code adjustments are necessary to handle seeking accurately on mobile Safari due to platform limitations.\u003c/p\u003e\n"]]],[],null,["IMA HTML5 SDK supports fully automated ad playlists. This feature\ninserts ad breaks into the content as specified in\n[Google Ad Manager](//www.google.com/dfp)\nwhen trafficking your ads. It also greatly simplifies the video player code\nnecessary to support ad breaks, including pre-rolls, mid-rolls and post-rolls.\n\n- When creating the `AdsManager`, a `contentPlayback` object is passed in using the [getAdsManager](/interactive-media-ads/docs/sdks/html5/client-side/reference/interface/google.ima.AdsManagerLoadedEvent#google.ima.AdsManagerLoadedEvent.getAdsManager) call. This object must have a `currentTime` property that returns the current playhead position of the video. If you're using an HTML5 `video` element to display your content, you can just pass that element to the SDK. This object is used to track the progress of the content playback so ad breaks are automatically inserted at the times specified in Ad Manager. You also need to let the SDK know that you want it to handle content state on your behalf. \n\n ```javascript\n var adsRenderingSettings = new google.ima.AdsRenderingSettings();\n adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;\n adsManager = adsManagerLoadedEvent.getAdsManager(\n videoContent, adsRenderingSettings); // See API reference for /interactive-media-ads/docs/sdks/html5/client-side/reference/interface/google.ima.AdsManagerLoadedEvent#google.ima.AdsManagerLoadedEvent.getAdsManager.\n ```\n- To ensure post-rolls are played, you need to let the SDK know when your content is finished. This is a bit tricky, because in some cases the SDK uses your video player to play ads, so you need to make sure you're only letting the SDK know when your content is finished, and not when an ad is finished. You can do that using the following code: \n\n ```javascript\n var videoContent = document.getElementById('contentElement');\n var contentEndedListener = function() {adsLoader.contentComplete();};\n\n videoContent.addEventListener('ended', contentEndedListener);\n\n function onContentPauseRequested() {\n contentElement.removeEventListener('ended', contentEndedListener);\n ...\n }\n\n function onContentResumeRequested() {\n contentElement.addEventListener('ended', contentEndedListener);\n ...\n }\n ```\n- The [CONTENT_PAUSE_REQUESTED](/interactive-media-ads/docs/sdks/html5/client-side/reference/namespace/google.ima.AdEvent#google.ima.AdEvent.Type) and [CONTENT_RESUME_REQUESTED](/interactive-media-ads/docs/sdks/html5/client-side/reference/namespace/google.ima.AdEvent#google.ima.AdEvent.Type) events are used to pause and resume the content when ad breaks are played.\n- If your video player supports drag-to-seek, and the current time property of the video player updates while the user is dragging, the SDK can't differentiate between content progressing normally and a user seeking through the content. You must use a custom contentPlayback object as your parameter to `getAdsManager`. For an example of this use case, see [The Trouble with Seeking](#trouble-with-seeking).\n\n**Note:** When the content has finished playing or\nthe user has stopped playback, be sure to call AdsLoader.contentComplete\nin order to signal to the SDK that the content is done. The SDK then plays\nthe post-roll ad break, if one has been scheduled. The `ALL_ADS_COMPLETED`\nevent is raised when ALL ad breaks have been played. In addition, note\nthat content tracking begins when `init()` is called and you should\nalways call `init()` before playing content.\n\nDisable automatic playback of ad breaks\n\nIn some circumstances you may want to prevent the SDK from playing ad breaks until\nyou're ready for them. In this scenario, you can disable automatic playback of ad breaks\nin favor of letting the SDK know when you're ready for an ad break to play. With this\nconfiguration, once the SDK has loaded an ad break, it fires an\n`AD_BREAK_READY` event. When your player is ready for the ad break to start,\nyou can call adsManager.start(): \n\n```javascript\nfunction requestAds() {}\n ...\n adsLoader.getSettings().setAutoPlayAdBreaks(false);\n ...\n}\n\nfunction onAdsManagerLoaded() {\n ...\n // For non-auto ad breaks, listen for ad break ready\n adsManager.addEventListener(\n google.ima.AdEvent.Type.AD_BREAK_READY,\n adBreakReadyHandler);\n ...\n}\n\nfunction adBreakReadyHandler() {\n // Once we're ready to play ads. To skip this ad break, simply return\n // from this handler without calling adsManager.start().\n adsManager.start();\n}\n```\n\nTry it out\n\nSee the following code for a working implementation.\nSee the Pen \\\u003ca href='http://codepen.io/imasdk/pen/QyBNrq/'\\\u003eManual Ad Breaks\\\u003c/a\\\u003e by IMA SDK (\\\u003ca href='http://codepen.io/imasdk'\\\u003e@imasdk\\\u003c/a\\\u003e) on \\\u003ca href='http://codepen.io'\\\u003eCodePen\\\u003c/a\\\u003e.\n\nThe trouble with seeking\n\nIf you use ad rules, you may run into a problem with click-and-drag seeking.\nSpecifically, after a user clicks and drags to seek through video past multiple\nmidroll pods, they may see 2 or more of those pods play back to back before\ncontent resumes. This is caused by the video playhead time updating while the\nuser is seeking; if the SDK happens to poll for the current time while the user\nseeks past an ad, it may think that ad should be played. When the content\nresumes, it plays that ad, and then the most recent ad since the seek. For a\nvisual representation of this problem, see the following diagram:\n\nSave the current time when the user starts seeking, and report that time when the SDK\nasks for it until the user resumes normal playback. For a visual representation of this\nsolution, see the following diagram:\n\nWith this solution, you properly skip the 0:10 mid-roll and only play the 0:20 mid-roll.\nThis is done using a custom playhead tracker in the following code snippet. This code\ncontains modifications (shown in bold) of `ads.js` in the advanced HTML5\nsample available on our\n[download page](/interactive-media-ads/docs/sdks/html5/download). \n\n```javascript\nvar Ads = function(application, videoPlayer) {\n ...\n this.currentTime = 0;\n setInterval(this.updateCurrentTime, 1000);\n};\n\nAds.prototype.updateCurrentTime = function() {\n if (!this.videoPlayer_.contentPlayer.seeking) {\n this.currentTime = this.videoPlayer_.contentPlayer.currentTime;\n }\n};\n\nAds.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {\n this.application_.log('Ads loaded.');\n this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);\n this.processAdsManager_(this.adsManager_);\n};\n```\n\nKnown issues with mobile Safari\n\nThis method should work on every plaform except mobile Safari. On mobile\nSafari, the seeking property of the video tag is not properly implemented (it\nalways returns false). To get around that, you need to do your own check to\nsee if the user is seeking through the video. The sample code for this method\nfollows. Again, the bolded lines are modifications to existing code. \n\n```javascript\nvar Ads = function(application, videoPlayer) {\n ...\n this.currentTime = 0;\n setInterval(this.updateCurrentTime, 1000);\n this.seeking = false;\n this.seekCheckInterval = 1000;\n // You may need to adjust this value, depending on your platform\n this.seekThreshold = 100;\n this.previousTime = 0;\n setInterval(\n Application.bind(this, this.checkForSeeking),\n this.seekCheckInterval);\n};\n\nAds.prototype.updateCurrentTime = function() {\n if (!this.seeking) {\n this.currentTime = this.videoPlayer_.contentPlayer.currentTime;\n }\n};\n\nAds.prototype.checkForSeeking = function() {\n var currentTime = this.videoPlayer_.contentPlayer.currentTime;\n // How much time has passed since you last ran this method, in milliseconds\n var diff = (currentTime - this.previousTime) * 1000;\n // If that difference is greater than the time since you last ran this method,\n // plus the threshold, the user was seeking\n if (Math.abs(diff) \u003e this.interval + this.threshold) {\n this.seeking = true;\n } else {\n this.seeking = false;\n }\n // Grab the current video time again to make up for time spent in this method\n previousTime = this.videoPlayer_.contentPlayer.currentTime;\n};\n\nAds.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {\n this.application_.log('Ads loaded.');\n this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);\n this.processAdsManager_(this.adsManager_);\n};\n```\n\nWith these changes, the SDK is now using the currentTime property of your `Ads`\nobject to determine when to play ad breaks, not the `currentTime` property of the\ncontent video player."]]
