Capturing and handling the 'click' event of 'bigplaybutton' of videojs is not working

user_13517942 0
Viewed 4153

I'm using videojs from https://vjs.zencdn.net/5.16.0/video.min.js to embed a video in my page. I have an action to be performed on click of the 'bigplaybutton'.

enter image description here

I tried to get the element by class name vjs-big-play-button(i haven't created a button explicitly...just using the one from videojs) and add an event listener to it.

document.getElementsByClassName("vjs-big-play-button").addEventListener('click', somefunction);

(or)

document.getElementsByClassName("vjs-big-play-button").onclick = function(){
    console.log("play");
};

Neither of them work. I'm not sure if my approach is right. Kindly suggest a solution to achieve this.

video.js html5-video video dom-events javascript
3 Answers

So I made further research and found a solution which works. But still not sure why getting the element by class name din't work. So here is the solution which worked for me.

var player = videojs("videoElementId");
player.bigPlayButton.on('click', function(){
    // do the action
});
user_135179420

If you want to add event on Big Play Button you can use the bellow code :

 var previewPlayer = videojs(document.querySelector('.video-js-preview'));

  previewPlayer.bigPlayButton.on('click', function () {
               // your action here.
            });

if you want to add event on video play you can use the below:

previewPlayer.on('play', () => {  // your action here. });
user_83703340

getElementsByClassName will return array of elements by class name. So if you have only one, then it can be called document.getElementsByClassName("vjs-big-play-button")[0]

user_92370150
Related