Stay organized with collectionsSave and categorize content based on your preferences.
This guide walks you through adding a countdown timer to an HTML5 IMA SDK implementation.
Prerequisites
This guide assumes that you have a working HTML5 IMA SDK implementation. If you don't,
refer toSet up the IMA SDK.
Create the timer
Adding a countdown timer to your IMA-enabled video player only requires
adding a few lines of JavaScript to poll theremainingTimeproperty
of theAdsManagerinstance. We use thesetInterval()method to
call a function every second to checkadsManager.remainingTime.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 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."]]
