javascript - 如何(取消)关注YouTube的视频元素

Question

This question comes from me trying to develop a browser extension to enhance YouTube's keyboard navigation.

1.上下文
通常，当网页将焦点放在YouTube的 video播放器元素上或将焦点放在页面的正文上时，我一点都不知道。如果焦点在 video元素上，则箭头键将控制视频；否则，如果焦点位于页面主体本身，则箭头键将控制滚动。
我想添加一个快捷方式来(取消)激活对 video元素的关注。我怎么做？
2.我尝试过的
简单地使用 document.querySelector('video').focus()或 document.activeElement.blur()对我不起作用。都不像 document.activeElement.setAttribute('disabled', 'true') ...
3.其他信息
理想情况下，因为从视觉上看，用户通常不会将焦点放在哪里，所以我希望稍后再添加一些CSS边框装饰，但是我认为一旦解决了上一个难题，这将很简单。

Quite frankly, why the hell doesn't YouTube have all this already? It seems lazy on their part...

Answer 1

1.一种可能的解决方案
尝试改为将重点放在div #movie_player元素上:

document.addEventListener('keydown', (evt) => {
  if (evt.key === 'v') {
    const player = document.querySelector('#movie_player');

    document.activeElement.id === 'movie_player'
      ? player.blur()
      : player.focus();

    console.log('Active Element:', document.activeElement);
  }
});

2.奖励:以上解决方案的Dart版本
或者，由于您一直在使用Dart:

document.onKeyDown.listen((KeyboardEvent keyboardEvent) {
  switch (keyboardEvent.key) {
    case 'v':
      final Element player = document.querySelector('#movie_player');

      document.activeElement.id == 'movie_player' 
          ? player.blur() 
          : player.focus();

      print('Active Element: ${document.activeElement}');

      break;
  }
});