В этом руководстве рассказывается, как добавить таймер обратного отсчета в реализацию HTML5 IMA SDK.
Предварительные условия
В этом руководстве предполагается, что у вас есть работающая реализация HTML5 IMA SDK. Если вы этого не сделали, обратитесь к руководству по началу работы .
Создание таймера
Для добавления таймера обратного отсчета в видеопроигрыватель с поддержкой IMA требуется всего лишь добавить несколько строк JavaScript для опроса свойства remainingTime экземпляра AdsManager . Мы используем метод setInterval() для вызова функции каждую секунду для проверки adsManager.remainingTime .
// Global countdown timer
var countdownTimer;
...
function onAdsManagerLoaded(adsManagerLoadedEvent) {
adsManager = adsManagerLoadedEvent.getAdsManager(
videoElement);
...
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
onContentResumeRequested);
adsManager.addEventListener(
google.ima.AdEvent.Type.STARTED,
onAdsStarted);
}
...
function onAdsStarted(adEvent) {
countdownTimer = setInterval(function() {
var timeRemaining = adsManager.getRemainingTime();
// Update UI with timeRemaining
}, 1000);
}
...
function onContentResumeRequested(adEvent) {
...
if (countdownTimer) {
clearInterval(countdownTimer);
}
}
Попробуйте это
Ниже вы можете увидеть рабочую реализацию.