WAMFT1 Posted July 22, 2020 Share Posted July 22, 2020 Hi All We have a group of pages containing a video and countdown clock to provide a code when video is viewed. I am trying to work out how to make it so that when the webpage is not in focus that the countdown and video playback stops and then resumes when back in focus. I hope this makes sense. Below is the page in its entirety but now sure how to achieve the onfocus mechanism. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Virtual Professional Development Day</title> <link href="../../../../2020.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="heading">PRESENTATION: <span class="Text_Heading_Black1">Economic Update</span></p> <?php if (time() > strtotime("06/21/2021 11:59PM"))//MM-DD-YYYY { echo'<div> <p style="font-size:16px; font-weight:bold; color:#F00; font-family:Arial, Helvetica, sans-serif";"> <strong>SORRY! </strong>This presentation is no longer available.<br/>The CPD Claim period for the Virtual Professional Development Day has Finished.<br/> Presentations will be available on the Portal from Monday 22nd June. <br/>No further CPD will be issued.</p></div>'; }else{ echo'<p class="heading">CPD CODE: <span style="font-size:16px; font-weight:bold; color:#F00; font-family:Arial, Helvetica, sans-serif" id="countdown"></span> <script> var upgradeTime = 1705; 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 = "CPG5ECN"; } else { seconds--; } } var countdownTimer = setInterval("timer()", 1000); </script></p> <div class="standard_center"><span class="standard_center_red">Please Ensure you record the CPD Claim code before leaving this page</span><br/> <video height="600px" autoplay="autoplay" controls="controls" oncontextmenu="return false;" disablepictureinpicture controlsList="nofullscreen nodownload"> <source src="../docs/ext/pdpresentations/202005/202005-03.EconomicUpdate.mp4" type="video/mp4" /></video></div> ';}?> </body> </html> Quote Link to comment Share on other sites More sharing options...
requinix Posted July 22, 2020 Share Posted July 22, 2020 What do you mean by when the webpage is not "in focus"? You can tell if the page is not the active tab (document.hidden), but there's no way you can tell if the user pushed the window aside or simply got up from the computer to take a bathroom break while they waited. Quote Link to comment Share on other sites More sharing options...
WAMFT1 Posted July 22, 2020 Author Share Posted July 22, 2020 I know that I can't stop the bathroom break but if they were to open a second tab or move to another program or just click away from the browser that the counter and video stops. Quote Link to comment Share on other sites More sharing options...
requinix Posted July 22, 2020 Share Posted July 22, 2020 Some of that is covered by document.hidden and the visibility API. Quote Link to comment Share on other sites More sharing options...
WAMFT1 Posted July 24, 2020 Author Share Posted July 24, 2020 I have made some changed and managed to get the video to stop on visibility change but I can't figure out what to do with the timer script. I need that to stop too. Can I get some help please. This is doing my head in. <? //PD Day Specifications $PresTitle="Video Presenation"; // Name of Presentation $Video="../pdpresentations/202005/202005-TFLG-10.IressXplanPresentation.mp4"; // URL of video file $Time="1800"; // video lenght in seconds $CPDCode="Insert Code Here" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Virtual Professional Development Day</title> <link href="2020.css" rel="stylesheet" type="text/css" /> </head> <body class="standard_center_red"> <p class="heading">PRESENTATION: <span class="Text_Heading_Black1"><?php echo $PresTitle?></span></p> <p class="heading">CPD CODE: <span style="font-size:16px; font-weight:bold; color:#F00; font-family:Arial, Helvetica, sans-serif" id="countdown"></span> <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); </script> </p> <strong>Remember to record CPD Claim code above before closing this page</strong><br/> <div class="standard_center"> <main> <video id="videoElement" autoplay="autoplay" height="600px" controls="controls" oncontextmenu="return false;" disablepictureinpicture controlsList="nofullscreen nodownload"> <source src="<?php echo $Video?>" /> </div> <script> (function() { 'use strict'; // Set the name of the "hidden" property and the change event for visibility var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.mozHidden !== "undefined") { // Firefox up to v17 hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { // Chrome up to v32, Android up to v4.4, Blackberry up to v10 hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } var videoElement = document.getElementById("videoElement"); // If the page is hidden, pause the video; // if the page is shown, play the video function handleVisibilityChange() { if (document[hidden]) { videoElement.pause(); } else { videoElement.play(); } } // Warn if the browser doesn't support addEventListener or the Page Visibility API 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 { // Handle page visibility change document.addEventListener(visibilityChange, handleVisibilityChange, false); // When the video pauses and plays, change the title. videoElement.addEventListener("pause", function(){ document.title = 'PAUSED | Virtual Professional Development Day'; }, false); videoElement.addEventListener("play", function(){ document.title = 'Virtual Professional Development Day' }, false); } })(); </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
requinix Posted July 24, 2020 Share Posted July 24, 2020 Do you understand what document.hidden is? Because it looks a lot like you just copied and pasted a bunch of code. You won't learn what things actually mean if you do that. The timer runs every second. If the page is hidden then don't do anything with it. Quote Link to comment Share on other sites More sharing options...
WAMFT1 Posted July 24, 2020 Author Share Posted July 24, 2020 I know very little other than the basics. That is why I am asking for help. I don't know how to incorporate the countdown timer script into the code so that it stops when it is hidden. Quote Link to comment Share on other sites More sharing options...
requinix Posted July 24, 2020 Share Posted July 24, 2020 You don't have to stop the timer. All you have to do is make sure that it doesn't do anything. Have the timer code check the value of document.hidden to decide whether the timer should do what it would normally do (document.hidden is false) or whether it should not do anything (document.hidden is true). Or put another way, at the beginning of your timer function, if the document is hidden then return; so nothing else runs. It will continue ticking every second. That's okay. Quote Link to comment Share on other sites More sharing options...
WAMFT1 Posted July 27, 2020 Author Share Posted July 27, 2020 I really have no idea what I am do with this, any change I make to the countdown it just stops working altogether. I have no IT background other than what is self taught. I can't make sense of this to work it out properly. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.