CODEWITHSUNDEEP
javascripteventsclickvideo.js
Erick
Erick

Reputation: 11

Video-Js click event : how not to fire on controlbar buttons

I'm new to Video-js that i want to use to put a video player on my website and I'm trying to add custom 'click' event (or 'tap' for mobile device) on the video, to override the natural behavior of video-js player. When I click or tap the video, I wish to play next video, instead of toogle Play/Pause the video.

The code works, but the event fires even when I click on a button of the controlbar where there is the controls button like: play, volume, fullscreen.

Is there another event name to use if you want the click event is fired only when user click on the video (but not on a button of the controlbar) or is there a test to do in the event function to test if click was done on the controlbar to return before doing code ?

For the moment I have only this:

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

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

Thnak you very much for any help.

Upvotes: 1

Views: 6743

Answers (1)

almcd
almcd

Reputation: 1089

You'll want to use the event object (evt in the example below) that's passed to your click handler to identify where on the player the user clicked.

In the example below we look at the target property of the event object to ascertain which element triggered the event. We then check the tag​Name property. If it's not equal to VIDEO we ignore the click.

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/[email protected]/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>

Upvotes: 3

Related Questions