How to execute a function using className in react?

Question

Actually, I am using videojs for displaying video. It has it's own functionality. I want to execute my own function on it's play button. Code for the play button is

  <button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Play Video</span></button>

Basically I want to execute this function as shown below using className or id in react as we are doing in javascript or jquery.

playButton = ()=>{
        console.log("Function has been executed.");

    }

Does this post help? https://stackoverflow.com/questions/59196447/how-to-add-event-listener-to-videojs-when-start-to-play-a-video — Tasos K., Dec 29 '20 at 08:57

Ketan Ramteke · Answer 1 · 2020-12-29T09:40:46.613

Output:

You can call the playButton function on onClick event instead of binding it to id or classNamelike below:

import React from "react";
import "./style.css";

export default function App() {

  const playButton = () => {
    console.log("Function has been executed.");
  };

  return (
    <div>
      <button
        className="vjs-big-play-button"
        type="button"
        title="Play Video"
        aria-disabled="false"
        onClick={playButton}
      >
        <span aria-hidden="true" class="vjs-icon-placeholder" />
        <span class="vjs-control-text" aria-live="polite">
          Play Video
        </span>
      </button>
    </div>
  );
}

Link to working example: Stackblitz

Personal opinion: Avoid mixing ReactJS and jQuery.

Imran Rafiq Rather · Answer 2 · 2020-12-29T12:00:52.480

Using Videojs library in React, it's easy to implement it. It gives you lots of other controls which otherwise have to be implemented by us :)

CODESANDBOX LINK: https://codesandbox.io/s/samplevideo-rgdh9

Video.js

import React from 'react';
import videojs from 'video.js';

export default class VideoPlayer extends React.Component {
  componentDidMount() {
    // instantiate video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this);
    });
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    return (
      <div data-vjs-player>
        <video ref={node => (this.videoNode = node)} className="video-js" />
      </div>
    );
  }
}

App.js

import React from 'react';
import { render } from 'react-dom';
import Videojs from './video.js';

const videoJsOptions = {
  autoplay: false,
  playbackRates: [0.5, 1, 1.25, 1.5, 2],
  width: 720,
  height: 300,
  controls: true,
  sources: [
    {
      src: '//vjs.zencdn.net/v/oceans.mp4',
      type: 'video/mp4',
    },
  ],
};

const App = () =>
  <div>
    <Videojs {...videoJsOptions} />
  </div>;

render(<App />, document.getElementById('root'));

How to execute a function using className in react?

2 Answers2