检测对 HTML5 视频的关注

Question

与使用 youtube 时一样，如果您单击 "play" 或 "pause"，焦点将在视频上，使用 spacebar 将暂停或播放视频。

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

我试过使用 jQuery :

$(':focus');

平原 Javascript:

document.activeElement

None 成功。

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>

Detect focus on HTML5 video