Reactjs在点击音频播放器时重新启动视频

Question

我正在使用反应敏感的音频播放器和视频反应。当有人前进到下一个音频播放列表元素时，我想重新开始播放视频。

由于这些都是第三方组件而且没有父母 - ＆gt;兄弟关系，当音频播放器上发生事件时，我不确定如何触发事件来重启视频。

基于以下内容，有一个名为onMediaEvent的道具，但我不清楚如何有效地编写restartVideo。谢谢你的任何指示。

import React, { Component } from 'react';
import axios from 'axios';
import { Button, PageHeader } from 'react-bootstrap';
import { Player, ControlBar, ReplayControl,
  ForwardControl, CurrentTimeDisplay,
  TimeDivider, PlaybackRateMenuButton, VolumeMenuButton
} from 'video-react';
var AudioPlayer = require('react-responsive-audio-player');



class App extends React.Component {
    render() {
      return (
      <div>
        <PageHeader>Video Player <small>demo</small></PageHeader>
        <VideoPlayer />
        <AudioP />
      </div>
      );
    }

  }


class AudioP extends React.Component {

   state = {
      playlist:   [
          { url: 'https://www.bensound.com/bensound-music/bensound-ukulele.mp3',
            title: 'Ukelele Sound' },
          { url: 'https://www.bensound.com/bensound-music/bensound-anewbeginning.mp3',
            title: 'A New Beginning' }]
          }

    restartVideo() {
      // restart the video here?
    }

   render() {
    return (
    <div>
        <AudioPlayer ref="audioPlayer" style={{marginTop: 10}} 
            playlist={this.state.playlist} 
            onMediaEvent={{
              'play': this.restartVideo  
              // how to restart the video here?            
            }}
        />     
    </div>

      )
   }

}  


class VideoPlayer extends React.Component {

    render() {
      return (
      <div>
         <Player ref="player">
              <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
              <ControlBar>
                <ReplayControl seconds={10} order={1.1} />
                <ForwardControl seconds={30} order={1.2} />
              </ControlBar>
            </Player>

    </div>      
    )}
}

export default App;