创建广告倒计时器
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
本指南将向您逐步介绍如何使用 IMA DAI SDK 实现广告倒计时器。
倒计时器是一个 HTML 元素,因此您可以根据需要调整其样式和位置。
前提条件
本指南以
使用入门指南。
创建计时器
要创建计时器,请在 HTML 中添加占位符元素,并在
CSS。然后,添加一些 JavaScript 来监听 AdProgress
事件并计算
活动adProgressData
的剩余时间。
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>
dai.css
#ad-timer {
display: inline-block;
margin-top: 375px;
padding: 15px;
border: 1px solid #000;
}
...
dai.js
...
var streamManager; // used to request ad-enabled streams.
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var timerElement
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
timerElement = document.getElementById('ad-timer');
...
streamManager.addEventListener(
[google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
google.ima.dai.api.StreamEvent.Type.PAUSED,
google.ima.dai.api.StreamEvent.Type.RESUMED,
google.ima.dai.api.StreamEvent.Type.AD_PROGRESS],
onStreamEvent,
false);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
var progressData = e.getStreamData().adProgressData;
var timeRemaining = Math.ceil(progressData.duration - progressData.currentTime);
timerElement.innerHTML = 'Ad finished in: ' + timeRemaining;
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
timerElement.innerHTML = 'Ad not currently playing.';
console.log('Ad Break Ended');
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-08-31。
[null,null,["最后更新时间 (UTC):2025-08-31。"],[[["\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```"]]