با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
این راهنما شما را با افزودن یک تایمر شمارش معکوس به پیاده سازی HTML5 IMA SDK راهنمایی می کند.
پیش نیازها
این راهنما فرض می‌کند که شما یک پیاده‌سازی HTML5 IMA SDK دارید. اگر این کار را نمی کنید، به تنظیم IMA SDK مراجعه کنید.
تایمر را ایجاد کنید
افزودن یک تایمر شمارش معکوس به پخش‌کننده ویدیوی دارای IMA شما فقط نیاز به افزودن چند خط جاوا اسکریپت برای نظرسنجی ویژگی remainingTime در نمونه AdsManager دارد. ما از متد setInterval() برای فراخوانی یک تابع در هر ثانیه برای بررسی adsManager.remainingTime استفاده می کنیم.
تاریخ آخرین بهروزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی."],[[["\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."]]
