當用戶不活躍時，如何隱藏我的自定義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)