Full screen toggle for jQuery video player does not assign class-name correctly

user_4512005 0
Viewed 853

I am working on a JavaScript/jQuery video player. It has a bug whose cause I was unable to find.

The players has, among others, an enter/exit full-screen button (it can be seen at the bottom of the HTML snippet):

(function($) {

  /* Helper functions */
  /* 1) full screen */
  function toggleFullScreen(elem) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
      if (elem.requestFullScreen) {
        elem.requestFullScreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }
    } else {
      if (document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }
  }

  $('video').each(function() {
    var video = $(this)[0],
      videoContainer = video.closest('div'),
      $playToggleBtn = $(videoContainer).find('input[name="play-pause"]'),
      $progressBar = $(videoContainer).find('.progress-bar'),
      $progress = $(videoContainer).find('.progress'),
      $current_time = $(videoContainer).find('.current-time'),
      $durationDisplay = $(videoContainer).find('.duration'),
      $volumeSlider = $(videoContainer).find('.volume-slider'),
      $mute_toggle = $(videoContainer).find('.mute-toggle'),
      $muteBtn = $mute_toggle.find('input[type="checkbox"]'),
      $rate_display = $(videoContainer).find('.rate_display'),
      $fullScreenToggler = $(videoContainer).find('input[name="screen-toggler"]'),
      $playSpeed = $(videoContainer).find('.playback-rate ul li');

    $(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
      var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
      var event = state ? 'FullscreenOn' : 'FullscreenOff';

      if (event === 'FullscreenOff') {
        $(videoContainer).removeClass('fullscreen');
        $fullScreenToggler.removeClass('exit');
      } else {
        $(videoContainer).addClass('fullscreen');
        $fullScreenToggler.addClass('exit');
      }
    });

  });

})(jQuery);

<div class="video-container">
  <video poster="posters/poster.jpg">
            <source src="videos/mymovie.mp4" type="video/mp4" />
        </video>
  <div class="controls-wrapper">
    <div class="progress-bar">
      <div class="progress"></div>
    </div>
    <ul class="video-controls">
      <li><input type="button" name="play-pause" value="Play" class="play" /></li>
      <li><a href="#" class="previous">Previous</a></li>
      <li><a href="#" class="next">Next</a></li>
      <li class="mute-toggle unmuted"><input type="checkbox" name="mute" /></li>
      <li><input type="range" min="0" max="1" step="0.01" class="volume-slider" /></li>
      <li><span class="current-time"></span><span>/</span><span class="duration"></span></li>
      <li class="playback-rate">
        <span class="rate_display">Normal</span>
        <div class="piker">
          <ul class="dropdown-content" id="rate_selector">
            <li data-rate="0.5">0.5x</li>
            <li data-rate="0.75">0.75x</li>
            <li data-rate="1">Normal</li>
            <li data-rate="1.125">1.125x</li>
            <li data-rate="1.5">1.5x</li>
            <li data-rate="2">2x</li>
          </ul>
        </div>
      </li>
      <li class="fullscreen-container">
        <input type="button" name="screen-toggler" value="Fullscreen" class="toggle-fullscreen" />
      </li>
    </ul>
  </div>
</div>

The problem: If I have two videos (or more), even if I click the full-screen button of the first clip, the fullscreen class-name will be added to all the video-container elements on the page.

Why does that happen?

UPDATE:

Following Kaiido's answer I have resolved this issue using the following code.

$(document).on('fullscreenchange', evt => {
    if ($(document.fullscreenElement).is(videoContainer)) {
        $(document.fullscreenElement).addClass('fullscreen');
        $(videoContainer).removeClass('fullscreen');
        $fullScreenToggler.removeClass('exit');
    } else {
        $(videoContainer).removeClass('fullscreen');
        $fullScreenToggler.addClass('exit');
    }
});

The problem mentioned above was solved. Yet, I lost the ability to use the ESC key as full-screen exit.

UPDATE 2:

I have pushed the player in a Github repo.

html5-video video jquery javascript
2 Answers

You are binding an event to the Document object as many times as you have <video> elements in your page.

Stacksnippets don't allow fullscreen but a mockup of what you are doing is:

$('div').each(function(i, el) {
  $(document).on('click', e => console.log('clicked'));
  console.log('added click event on Document');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>

So every time you will enter or exit the fullscreen mode, all these events will fire and will set the calss on each of the videos regardless it was the one from where the event originated.

You'd be better add a single event handler outside of the each iterator, where you'd do 

$(document).on('fullscreenchange', evt => {
  if($(document.fullscreenElement).is('video')) {
    $(document.fullscreenElement).addClass('fullscreen');
  }
  else {
    $('video.fullscreen').removeClass('fullscreen');
  }
});

But actually all your thing with the fullscreen class is useless since there is already a :fullscreen pseudo class that is natively set by browsers.

user_37027970

As far as I see the problem is that in the "fixed" version you are attaching a single listener of 'fullscreenchange' to the document. Then in the handler of that event, you are using elements defined in the videos-elements-loop:

$(videoContainer).removeClass('fullscreen'); $fullScreenToggler.removeClass('exit');/

both videoContainer and fullScreenToggler won't work as you expect.

user_44655670
Related