javascript - 为什么 videojs 按空格键切换全屏，而不是切换播放/暂停

Question

您好，当我查看全屏预览并按空格键暂停视频时，我遇到了videojs问题，它是现有的全屏 View

问题:在全屏模式下按空格键视频应切换播放/暂停不切换全屏

这里是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, 133, 159, 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, 133, 159, 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>

请帮助我提前致谢!!

Answer 1

所描述的问题在小屏幕和全屏幕模式下都存在。此问题是由于表单类型元素的行为造成的，在本例中为 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();
}