Полноэкранный переключатель для видеопроигрывателя jQuery неправильно назначает имя класса - PullRequest
Новая
       11

Полноэкранный переключатель для видеопроигрывателя jQuery неправильно назначает имя класса

6 голосов
/ 20 июня 2019

Я работаю над видеоплеером JavaScript / jQuery. В нем есть ошибка, причину которой я не смог найти.

У игроков есть, среди прочего, полноэкранная кнопка входа / выхода (ее можно увидеть внизу фрагмента HTML): 

(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>

Проблема: Если у меня есть два (или более) видео, даже если я нажму полноэкранную кнопку первого клипа, имя класса fullscreen будет добавлено к все элементы video-container на странице.

Почему это происходит?

UPDATE:

После ответа Кайидо я решил эту проблему, используя следующий код. 

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

Указанная выше проблема была решена. Тем не менее, я потерял возможность использовать клавишу ESC в качестве полноэкранного выхода.

ОБНОВЛЕНИЕ 2:

Я запихнул игрока в Github репо .

Ответы [ 2 ]

2 голосов
/ 20 июня 2019

Вы привязываете событие к объекту Document столько раз, сколько у вас есть элементов на вашей странице.

Stacksnippets не разрешают полноэкранный режим, но макет того, что вы делаете: 

$('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>

Таким образом, каждый раз, когда вы будете входить или выходить из полноэкранного режима, все эти события будут срабатывать и устанавливать калибровку для каждого видео независимо от того, было ли онооткуда произошло событие.

Было бы лучше добавить один обработчик событий вне итератора each, где вы бы сделали 

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

Но на самом деле все, что вы делаете с полноэкранным классом, бесполезно, посколькууже существует :fullscreen псевдокласс , который изначально установлен браузерами.

0 голосов
/ 08 июля 2019

Насколько я вижу, проблема в том, что в «фиксированной» версии вы присоединяете к документу один прослушиватель «fullscreenchange».Затем в обработчике этого события вы используете элементы, определенные в цикле videos-elements:

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

и videoContainer, и fullScreenToggler не будут работать, как вы ожидаете.

...