如何在 ReactJS 中使用 VideoJS 插件？

Posted 2023-05-08

【中文标题】如何在 ReactJS 中使用 VideoJS 插件？

【英文标题】：How to use VideoJS plugins with ReactJS?

【发布时间】：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 ：这行得通，非常感谢！ :-) :-) :-)

【参考方案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 请分享一些例子。