如何在 ReactJS 中使用 VideoJS 插件？答案

【问题标题】：How to use VideoJS plugins with ReactJS?如何在 ReactJS 中使用 VideoJS 插件？
【发布时间】：2018-10-02 14:33:19
【问题描述】：

我正在尝试将videojs-offset 插件与 ReactJS 一起使用。

但是，它向我显示了以下错误 -

TypeError: this.player.offset 不是函数

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>
        )
    }
}

这是将任何 videojs 插件与 reactJS 集成时的常见问题。

【问题讨论】：

我猜这个问题是 videojs 父实例。 Videojs 未设置为全局变量，因此插件在与您使用它的位置不同的实例中注册自己。
@bigless 即使我在 componentDidMount() 中添加 videojs.registerPlugin('offset',offset); ，它仍然有同样的问题。
好的。那太天真了。您是否也尝试通过 videojsOptions 初始化，例如 {controls: false, plugins: offset: {start: 10, end: 300, restart_beginning: false} } ？
@bigless ：这行得通，非常感谢！ :-) :-) :-)

标签： reactjs html5-video video.js

【解决方案1】：

通过以下更改解决了这个问题 -

首先，在 VideoJS Options 中，插件应该被初始化，比如， plugins: offset: {start: 10, end: 300, restart_beginning: false} }

如果你的插件没有任何参数，你可以像plugin_name: {}一样初始化它

然后，在 componentDidMount() 方法中，像这样注册插件 -

componentDidMount() {
        videojs.registerPlugin('offset',offset);
        this.player = videojs(this.videoNode, this.props, function 
        onPlayerReady() {
            console.log('onPlayerReady', this);
        });}

此解决方案适用于将任何 videojs 插件与 react 集成。

【讨论】：

亲爱的@Vishwajeet 请分享一些例子。