How to make the timer script active only when video is playing

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.

(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]) {
} else {;
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’

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
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) {
document.getElementById(‘countdown’).innerHTML = ‘<?php echo $CPDCode?>’;
} else {
var countdownTimer = setInterval(‘timer()’,1000);

Well, this depends on the video player plugin you are using. Usually, there is a callback function inside the API for the video player plugin that allows feedback from the buttons on the player itself. This lets you add a way to handle adding routines to track the time it is playing.

Which plugin are you using?

Further info for you…
If you are using HTML5’s standard video player plugin, you can use a callback like this to get the current position in the time frame. There are hundreds of other callbacks that you can use, but, this one might be able to be adjusted for your uses… Hope it helps!

$("video").bind("durationchange", function() {
   alert("Current duration is: " + this.duration);

Thanks ErnieAlex, It’s no so much as to how long is left on the video but a countdown until an activation code is displayed after the video has finished playing that I am trying to achieve. I am forcing a countdown time to do this to ensure that they actually view the video as part of training and not just leave it playing in the background with other video’s available. This is why I was hoping to somehow combine both scripts above so that the countdown to showing the code is only working while the video was playing. I have this part working how I want it to.

I don’t know much coding, I mainly try to figure out how things work after I find a working example and edit to suit my needs. Just really struggling with this part.

Well, there is no real way to know for sure that the user will actually watch the video.
You might be able to check if the video is on the top level, meaning it active. But, really not an easy way
to check if they actually watch the video. Unless you quiz them on it.

Now, onto a correct way to handle this… If you are using HTML5’s video player, you can add what is called a “listener” which can monitor just about anything that has to do with the player. One common one would be the pause process. If the user pauses a video, you can track that with a pause-listener.
There is also listener’s for end of video and just about anything. Here is a link with an example of the pause code. If you look down the page you will see a list of other listeners that you can use to help, too.
I am thinking that you can set up code to check for all the possible things a user might do and adjust your countdown timer accordingly. Might work… Pause-Event
Good luck!

Sponsor our Newsletter | Privacy Policy | Terms of Service