Question

我已经使用videojs文档中的指南来创建一个正常工作的组件（见下文）。一旦加载，我还可以通过API函数（如window.player.play()）从控制台控制播放器。

我现在想创建一个播放/暂停按钮组件。如果我只使用onClick = {window.player.play}，则当页面加载并导致错误时，播放器不存在。

我希望播放/暂停组件是VideoPlayer的兄弟姐妹：

<div>
  <VideoPlayer props />
  <PlayButton />
  <PauseButton />
</div>

从其他组件访问我的播放器的最佳方式是什么？

import React from 'react';

export default class VideoPlayer extends React.Component {
      componentDidMount() {
        // instantiate video.js

    this.player = window.videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this)
    });
    window.player = this.player;
    }

  // 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>

    )
  }
}

Answer 1

您不应直接在window.player事件上调用onClick，因为每次组件呈现时都会调用它。 onClick需要function，因此您可以将其称为

onClick = {() => {if(window.player) {window.player.play()}}}

从其他组件访问react组件中的videojs player

1 个答案: