reactjs - 如何将 VideoJS 插件与 ReactJS 一起使用？

Question

我正在尝试使用videojs-offset插件，使用 ReactJS。

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

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

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

Answer 1

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

首先，在VideoJS选项中，应该初始化插件，例如， 插件:偏移:{开始:10，结束: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 集成。