为什么videojs在空格键按下时切换全屏显示，设置为切换播放/暂停 如果您想防止使用类名的事件

问题描述

嗨，我在查看全屏预览并按videojs暂停视频时遇到spacebar问题，它是现有的全屏视图

问题：在全屏模式下，按spacebar视频应切换播放/暂停不切换全屏

这是codepen链接（jsfiddle不允许全屏显示）：https://codepen.io/eabangalore/pen/mdPodoq

这是我尝试过的事情：

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

function togglePlayPause(){
    var player = videojs('my_video_1');
    if (player.paused()) {
      player.play();
    }
    else {
      player.pause();
    }
 }
 
 
$(function(){
 
  $(document).on('keypress',function(){
       var keyCode = event.keyCode || event.which;
        if(keyCode == 32) togglePlayPause();
  });
  
});

.video-js {
  font-size: 10px;
  color: #fff;
}

.vjs-default-skin .vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.5em;
  width: 3em;
  /* 0.06666em = 2px default */
  border: 0.06666em solid #fff;
  /* 0.3em = 9px default */
  border-radius: 0.3em;
  /* Align top left. 0.5em = 15px default */
  left: 0.5em;
  top: 0.5em;
}
.video-js .vjs-control-bar,.video-js .vjs-big-play-button,.video-js .vjs-menu-button .vjs-menu-content {
  /* IE8 - has no alpha support */
  background-color: #2B333F;
  /* Opacity: 1.0 = 100%,0.0 = 0% */
  background-color: rgba(43,51,63,0.7);
}

/* Slider - used for Volume bar and Progress bar */
.video-js .vjs-slider {
  background-color: #73859f;
  background-color: rgba(115,133,159,0.5);
}

.video-js .vjs-volume-level,.video-js .vjs-play-progress,.video-js .vjs-slider-bar {
  background: #fff;
}

.video-js .vjs-load-progress {
  /* For IE8 we'll lighten the color */
  background: #bfc7d3;
  /* Otherwise we'll rely on stacked opacities */
  background: rgba(115,0.5);
}

/* The load progress bar also has internal divs that represent
   smaller disconnected loaded time ranges */
.video-js .vjs-load-progress div {
  /* For IE8 we'll lighten the color */
  background: white;
  /* Otherwise we'll rely on stacked opacities */
  background: rgba(115,0.75);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://vjs.zencdn.net/5-unsafe/video.js"></script>
<link href="https://vjs.zencdn.net/5-unsafe/video-js.css" rel="stylesheet"/>

  <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px"
      controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg'
      data-setup='{ "aspectRatio":"640:267","playbackRates": [1,1.5,2] }'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
    <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
  </video>

请事先帮助我！！

解决方法

在小屏幕和全屏模式下都存在上述问题。此问题是由于表单类型元素（在本例中为 Button ）的行为引起的。对它们执行任何操作后，它们仍保持选中状态。 tabindex =“-1” 的使用不适用于此处，因为按钮的操作是通过单击操作触发的。因此，必须忽略空格键的意外事件，并且元素必须同时模糊。

查看结果-https://codepen.io/sujit77/pen/BaKboqx

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

仍然可以使用 Enter 键触发播放器的所有UI元素。如果您问我，效果很好。

如果您想防止使用类名的事件

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