Alternative for checking browser idle

Solution 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>
Alternative for checking browser idle

Solution 1:

Related

Recent Posts
