Stay organized with collectionsSave and categorize content based on your preferences.
This guide walks you through how to implement an ad countdown timer with the IMA DAI SDK.
The countdown timer is an HTML element, so you can adjust its styling and positioning as needed.
Prerequisites
This guide builds on the HTML5 DAI example described in theGet startedguide.
Creating the timer
To create the timer, add a placeholder element to the HTML and implement styling in the
CSS. Then, add some JavaScript to listen to theAdProgressevent and calculate the
remaining time from the event'sadProgressData.
dai.html
<body onLoad="initPlayer()">
<h2>IMA DAI SDK for HTML5 Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="adUi"></div><div id="ad-timer">Ad not currently playing.</div></body>
[[["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 implement an ad countdown timer within a video player using the IMA DAI SDK for HTML5.\u003c/p\u003e\n"],["\u003cp\u003eThe timer is created using HTML elements for display and styling, with JavaScript listening to ad progress events for real-time updates.\u003c/p\u003e\n"],["\u003cp\u003eYou can customize the timer's appearance by modifying the CSS and HTML elements as per your design preferences.\u003c/p\u003e\n"],["\u003cp\u003eThe guide requires prior understanding of HTML5 DAI implementation, as outlined in the 'Get Started' guide it builds upon.\u003c/p\u003e\n"]]],[],null,["This guide walks you through how to implement an ad countdown timer with the IMA DAI SDK.\nThe countdown timer is an HTML element, so you can adjust its styling and positioning as needed.\n\nPrerequisites\n\nThis guide builds on the HTML5 DAI example described in the\n[Get started](/ad-manager/dynamic-ad-insertion/sdk/html5) guide.\n\nCreating the timer\n\nTo create the timer, add a placeholder element to the HTML and implement styling in the\nCSS. Then, add some JavaScript to listen to the `AdProgress` event and calculate the\nremaining time from the event's `adProgressData`.\n\ndai.html \n\n```text\n \u003cbody onLoad=\"initPlayer()\"\u003e\n \u003ch2\u003eIMA DAI SDK for HTML5 Demo (HLS.JS)\u003c/h2\u003e\n \u003cvideo id=\"video\"\u003e\u003c/video\u003e\n \u003cdiv id=\"adUi\"\u003e\u003c/div\u003e\n \u003cdiv id=\"ad-timer\"\u003eAd not currently playing.\u003c/div\u003e\n \u003c/body\u003e\n```\n\ndai.css \n\n```css+lasso\n\n#ad-timer {\n display: inline-block;\n margin-top: 375px;\n padding: 15px;\n border: 1px solid #000;\n}\n\n...\n```\n\ndai.js \n\n```gdscript\n ...\n\n var streamManager; // used to request ad-enabled streams.\n var hls = new Hls(); // hls.js video player\n var videoElement;\n var adUiElement;\n var timerElement\n\n ...\n\n function initPlayer() {\n videoElement = document.getElementById('video');\n adUiElement = document.getElementById('adUi');\n timerElement = document.getElementById('ad-timer');\n\n ...\n\n streamManager.addEventListener(\n [google.ima.dai.api.StreamEvent.Type.LOADED,\n google.ima.dai.api.StreamEvent.Type.ERROR,\n google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,\n google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,\n google.ima.dai.api.StreamEvent.Type.PAUSED,\n google.ima.dai.api.StreamEvent.Type.RESUMED,\n google.ima.dai.api.StreamEvent.Type.AD_PROGRESS],\n onStreamEvent,\n false);\n\n ...\n\n function onStreamEvent(e) {\n switch (e.type) {\n case google.ima.dai.api.StreamEvent.Type.LOADED:\n console.log('Stream loaded');\n loadUrl(e.getStreamData().url);\n break;\n case google.ima.dai.api.StreamEvent.Type.ERROR:\n console.log('Error loading stream, playing backup stream.' + e);\n loadUrl(BACKUP_STREAM);\n break;\n case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:\n console.log('Ad Break Started');\n videoElement.controls = false;\n adUiElement.style.display = 'block';\n break;\n case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:\n var progressData = e.getStreamData().adProgressData;\n var timeRemaining = Math.ceil(progressData.duration - progressData.currentTime);\n timerElement.innerHTML = 'Ad finished in: ' + timeRemaining;\n break;\n case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:\n timerElement.innerHTML = 'Ad not currently playing.';\n console.log('Ad Break Ended');\n videoElement.controls = true;\n adUiElement.style.display = 'none';\n break;\n default:\n break;\n }\n }\n```"]]
