从其他组件访问反应组件中的videojs播放器

Question

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

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

我希望 Play/Pause 组件成为 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

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

这样称呼它

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

从其他组件访问反应组件中的videojs播放器

Accessing videojs player in react component from other component

video.js

reactjs