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

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

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

自助服务亭是一个video选择站。 video全屏播放，我遇到了一个问题，因为鼠标没有移动，动作显示在video帧下面。

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

Answer 1

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

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

Answer 2

video全屏播放，我遇到了一个问题，因为鼠标没有移动，动作显示在video帧下面。

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

使用loadedmetadata和HTMLMediaElement ended事件来设置，重置TextTrackCue 。 同时设置，在mousemove事件处理程序中将当前用户活动的cue重置为30秒。

您可以通过单击"Launch the preview in a separate window"图标在新window查看链接的plnkr ，然后单击元素，其中包含文本"toggle fullscreen" 。

        toggle fullscreen