Để thảo luận và đưa ra ý kiến phản hồi về các sản phẩm của chúng tôi, hãy tham gia kênh Discord chính thức của Ad Manager trong máy chủ Cộng đồng quảng cáo và đo lường của Google.
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Hướng dẫn này sẽ hướng dẫn bạn cách thêm đồng hồ đếm ngược vào quá trình triển khai SDK IMA HTML5.
Điều kiện tiên quyết
Hướng dẫn này giả định rằng bạn đã triển khai SDK IMA HTML5 đang hoạt động. Nếu không, hãy tham khảo phần Thiết lập IMA SDK.
Tạo bộ hẹn giờ
Để thêm đồng hồ đếm ngược vào trình phát video hỗ trợ IMA, bạn chỉ cần thêm một vài dòng JavaScript để thăm dò thuộc tính remainingTime của thực thể AdsManager. Chúng ta sử dụng phương thức setInterval() để gọi một hàm mỗi giây nhằm kiểm tra adsManager.remainingTime.
[null,null,["Cập nhật lần gần đây nhất: 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."]]
