Javascript 为什么videojs在空格键上切换全屏，而不是切换播放/暂停

您好，我在查看全屏预览时遇到了

videojs

问题，按

spacebar

暂停视频它是现有的全屏视图

问题：在全屏模式下，按

空格键

视频应切换播放/暂停不切换全屏

这里是代码笔链接（JSFIDLE不允许全屏显示）：

以下是我尝试过的：

 function togglePlayPause(){
    var player = videojs('my_video_1');
    if (player.paused()) {
      player.play();
    }
    else {
      player.pause();
    }
 }

函数切换PlayPause（）{
var player=videojs（“我的视频1”）；
如果（player.paused（））{
player.play（）；
}
否则{
player.pause（）；
}
}
$（函数（）{
$（文档）.on（'keypress'，function（）{
var keyCode=event.keyCode | | event.which；
如果（keyCode==32）切换PlayPause（）；
});
});
.video js{
字体大小：10px；
颜色：#fff；
}
.vjs默认皮肤.vjs大播放按钮{
字号：3em；
线高：1.5em；
高度：1.5em；
宽度：3em；
/*0.06666em=2px默认值*/
边框：0.06666em实心#fff；
/*0.3em=9px默认值*/
边界半径：0.3em；
/*左上对齐。默认值为0.5em=15px*/
左：0.5em；
顶部：0.5em；
}
.video js.vjs控制栏，
.video js.vjs大播放按钮，
.video js.vjs菜单按钮.vjs菜单内容{
/*IE8-没有alpha支持*/
背景色：#2B333F；
/*不透明度：1.0=100%，0.0=0%*/
背景色：rgba（43,51,63,0.7）；
}
/*滑块-用于音量栏和进度栏*/
.video js.vjs滑块{
背景色：#73859f；
背景色：rgba（115、133、159、0.5）；
}
.video js.vjs音量级别，
.video js.vjs播放进度，
.video js.vjs滑动条{
背景：#fff；
}
.video js.vjs加载进度{
/*对于IE8，我们将使颜色变亮*/
背景#bfc7d3；
/*否则我们将依赖于叠加的不透明度*/
背景：rgba（115131590.5）；
}
/*加载进度条还具有表示以下内容的内部div
较小的断开连接加载时间范围*/
.video js.vjs加载进度div{
/*对于IE8，我们将使颜色变亮*/
背景：白色；
/*否则我们将依赖于叠加的不透明度*/
背景：rgba（115131590.75）；
}
所述问题在小屏幕和全屏模式下都存在。此问题是由于表单类型元素的行为造成的，在本例中为按钮。在对它们执行任何操作后，它们仍处于选中状态。此处不使用tabindex=“-1”，因为按钮上的操作是使用单击操作触发的。因此，需要忽略空格键的非故意事件，同时模糊元素

见结果-

玩家的所有UI元素仍然可以使用Enter键触发。如果你问我的话，它很好用

如果要阻止使用类名的事件
一旦你点击全屏按钮，它就会聚焦。这就是为什么evey喜欢点击全屏按钮。你会注意到如果你点击了，问题就会消失
function togglePlayPause() {
  var player = videojs('my_video_1');
  if (player.paused()) {
    player.play();
  } else {
    player.pause();
  }
}

$(function() {
  const videoContainer = document; // replace this with just immediate container of video player
  $(videoContainer).on('keypress', function() {
    const keyCode = event.keyCode || event.which;
    if (keyCode == 32) {
      // targetting all buttons, change with class if you want
      if (event.target.type === 'button') {
        event.target.blur();
        event.preventDefault();
      }
      togglePlayPause();
    }
  });      
});

// replace the target button(s) selection logic
const targetClassList = event.target.classList;
// extend target classes if more elements need to be prevented
if (targetClassList.contains('vjs-fullscreen-control') > -1) {
  event.target.blur();
  event.preventDefault();
}