reactjs - 在 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

如何以 React 方式锻炼 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({... 将按预期工作。