Reputation: 4344

Alternative for checking browser idle

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?

Upvotes: 4

Answers (2)

guest271314

Reputation: 1

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>

Upvotes: 2

Jake Haller-Roby

Reputation: 6427

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);
  })

Upvotes: 0

Alternative for checking browser idle

Answers (2)

Related Questions