当用户不活跃时，如何隐藏我的自定义html5视频控件？

Question

我有一些自定义html5视频控件，当用户观看视频时，我想隐藏它们。 我将等待两秒钟，如果他们不移动鼠标，我将隐藏控件，然后当他们再次移动鼠标时，我将显示控件。

有什么实际可行的执行方法？

Answer 1

将mousemove事件与setTimeout

如果mouse移动，则清除setTimeout

 var elem = document.getElementById('controls'); var timeout; var duration = 3000; document.addEventListener('mousemove', function() { elem.textContent = 'Mouse is moving!' clearTimeout(timeout); timeout = setTimeout(function() { elem.textContent = 'Mouse Has stopped!' }, duration) }); 

 <div id="controls">Mouse Has stopped!</div> 

小提琴演示

---

使用controls属性实现

 var video = document.getElementById('videoElem'); var timeout; var duration = 500; document.addEventListener('mousemove', function() { video.setAttribute("controls", "controls"); clearTimeout(timeout); timeout = setTimeout(function() { video.removeAttribute("controls"); }, duration) }); 

 html { padding: 20px 0; background-color: #efefef; } body { width: 400px; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } video { width: 400px; display: block; } 

 <video preload controls id="videoElem"> <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4"> </video> 

小提琴演示

Answer 2

我最终使用了timeupdate事件：

var counts = 0
function hideOnIdle (video) {
  if (video.paused === true) return controls.classList.remove('hidden')
  if (counts > 7) {
    controls.classList.add('hidden')
    counts = 0
  }
  counts += 1
}

document.addEventListener('mousemove', function (event) {
  controls.classList.remove('hidden')
  counts = 0
}, false)