Question

我有一个简单的网络信息亭，在鼠标不用jQuery移动30秒后显示用户操作提示。

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

自助服务终端是一个视频选择站。视频是全屏播放的，我遇到了一个问题，因为鼠标没有移动，因此动作显示在视频框下方。

有没有办法用鼠标或关键事件检查浏览器活动？

Answer 1

根据您播放视频的方式，在视频播放/暂停时切换全局标记videoPlaying。然后;

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

Answer 2

视频全屏播放，我遇到了一个问题由于鼠标，动作显示在视频帧下方没动了。

如果问题是当用户请求全屏显示时在<video>元素下呈现给用户的消息，则可以使用<track>元素并将src设置为.vtt文件，或.addTextTrack()方法HTMLMediaElement，VTTCue()，.addCue()添加cue消息，以便在特定时间显示在<video>元素。

使用loadedmetadata的{{1}}和ended事件设置，重置HTMLMediaElement。同时设置，从TextTrackCue事件处理程序的当前用户活动重置cue到30秒。

您可以点击mousemove图标，在新的window上查看关联的plnkr，然后点击包含文字"Launch the preview in a separate window"的{{1}}元素。

＆＃13;

<button>

＆＃13;

检查浏览器空闲的替代方法

2 个答案: