Video-Js click event: как не срабатывать на кнопках панели управления - PullRequest
Новая
       39

Video-Js click event: как не срабатывать на кнопках панели управления

0 голосов
/ 29 апреля 2019

Я новичок в Video-js, который хочу использовать для размещения видеопроигрывателя на моем веб-сайте, и я пытаюсь добавить настраиваемое событие "click" (или "tap" для мобильного устройства) на видео, чтобы переопределить естественное поведение проигрывателя видео-js. Когда я нажимаю или нажимаю на видео, я хочу воспроизвести следующее видео, а не переключать Воспроизведение / Пауза видео.

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

Можно ли использовать другое имя события, если вы хотите, чтобы событие щелчка запускалось только тогда, когда пользователь нажимает на видео (но не на кнопке панели управления), или в функции события требуется выполнить проверку, чтобы проверить, если щелчок было сделано на панели управления, чтобы вернуться, прежде чем делать код?

На данный момент у меня есть только это: 

var player = videojs('videojs-player', {}, function() {//some code} ); 

player.on('click', function() { 
    alert('video was clicked'); 
// do something
};

Большое спасибо за любую помощь.

1 Ответ

1 голос
/ 01 мая 2019

Вы захотите использовать объект события (evt в приведенном ниже примере), который передается вашему обработчику кликов, чтобы определить, где на плеере щелкнул пользователь.

В приведенном ниже примере мы смотрим на свойство target объекта события, чтобы определить, какой элемент вызвал событие. Затем мы проверяем свойство tag​Name. Если он не равен VIDEO, мы игнорируем щелчок. 

var player = videojs('videojs-player', {}, function() {
  //some code
});

player.on('click', function(evt) { 
  if (evt.target.tagName === 'VIDEO') {
    console.log('video was clicked'); 
  }
});
<link href="https://vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/5.4.6/video.min.js"></script>
<video id="videojs-player" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264">
  <source src="https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" type="video/mp4" />
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
...