why videojs toggles fullscreen on spacebar press , insted of toggling play/pause

Question

Hi i'm facing a problem with videojs when i view fullscreen preview and press spacebar to pause video it is existing fullscreen view

Question: in fullscreen mode on press of spacebar video should toggle play/pause NOT toggle fullscreen

Here is codepen link(jsfiddle not allowing fullscreen): https://codepen.io/eabangalore/pen/mdPodoq

here is what i have tried:

 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>

Please help me thanks in advance!!

Answer 1

The described problem is present in both small and full screen modes. This problem is due the behavior of form type elements, in this case Button. They remain selected after any action on them. Use of tabindex="-1" is not applicable here as the action on buttons are being triggered using click action. Thus, un-intentional events of the Space bar need to be ignored and the element needs to blurred at the same time.

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

All UI elements of the Player can still be triggered using the Enter key. Works perfectly if you ask me.

If you want to prevent events using class name(s)

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