OnFocus Help

WAMFT1 · 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>

requinix · 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.

WAMFT1 · 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.

requinix · July 22, 2020

Some of that is covered by document.hidden and the visibility API.

WAMFT1 · 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">&nbsp;

<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>

requinix · 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.

WAMFT1 · 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.

requinix · 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.

WAMFT1 · 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.

Sign In

OnFocus Help

Recommended Posts

WAMFT1

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

WAMFT1

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

WAMFT1

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

WAMFT1

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

WAMFT1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information