CODEWITHSUNDEEP
javascriptvideohtml5-videodom-eventsvideo.js
NIV
NIV

Reputation: 486

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

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.

Upvotes: 3

Views: 6058

Answers (3)

Abd Abughazaleh
Abd Abughazaleh

Reputation: 5495

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. });

Upvotes: 1

Srđan Petrović
Srđan Petrović

Reputation: 11

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]

Upvotes: 0

NIV
NIV

Reputation: 486

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
});

Upvotes: 9

Related Questions