Ürünlerimiz hakkında görüşlerinizi paylaşmak ve geri bildirimde bulunmak için Google Advertising and Measurement Community sunucusundaki resmi Ad Manager Discord kanalına katılın.
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Bu kılavuzda, bir HTML5 IMA SDK uygulamasına geri sayım zamanlayıcı ekleme işlemi adım adım açıklanmaktadır.
Ön koşullar
Bu kılavuzda, çalışan bir HTML5 IMA SDK uygulamanız olduğu varsayılmaktadır. Aksi takdirde IMA SDK'yı ayarlama başlıklı makaleyi inceleyin.
Zamanlayıcıyı oluşturma
IMA özellikli video oynatıcınıza geri sayım zamanlayıcı eklemek için AdsManager örneğinin remainingTime mülkünü sorgulamak üzere yalnızca birkaç satır JavaScript eklemeniz gerekir. adsManager.remainingTime değerini kontrol etmek için her saniye bir işlev çağırmak üzere setInterval() yöntemini kullanırız.
[null,null,["Son güncelleme tarihi: 2025-08-31 UTC."],[[["\u003cp\u003eThis guide explains how to add a countdown timer to an HTML5 IMA SDK implementation for video ads.\u003c/p\u003e\n"],["\u003cp\u003eThe recommended approach is to use the built-in HTML5 IMA SDK countdown timer; however, this guide provides custom implementation steps if needed.\u003c/p\u003e\n"],["\u003cp\u003eThe custom implementation involves polling the \u003ccode\u003eremainingTime\u003c/code\u003e property of the \u003ccode\u003eAdsManager\u003c/code\u003e and updating the UI accordingly.\u003c/p\u003e\n"],["\u003cp\u003eA working implementation example is provided via a CodePen link for reference and testing.\u003c/p\u003e\n"]]],[],null,["# Create an ad countdown timer\n\n| We recommend the built-in countdown timer the HTML5 IMA SDK provides using [UIElements](/interactive-media-ads/docs/sdks/html5/client-side/reference/namespace/google.ima#google.ima.UiElements) . If you'd still like to implement your own, follow these steps.\n\nThis guide walks you through adding a countdown timer to an HTML5 IMA SDK implementation.\n\nPrerequisites\n-------------\n\nThis guide assumes that you have a working HTML5 IMA SDK implementation. If you don't,\nrefer to [Set up the IMA SDK](/interactive-media-ads/docs/sdks/html5).\n\nCreate the timer\n----------------\n\nAdding a countdown timer to your IMA-enabled video player only requires\nadding a few lines of JavaScript to poll the `remainingTime` property\nof the `AdsManager` instance. We use the `setInterval()` method to\ncall a function every second to check `adsManager.remainingTime`. \n\n```gdscript\n// Global countdown timer\nvar countdownTimer;\n...\nfunction onAdsManagerLoaded(adsManagerLoadedEvent) {\n adsManager = adsManagerLoadedEvent.getAdsManager(\n videoElement);\n ...\n adsManager.addEventListener(\n google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,\n onContentResumeRequested);\n adsManager.addEventListener(\n google.ima.AdEvent.Type.STARTED,\n onAdsStarted);\n}\n...\nfunction onAdsStarted(adEvent) {\n countdownTimer = setInterval(function() {\n var timeRemaining = adsManager.getRemainingTime();\n // Update UI with timeRemaining\n }, 1000);\n}\n...\nfunction onContentResumeRequested(adEvent) {\n ...\n if (countdownTimer) {\n clearInterval(countdownTimer);\n }\n}\n \n```\n\nTry it out\n----------\n\nSee this functioning implementation.\nSee the Pen \\\u003ca href='http://codepen.io/imasdk/pen/WQYZzK/'\\\u003eWQYZzK\\\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."]]
