如何实现 "press space to pause html5 video" 除了焦点输入？ (Jquery)

Question

我希望通过 jquery 为我网站上的 HTML5 视频实施 space 暂停系统，但我发现当我单击同一页面上的输入，向文本输入添加 space 不起作用。它只是保留 playing/pausing 视频。

我想要做的是某种 if 语句，上面写着“如果输入未聚焦，请按 space 暂停视频”，但也需要反复检查此条件以使其不会“这不会发生一次。

我几乎成功地使用 setInterval 来做到这一点，但 jquery 的时间完全不精确，只会导致视频有时会暂停。

当前space暂停代码如下。

    $(window).keypress(function(e) {
  var video = document.getElementById("vid");
  if (e.which == 32) {
    if (video.paused)
      video.play();
    else
      video.pause();
  }
});

感谢您的帮助。

Answer 1

我建议检查您的点击事件的目标并以此为基础进行工作！这样的东西应该可以工作

$(window).keypress(function(e) {
  const video = document.getElementById("vid");

  // check if keypress event originates from an input and if so; NOOP
  const nodeName = e.target.nodeName;
  if (nodeName && nodeName.toUpperCase() === "INPUT") { return; }

  if (e.which == 32) {
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video controls id="vid" style="width: 400px; display:block;">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/mp4">
</video>
<input type="text" value="write here!">

如何实现 "press space to pause html5 video" 除了焦点输入？ (Jquery)

How to implement "press space to pause html5 video" except when input is focused? (Jquery)

javascript

video

jquery

html5-video