React中借助react-responsive-audio-player触发video-react视频重启问题

Hey there! I’ve dealt with similar cross-component communication headaches when working with third-party React libraries before, so I totally get where you’re stuck. Let’s walk through a couple of solid solutions to get your video restarting when the audio playlist moves to the next track.

Solution 1: React Context (Recommended, Native React Approach) #

Since your audio and video components don’t share a parent/child relationship, React Context is a clean way to share the video control logic between them.

Step 1: Create a Video Control Context

First, make a dedicated context to hold functions for controlling the video:

// VideoControlContext.js
import { createContext, useContext, useState, useCallback } from 'react';

const VideoControlContext = createContext();

export function VideoControlProvider({ children }) {
  const [videoRef, setVideoRef] = useState(null);

  // Define the restart function that interacts with the video-react player
  const restartVideo = useCallback(() => {
    if (videoRef?.current) {
      videoRef.current.seek(0); // Jump back to the start of the video
      videoRef.current.play(); // Trigger playback
    }
  }, [videoRef]);

  return (
    <VideoControlContext.Provider value={{ setVideoRef, restartVideo }}>
      {children}
    </VideoControlContext.Provider>
  );
}

// Custom hook to access the context easily
export function useVideoControl() {
  return useContext(VideoControlContext);
}

Step 2: Hook Up the Video Component to the Context

Add the video-react player’s ref to the context so we can control it later:

// YourVideoComponent.js
import { Player } from 'video-react';
import { useVideoControl } from './VideoControlContext';
import { useRef, useEffect } from 'react';

function YourVideoComponent() {
  const videoPlayerRef = useRef(null);
  const { setVideoRef } = useVideoControl();

  useEffect(() => {
    // Pass the video player ref to the context when it loads
    if (videoPlayerRef.current) {
      setVideoRef(videoPlayerRef);
    }
  }, [setVideoRef]);

  return (
    <Player ref={videoPlayerRef} src="your-video-source.mp4">
      {/* Add your video controls/configuration here */}
    </Player>
  );
}

Step 3: Trigger Restart from the Audio Player

Use the context’s restartVideo function in your audio player’s onMediaEvent handler:

// YourAudioPlayerComponent.js
import ReactAudioPlayer from 'react-responsive-audio-player';
import { useVideoControl } from './VideoControlContext';

function YourAudioPlayerComponent() {
  const { restartVideo } = useVideoControl();

  const handleMediaEvent = (event) => {
    // First, verify the event type that corresponds to switching to the next track
    // You might need to log the event to confirm (e.g., console.log(event))
    // Common triggers could be 'ended' (when current track finishes) or 'next' (manual next press)
    if (event.type === 'ended' || event.type === 'next') {
      restartVideo(); // Fire the video restart
    }
  };

  return (
    <ReactAudioPlayer
      onMediaEvent={handleMediaEvent}
      playlist={yourAudioPlaylist}
      {/* Add your audio player configuration here */}
    />
  );
}

Step 4: Wrap Components in the Provider

Make sure both components are nested inside the context provider in your root app:

// App.js
import { VideoControlProvider } from './VideoControlContext';
import YourVideoComponent from './YourVideoComponent';
import YourAudioPlayerComponent from './YourAudioPlayerComponent';

function App() {
  return (
    <VideoControlProvider>
      <YourVideoComponent />
      <YourAudioPlayerComponent />
    </VideoControlProvider>
  );
}

Solution 2: Custom Event Emitter (Pub/Sub Pattern) #

If you prefer a lighter approach without Context, a simple pub/sub event emitter works great for cross-component communication.

Step 1: Create an Event Emitter

Make a reusable emitter to broadcast and listen for events:

// eventEmitter.js
class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(eventName, callback) {
    this.events[eventName] = this.events[eventName] || [];
    this.events[eventName].push(callback);
  }

  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(...args));
    }
  }

  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
    }
  }
}

export const audioEventEmitter = new EventEmitter();

Step 2: Subscribe to the Restart Event in the Video Component

Listen for the restart signal and trigger the video reset:

// YourVideoComponent.js
import { Player } from 'video-react';
import { useRef, useEffect } from 'react';
import { audioEventEmitter } from './eventEmitter';

function YourVideoComponent() {
  const videoPlayerRef = useRef(null);

  useEffect(() => {
    const handleRestart = () => {
      if (videoPlayerRef.current) {
        videoPlayerRef.current.seek(0);
        videoPlayerRef.current.play();
      }
    };

    // Subscribe to the restart event
    audioEventEmitter.on('restartVideo', handleRestart);

    // Clean up the subscription when the component unmounts
    return () => {
      audioEventEmitter.off('restartVideo', handleRestart);
    };
  }, []);

  return (
    <Player ref={videoPlayerRef} src="your-video-source.mp4">
      {/* Video configuration */}
    </Player>
  );
}

Step 3: Emit the Restart Event from the Audio Player

Trigger the event when the audio playlist moves to the next track:

// YourAudioPlayerComponent.js
import ReactAudioPlayer from 'react-responsive-audio-player';
import { audioEventEmitter } from './eventEmitter';

function YourAudioPlayerComponent() {
  const handleMediaEvent = (event) => {
    if (event.type === 'ended' || event.type === 'next') {
      audioEventEmitter.emit('restartVideo');
    }
  };

  return (
    <ReactAudioPlayer
      onMediaEvent={handleMediaEvent}
      playlist={yourAudioPlaylist}
      {/* Audio player configuration */}
    />
  );
}

Quick Notes #

• Verify Event Types: Be sure to log the event object from onMediaEvent to confirm exactly which event corresponds to switching tracks (it might vary based on the audio player’s implementation).
• Video-React API: The seek(0) and play() methods are part of video-react’s public API, so they’re safe to use directly via the component ref.

内容的提问来源于stack exchange，提问作者jrjames83