javascript - 当用户处于非事件状态时，如何隐藏自定义 html5 视频控件？

Question

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

什么是实用且有效的方法来做到这一点？

Answer 1

Use mousemove event with setTimeout

如果鼠标正在移动，则清除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>

Fiddle Demo

<小时/>

使用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>

Fiddle Demo