Techniques for preventing multiple instances of ReactPlayer from playing audio simultaneously.

[dancrew32]

I recently setup this auto-playing video experiment. It is setup to autoplay videos, muted and loop them ala Instagram. Somehow multiple instances of the same video's audio stream manage to queue up and I am unable to recreate the issue on my personal machine (of course).

Using VisibilitySensor, when the user scrolls the video into view, it mounts the ReactPlayer. When the player scrolls out of view, it sets state to stop playing, mute the audio. When it scrolls back into view, it is supposed to resume play with audio muted.

On certain machines, when loading an mp4 in the player, the audio stream will begin duplicating and it spirals out of control :(

Any chance there can be a core change to ensure multiple audio streams do not play if multiple instances exist?

export class DocumentVideo extends React.Component<VideoPropsType, VideoStateType> {
  state = {
    playing: false,
    muted: true,
    loop: true,
    loaded: false,
    initialized: false,
  };

  onClick = () => {
    this.setState({
      muted: !this.state.muted,
    });
  };

  onReady = () => {
    this.setState({
      loaded: true,
      playing: true,
      loop: true,
    });
  };

  onVisibilityChange = (isVisible: boolean) => {
    if (isVisible) {
      this.setState({
        initialized: isVisible,
        playing: true,
        muted: true,
        loop: true,
      });
    } else {
      this.setState({
        playing: false,
        loop: false,
        muted: true,
      });
    }
  };

  render() {
    return (
      <div className="document-video-container" onClick={this.onClick}>
        <ErrorBoundary
          onError={(error: Object, componentStack: string) => {
            log.error(`Cannot render video: ${error.message}`, {
              url: this.props.url,
              message: error.message,
              componentStack: componentStack,
            });
          }}
        >
          <VisibilitySensor
            delayedCall={!this.state.initialized}
            partialVisibility={!this.state.initialized}
            onChange={this.onVisibilityChange}
          />
          {this.state.initialized && (
            <ReactPlayer
              onReady={this.onReady}
              className={classNames('document-video-player', {
                'document-video-loaded': this.state.loaded,
              })}
              controls
              playing={this.state.playing}
              muted={this.state.muted}
              loop={this.state.loop}
              url={this.props.url}
              width="100%"
              height="100%"
            />
          )}
        </ErrorBoundary>
      </div>
    );
  }
}

[cookpete]

On certain machines, when loading an mp4 in the player, the audio stream will begin duplicating and it spirals out of control :(

What exactly does this mean? I can't see how the same audio for a single video could be "queued" up and played over each other, unless you are somehow rendering multiple videos on top of each other, or some hidden somehow?

I am unable to recreate the issue on my personal machine (of course).

This makes things very difficult to fix :)

[dancrew32]

Sorry for the original, nonsensical report. I will try and setup a sandbox repo to recreate this and share a screen recording of it here soon.

Users would scroll down to the video, the visibility sensor would trigger and mount the ReactPlayer, the audio would somehow not be muted by default even though we specified muted: true, they would scroll past the video until it was out of the viewport, they would scroll back up to the video until it was in the viewport, then the audio stream would strangely duplicate.

When I say duplicate, I mean that the original audio stream would continue playing and a new audio stream would begin for the same video, starting at the beginning. The constructive interference of the two tracks playing simultaneously became overwhelmingly loud. The users could repeat the scroll-out, scroll-in action and start a third stream.

Anywho, I will try and get that sandbox setup! Thanks for bearing with me!

[chigoKawa]

Did you resolve this?