Click here to Skip to main content
15,031,687 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Below is class base react component to add videojs custom buttons. I am trying to add custom buttons
using react hooks, but not getting right solutions.

import React from 'react';
import VideoImageOverlayChild from './VideoImageOverlayChild';
import ReactDOM from 'react-dom';
import videojs from 'video.js';
const vjsComponent = videojs.getComponent('Component');

class VideoImageOverlay extends vjsComponent {
  constructor(player, options) {
    super(player, options);
    /* Bind the current class context to the mount method */
    this.mount = this.mount.bind(this);

    /* When player is ready, call method to mount React component */
    player.ready(() => {

    /* Remove React root when component is destroyed */
    this.on('dispose', () => {

   * We will render out the React EpisodeList component into the DOM element
   * generated automatically by the VideoJS createEl() method.
   * We fetch that generated element using `this.el()`, a method provided by the
   * vjsComponent class that this class is extending.
  mount() {

 * Make sure to register the vjsComponent so Video JS knows it exists
vjsComponent.registerComponent('VideoImageOverlay', VideoImageOverlay);
export default VideoImageOverlay;

What I have tried:

I am trying to add custom buttons using react hooks, but not getting right solutions.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900