Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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'.

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);
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.
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
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. });
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.