在React Video JS中使用videojs插件

Question

正如文档所提到的，我已经通过执行类似这样的操作来初始化了视频js ...

    import React from 'react';
    import videojs from 'video.js'

    export default class VideoPlayer extends React.Component {
      componentDidMount() {
        // instantiate video.js
        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
          console.log('onPlayerReady', this)
        });
      }

      // destroy player on unmount
      componentWillUnmount() {
        if (this.player) {
          this.player.dispose()
        }
      }

      // wrap the player in a div with a `data-vjs-player` attribute
      // so videojs won't create additional wrapper in the DOM
      // see https://github.com/videojs/video.js/pull/3856
      render() {
        return (
          <div data-vjs-player>
            <video ref={ node => this.videoNode = node } className="video-js"></video>
          </div>
        )
      }
    }

我想在此集成VideoJs Overlay插件...所以我做了这样的事情...

import React from 'react';
import videojs from 'video.js'

export default class VideoPlayer extends React.Component {
  componentDidMount() {
    // instantiate video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {

player.overlay({
            content: 'Default overlay content',
            debug: true,
            overlays: [{
              content: 'The video is playing!',
              start: 'play',
              end: 'pause'
            }, {
              start: 0,
              end: 15,
              align: 'bottom-left'
            }, {
              start: 15,
              end: 30,
              align: 'bottom'
            }, {
              start: 30,
              end: 45,
              align: 'bottom-right'
            }, {
              start: 20,
              end: 'pause'
            }]
          });
            });
      }

  // 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" id="videojs-overlay-player"></video>
      </div>
    )
  }
}

虽然这样做会给我错误，例如player.overlay无效...

并且如果我这样做videojs.registerPlugin('overlay', overlay);

并调用覆盖函数，它给我类似component Overlay is undefined的错误

如何以反应方式锻炼videojs插件？？？

Answer 1

使用前，您需要导入videojs-overlay软件包。请按照下列步骤操作：

1. 安装插件：npm i videojs-overlay --save
2. 将包导入Player类：import overlay from 'videojs-overlay';
3. 实例化播放器之前注册插件：videojs.registerPlugin('overlay', overlay);

然后，player.overlay({...将按预期工作。