Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 data-vjs-player>
                    <video ref={ node => this.videoNode = node } className="video-js"></video>
This is a common issue while integrating ANY videojs plugin with reactJS.
                I guess that issue is videojs parent instance. Videojs is not set as global variable so plugin registers self in different instance from where you use it.
– bigless
                Apr 22, 2018 at 17:53
                @bigless even if I add videojs.registerPlugin('offset',offset); in componentDidMount() , it still has the same issue.
– Vishwajeet Vatharkar
                Apr 23, 2018 at 7:54
                Ok. That was naive. Did you try also init through videojsOptions like {controls: false, plugins: offset: {start: 10, end: 300, restart_beginning: false} } ?
– bigless
                Apr 23, 2018 at 22:17
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.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.