Having trouble getting my countdown timer to stop when the video pauses / document.hidden. I have tried a number of ways but don’t know how to incorporate the countdown script in with the video script below. Can someone please help me, I am limited in my knowledge here and spent too many days with no success. Below is the two scripts but I don’t know how to get the timer to work only when the video is playing. All help is appreciated.
VIDEO SCRIPT:::
(function() {
‘use strict’;
var hidden, visibilityChange;
if (typeof document.hidden !== “undefined”) {
hidden = “hidden”;
visibilityChange = “visibilitychange”;
} else if (typeof document.mozHidden !== “undefined”) {
hidden = “mozHidden”;
visibilityChange = “mozvisibilitychange”;
} else if (typeof document.webkitHidden !== “undefined”) {
hidden = “webkitHidden”;
visibilityChange = “webkitvisibilitychange”;
}
var videoElement = document.getElementById(“videoElement”);
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}
if (typeof document.addEventListener === “undefined” || typeof document[hidden] === “undefined”) {
alert(“This video requires a modern browser that supports the Page Visibility API. Please try Chrome, Edge or Internet Explorer”);
} else {
document.addEventListener(visibilityChange, handleVisibilityChange, false);
videoElement.addEventListener(“pause”, function(){
document.title = ‘PAUSED | Virtual Professional Development Day’;
}, false);
videoElement.addEventListener(“play”, function(){
document.title = ‘Virtual Professional Development Day’
}
,false);
}
})();
TIMER SCRIPT::::
var upgradeTime = <?php echo $Time?>;
var seconds = upgradeTime;
function timer() {
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days 86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours 3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? ‘0’ + n : n);
}
document.getElementById(‘countdown’).innerHTML = 'Available in ’ + pad(hours) + ‘:’ + pad(minutes) + ‘:’ + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById(‘countdown’).innerHTML = ‘<?php echo $CPDCode?>’;
} else {
seconds–;
}
}
var countdownTimer = setInterval(‘timer()’,1000);