如何（取消）关注 YouTube 的视频元素

Question

这个问题来自于我试图开发一个 浏览器扩展来增强 YouTube 的键盘导航。

1. 背景

通常，当网页将焦点放在 YouTube 的video播放器元素上或焦点何时放在页面主体上时，我一点也不清楚。如果焦点在video元素上，则方向键将控制视频；否则，如果焦点在页面主体本身，箭头键将控制滚动。

我想添加一个快捷方式来（取消）激活video元素上的焦点。我怎么做？

2.我试过的

简单地使用document.querySelector('video').focus()或document.activeElement.blur()对我不起作用。也不是document.activeElement.setAttribute('disabled', 'true')...

3. 其他信息

理想情况下，因为在视觉上，用户通常不清楚焦点在哪里，我想稍后添加一些 CSS 边框装饰，但我认为一旦解决了之前的挑战，这就会很简单。

坦率地说，为什么 YouTube 还没有这一切呢？他们这边好像很懒。。。

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;  }});