Alternative for checking browser idle

Question

I have a simple web kiosk that displays a user action prompt after 30 seconds of the mouse not moving with jQuery.

var i = null;
  $("#body-wrap").mousemove(function() {
    clearTimeout(i);
    $("#overlay").fadeOut();
    i = setTimeout(function() {
      $("#overlay").fadeIn();
    }, 30000);
  })

The kiosk is a video-selection stand. The video is played full screen and I'm running into an issue where the action is displayed beneath the video frame because the mouse hasn't moved.

Is there a way to check for browser activity with JavaScript other than mouse or key events?

I doubt it. See http://stackoverflow.com/questions/667555/detecting-idle-time-in-javascript-elegantly — Klompenrunner, Sep 18 '16 at 03:26
How is "browser activity" determined? Do you want to prompt user every 30 seconds? — guest271314, Sep 18 '16 at 03:39
@guest271314 It's a pseudo-screensaver. If the mouse hasn't moved, it's there so people know how to interact. But, if a video is longer than 30 seconds (they are) it kicks them back to that prompt. So, there is no user activity, but the browser window is definitely active. — Brian, Sep 18 '16 at 19:09
Should the prompt occur every 30 seconds until end of video? — guest271314, Sep 18 '16 at 19:19
@BrianBennett Is the issue with approach at Question is that during full screen the prompt is displayed outside of the full screen viewport? — guest271314, Sep 18 '16 at 20:54
@guest271314 Yeah, each video is a hidden `div` element and the correct video is pulled up by user action. I have a demo of the site set up here: http://dev.ohheybrian.com/church — Brian, Sep 19 '16 at 12:39

score 2 · Answer 1 · answered Sep 18 '16 at 23:38

The video is played full screen and I'm running into an issue where the action is displayed beneath the video frame because the mouse hasn't moved.

If the issue is message to user being rendered beneath <video> element when user has requested fullscreen display, you can use <track> element with src set to .vtt file, or .addTextTrack() method of HTMLMediaElement, VTTCue(), .addCue() to add a cue message to be displayed at <video> element at specific time.

Use loadedmetadata and ended event of HTMLMediaElement to set, reset TextTrackCue. Also set, reset cue to 30 seconds from current user activity at mousemove event handler.

You can view the linked plnkr at a new window by clicking "Launch the preview in a separate window" icon, then click <button> element having text "toggle fullscreen".

<!DOCTYPE html>
<html>
<head>
 <style>
 ::cue {
   background: transparent;
 }

 ::cue(.prompt) {
   color: #d81159;
   background: transparent;
   text-shadow: 2px 2px 2px #ffbc42;
   font-family: Menlo, Sans, Monospace;
   font-size: 36px;
   display: block;
   width: 100px;
 }

 ::cue(b) {
   display: block;
   width: 100px;
 }
 </style>
</head>
<body>
<button>
  toggle fullscreen
</button>
<br>
<video 
  width="320px"
  height="280px"
  autoplay="autoplay" 
  controls="controls"
  src="http://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4"
  poster="data:image/png;base64,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">     
</video>
<script>
  var video = document.querySelector("video");
  var button = document.querySelector("button");
  video.requestFullscreen = video.requestFullscreen 
                            || video.mozRequestFullscreen 
                            || video.webkitRequestFullscreen;
  video.exitFullscreen = video.exitFullscreen 
                         || video.mozExitFullscreen 
                         || video.webkitExitFullscreen;
  var track = video.addTextTrack("captions", "prompt", "en");
  track.mode = "showing";
  var overlay = "<c.prompt><b>No browser activity<b></c>";
  var isFullscreen = false;
  var currentCue;
  var duration;

  video.onloadedmetadata = function(e) {
    duration = this.duration;
    currentCue = createCue(30, Math.round(duration));
    track.addCue(currentCue);
  }

  video.onended = video.onpause = function() {
    removeCues(track);
    console.log(track.cues);
    currentCue = createCue(30
                   , Math.round(duration || video.duration));
    track.addCue(currentCue);
  }

  button.onclick = function() {
    if (isFullscreen) {
      video.exitFullscreen;
      video.setAttribute("width", "320px");
      video.setAttribute("height", "280px");
      isFullscreen = false;
    } else {
      video.removeAttribute("width");
      video.removeAttribute("height");
      video.requestFullscreen();
      isFullscreen = true;
    }
  }
  
  window.onmousemove = function() {
    if (track.cues.length && currentCue && duration) {
      removeCues(track);
      currentCue = createCue(
        Math.round(video.currentTime) + 30
        , Math.round(duration || video.duration)
      );
      track.addCue(currentCue);
    }
  }

  function createCue(begin, end) {
    var cue = new VTTCue(begin, end, overlay);
    cue.line = 5;
    cue.size = 100;
    return cue
  }

  function removeCues(track) {
    for (var i = 0; i < track.cues.length; i++) {
      track.removeCue(track.cues[i]);
    }
  }
</script>
</body>
</html>

score 0 · Accepted Answer · answered Sep 18 '16 at 04:02

Depending on how you're playing the video, toggle a global flag, videoPlaying, on video play/pause. Then;

$("#body-wrap").mousemove(function() {
    clearTimeout(i);
    $("#overlay").fadeOut();
    i = setTimeout(function() {
      if(!videoPlaying)
        $("#overlay").fadeIn();
    }, 30000);
  })

Alternative for checking browser idle

2 Answers2

Linked