javascript - 检测对 HTML5 视频的关注

Question

与使用 youtube 时一样，如果您单击“播放”或“暂停”，焦点将位于视频上，使用 空格键 将暂停或播放视频。

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

我尝试使用 jQuery 来实现它:

$(':focus');

和纯 Javascript:

document.activeElement

没有成功。

Answer 1

将事件监听器添加到您的视频元素，并在播放事件时将焦点放在页面上的其他(可聚焦)元素上，例如什么都不做的虚拟按钮

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

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

这会在视频播放后立即将焦点从您的视频元素转移到虚拟按钮。您也可以对暂停事件执行相同的操作。

并小心地将按钮放置在视频元素附近，因为如果将按钮放置在屏幕下方页面下方的某个位置，聚焦它会导致页面滚动。 另请记住，所有类型的元素都不是可聚焦的。