I'm working on a video player project and I'm using videojs as well as videojs-ima for ad pre-rolls.
I've finally figured out a way to tell if there is an ad present or not; however, I'm trying to return a boolean value of true
or false
in order to tell when to run and execute a certain code block.
Here's my code, it currently doesn't work like it's purpose to.
if (navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/Android/i)) {
let checkAd = document.querySelectorAll('.ima-ad-container');
let checkAdLoop = setInterval(() => {
for (let i=0; i < checkAd.length; i++) {
if (checkAd[i].style.display == 'none') {
console.log('Ad is NOT playing.');
return false;
} else {
console.log('Ad is playing.');
return true;
// do nothing
}
}
}, 1000);
player.on('touchend', () => {
if (player.paused() && checkAdLoop() == false) {
player.play();
} else if (player.currentTime > 0 && checkAdLoop() == false) {
player.pause();
}
});
$('.vjs-icon-placeholder').on('touchend', () => {
if (player.paused() && checkAdLoop() == false) {
player.play();
} else if (player.currentTime > 0 && checkAdLoop() == false) {
player.pause();
}
});
}
I would love it if someone could please help me understand and could explain to me why this doesn't work. How could I go about fixing this?
I know I'm close. Thanks in advance!