[Remotion Provider] "useMediaPlayback must be used inside a <BufferingContext>"

[bennobuilder]

Current Behavior:

When adding the Remotion Audio component within a Remotion Composition (here RemotionVideo.tsx) using the Vidstack player setup, the following error is encountered:

useMediaPlayback must be used inside a <BufferingContext>

Expected Behavior:

The Remotion Audio component should function without causing errors within the Vidstack player setup.

Steps To Reproduce:

1. Set up a new Vite React project:

   pnpm create vite my-remotion-app --template react-ts

2. Install dependencies (following docs):

   pnpm install @vidstack/react@next remotion

3. Create the RemotionVideo.tsx with the Remotion Audio component:

   import { AbsoluteFill, Audio, useCurrentFrame } from "remotion";
   
   export const RemotionVideo: React.FC = () => {
     const frame = useCurrentFrame();
     return (
       <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", fontSize: 100, backgroundColor: "white" }}>
         The current frame is {frame}.
         <Audio src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" />
       </AbsoluteFill>
     );
   };

4. Set up Vidstack player in App.tsx as follows (following docs):

import '@vidstack/react/player/styles/default/layouts/video.css';
import '@vidstack/react/player/styles/default/theme.css';

import { MediaPlayer, MediaProvider } from '@vidstack/react';
import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
import { RemotionProviderLoader } from '@vidstack/react/player/remotion';
import { RemotionVideo } from './RemotionVideo';

function App() {
  return (
    <MediaPlayer
      title="video_title_here"
      src={{
        src: RemotionVideo,
        type: 'video/remotion',
        durationInFrames: 300,
        compositionWidth: 1920,
        compositionHeight: 1080,
        fps: 30,
        initialFrame: 0,
      }}
    >
      <MediaProvider loaders={[RemotionProviderLoader]} />
      <DefaultVideoLayout icons={defaultLayoutIcons} />
    </MediaPlayer>
  );
}

export default App;

5. Run the app and observe the error in the console.

Environment:

• Framework: React
• Player: Vidstack @vidstack/react@next (^1.12.11)
• Meta Framework: Vite
• Node: v20.14.0
• OS: macOS Ventura
• Browser: Chrome

Anything Else?

• Remotion Issue: Export BufferingProvider? remotion-dev/remotion#4367
• Here’s a screenshot of the error: