检测重点是HTML5视频

Question

使用youtube时，如果点击＆＃34;播放＆＃34;或者＆＃34;暂停＆＃34;重点是视频，使用spacebar会暂停或播放视频。

在同一行中，我想在播放HTML5视频后阻止spacebar操作。 为此，我试图检测焦点元素，但似乎视频元素没有以相同的方式获得focus事件。

我尝试使用jQuery：

$(':focus');

简单的Javascript：

document.activeElement

没有成功。

Answer 1

为你的视频元素添加一个事件监听器，并在播放事件中将一些其他（可聚焦的）元素聚焦在页面上，例如一个什么都不做的虚拟按钮

var video=document.getElementById("MyVideo");

video.addEventListener('play', function () { 
  document.getElementById("myDummyButton").focus();
});

一旦视频播放，这将从视频元素到虚拟按钮的焦点消失。你也可以为暂停事件做同样的事情。

小心地将按钮放在靠近视频元素的地方，因为聚焦它会导致页面滚动，如果页面位于屏幕下方的页面下方。 还要记住，所有类型的元素都不可聚焦。

Answer 2

像这样使用：

document.getElementByID("video").onfocus = function(){}

Answer 3

您可以添加关键事件处理程序，以便过滤掉视频元素上的关键事件。

video.addEventListener("keydown", function(evt) {
  /* check the key you don't want and if hit call: */
  evt.preventDefault();
}, false);

您可以通过指定tabindex属性来强制元素获得焦点，如果它还没有

<video tabindex="1" /* etc. */ ></video>