How to use VideoJS plugins with ReactJS? - reactjs

Question

I am trying to use videojs-offset plugin, with ReactJS.
But, it is showing me follwoing error -
TypeError: this.player.offset is not a function
import React, { Component } from 'react';
import './App.css';
import PropTypes from 'prop-types';
import "video.js/dist/video-js.css";
import videojs from 'video.js'
import videoJsContribHls from 'videojs-contrib-hls'
import offset from 'videojs-offset';
export default class VideoPlayer extends React.Component {
componentDidMount() {
// instantiate Video.js
this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
console.log('onPlayerReady', this);
this.player.offset({
start: 10,
end: 300,
restart_beginning: false //Should the video go to the beginning when it ends
});
});
}
// destroy player on unmount
componentWillUnmount() {
if (this.player) {
this.player.dispose()
}
}
render() {
return (
<div>
<div data-vjs-player>
<video ref={ node => this.videoNode = node } className="video-js"></video>
</div>
</div>
)
}
}
This is a common issue while integrating ANY videojs plugin with reactJS.

Answer 1

This problem is solved with following change -
First, In VideoJS Options, the plugins should be initialized, like,
plugins: offset: {start: 10, end: 300, restart_beginning: false} }
if your plugin does not have any parameters, you can initialize it like plugin_name: {}
Then, In componentDidMount() method, register the plugin like this -
componentDidMount() {
videojs.registerPlugin('offset',offset);
this.player = videojs(this.videoNode, this.props, function
onPlayerReady() {
console.log('onPlayerReady', this);
});}
This solution works for integrating ANY videojs plugin with react.