除输入焦点外，如何实现“按空格暂停html5视频”？ （jQuery）

Posted 2023-05-07

【中文标题】除输入焦点外，如何实现“按空格暂停html5视频”？ （jQuery）

【英文标题】：How to implement "press space to pause html5 video" except when input is focused? (Jquery)

【发布时间】：2021-11-17 00:15:17

【问题描述】：

我希望通过 jquery 在我的网站上为 html5 视频实现空格暂停系统，但我发现当我单击同一页面上的输入时，会在文本输入不起作用。它只是继续播放/暂停视频。

我想要做的是某种 if 语句，上面写着“如果输入没有聚焦，请按空格暂停视频”，而且还要反复检查这种情况，这样它就不会只发生一次。

我使用 setInterval 几乎成功了，但 jquery 的时间完全不精确，只会导致视频有时会暂停。

当前的空格暂停代码如下。

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

感谢您的帮助。

【参考方案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!">

【讨论】：

是的，这是正确的轨道……不过，我对此有点问题。即如何（仅有时）在单击空格时暂停视频，但在松开空格键后立即恢复视频。除此之外，它运行良好（由于某种原因，它不适用于我的复杂视频页面，但这取决于我的代码，所以我必须解决这个问题）。很好的答案。

在我将 e.preventDefault() 添加到代码后，问题不知何故消失了……效果很好。我也已经将“视频”声明为变量，因此必须重命名 const。标记为最佳答案。

@RaphaelToast 很高兴您找到了解决方案！是的，我认为当视频元素聚焦时会发生这种情况 - 默认情况下，当您按下空格并且视频元素具有暂停/取消暂停播放器的焦点，然后 javascript 再次暂停/取消暂停时，会导致您的问题。这也是为什么 e.preventDefault() 也修复了它，防止在视频元素上按空格的默认功能：D 好解决方案！

啊，有道理。再次感谢！