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);
console.log(options);
this
.mount =
this
.mount.bind(
this
);
player.ready(() => {
this
.mount();
this
.on(
'
dispose'
, () => {
ReactDOM.unmountComponentAtNode(
this
.el());
* 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() {
ReactDOM.render(
<VideoImageOverlayChild
vjsComponent={
this
}
videoTicker={
this
.options_.videoTicker}
imgOption={
this
.options_.logo}
playerObject={
this
.player_}
this
.el()
* 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.
Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad
spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or
edit the question
and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it.
Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
