javascript - 悬停后保持视频控制 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 上执行此操作。