CODEWITHSUNDEEP
reactjshtml5-videovideo.js
Vishwajeet Vatharkar
Vishwajeet Vatharkar

Reputation: 1196

How to use VideoJS plugins with ReactJS?

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.

Upvotes: 2

Views: 5869

Answers (1)

Vishwajeet Vatharkar
Vishwajeet Vatharkar

Reputation: 1196

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.

Upvotes: 2

Related Questions