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

Question

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

这是一种实用，有效的方法吗？

Answer 1

  

将mousemove事件与setTimeout

一起使用

如果setTimeout正在移动

，请清除mouse

＆＃13;

＆＃13;

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)
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Fiddle Demo

使用controls属性

实施

＆＃13;

＆＃13;

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)
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Fiddle Demo

Answer 2

我最终使用了timeupdate事件：

<Setter .../>