1

I am using react-responsive-audio-player in conjunction with video-react. When someone advances to the next audio playlist element, I would like to restart the video's playback.

Since these are both 3rd party components and do not have a Parent -> Sibling relationship, I'm not sure how to trigger an event to restart the video, when an event occurs on the audio player.

Based on the below, the has a prop called onMediaEvent, but I'm not clear on how to write restartVideo effectively. Thanks for any pointers. 

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;
jrjames83
  • 901
  • 2
  • 9
  • 22
  • Try a ref on the video player and use javascript to trigger the play with an onClick. Not sure how the the react-video package works but worth a try. `ref={video => this.video=video}` and `onClick={() => this.video.play()}` on the video and audio respectively. – benjaminadk Mar 30 '18 at 12:50
  • Ah, alright - yeah it does say media playback reasons on the refs overview page in the docs. I was trying to steer clear. Will report back! – jrjames83 Mar 30 '18 at 13:22

0 Answers0