悬停后保持视频控制 3 秒

Question

因此，视频控件仅在悬停在该视频上时出现，并在光标离开该区域后三秒后消失。这是所需的行为，但是仅在视频开始时才会发生……如果我在视频播放时悬停，它们会立即消失。有没有办法解决这个问题？这里有一支笔来演示：https://codepen.io/anon/pen/RJpjJQ?editors=1111

$('#video').hover(function () {
  if (this.hasAttribute("controls")) {
    var that = this;
    setTimeout(function() {
    that.removeAttribute("controls")
    }, 3000)
  } else {
    this.setAttribute("controls", "controls")
  }
});

Answer 1

这是working pen，但不幸的是，这只适用于 webkit 浏览器。

诀窍是

::-webkit-media-controls-panel

例如，我不确定是否有办法在 Mozilla 上做到这一点。