在想要的时间后删除视频悬停控件答案

【问题标题】：Remove video on-hover controls after wanted time在想要的时间后删除视频悬停控件
【发布时间】：2018-06-11 08:41:38
【问题描述】：

此视频在悬停时显示控件，并在光标离开时隐藏它们。我怎样才能保持相同的行为，但仅在经过一定时间（3 秒）后才删除控件..？

$('#video').hover(function toggleControls() {
  if (this.hasAttribute("controls")) {
    /* setTimeout(function() {
    this.removeAttribute("controls")
    }, 3000)*/
    this.removeAttribute("controls")
  } else {
    this.setAttribute("controls", "controls")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video width="30%" id="video">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </video>

【问题讨论】：

您的代码已经包含注释的“setTimeout”部分。尝试将确切的代码移到“else”部分（并取消注释），以便在显示控件几秒钟后，它们将被隐藏。
试过了..得到一个错误（setAttribute不是一个函数）
你是对的，因为 'this' 在 setTimeout 函数中有不同的引用。尝试在“setTimeout”之外保存对“this”的引用并在内部使用它。例如：var thisRef = this; // and use thisRef afterwards
哦...是的，那 = 这解决了它。谢谢提醒
但是，它在视频播放时不起作用 - 只有在停止时，我想这是默认行为

标签： javascript jquery html html5-video

【解决方案1】：

关闭默认面板。并在您可以完全控制的情况下构建自己的。根据我的经验，该更改并未在所有浏览器/设备中正常工作。

【讨论】：