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软件包。请按照下列步骤操作：

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

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

在Video JS中使用videojs插件

1 个答案: