@remotion/media 4.0.355 → 4.0.356

package/dist/esm/index.mjs

@@ -44,6 +44,7 @@ var SharedAudioContext = createContext2(null);
 // src/audio/audio-for-rendering.tsx
 import { useContext as useContext4, useLayoutEffect, useState as useState3 } from "react";
 import {
+  Audio,
   cancelRender as cancelRender2,
   Internals as Internals6,
   useCurrentFrame,
@@ -159,14 +160,26 @@ var makeAudioCache = () => {
 
 // src/audio-extraction/audio-iterator.ts
 var extraThreshold = 1.5;
+var warned = {};
+var warnAboutMatroskaOnce = (src, logLevel) => {
+  if (warned[src]) {
+    return;
+  }
+  warned[src] = true;
+  Internals.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio from ${src} will need to be read from the beginning. https://www.remotion.dev/docs/media/support#matroska-limitation`);
+};
 var makeAudioIterator = ({
   audioSampleSink,
   isMatroska,
   startTimestamp,
   src,
-  actualMatroskaTimestamps
+  actualMatroskaTimestamps,
+  logLevel
 }) => {
   const sampleIterator = audioSampleSink.samples(isMatroska ? 0 : Math.max(0, startTimestamp - extraThreshold));
+  if (isMatroska) {
+    warnAboutMatroskaOnce(src, logLevel);
+  }
   let fullDuration = null;
   const cache = makeAudioCache();
   let lastUsed = Date.now();
@@ -210,7 +223,7 @@ var makeAudioIterator = ({
     }
     return samples;
   };
-  const logOpenFrames = (logLevel) => {
+  const logOpenFrames = () => {
     Internals.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, cache.getOpenTimestamps().map((t) => t.toFixed(3)).join(", "));
   };
   const getCacheStats = () => {
@@ -262,14 +275,16 @@ var makeAudioManager = () => {
     src,
     audioSampleSink,
     isMatroska,
-    actualMatroskaTimestamps
+    actualMatroskaTimestamps,
+    logLevel
   }) => {
     const iterator = makeAudioIterator({
       audioSampleSink,
       isMatroska,
       startTimestamp: timeInSeconds,
       src,
-      actualMatroskaTimestamps
+      actualMatroskaTimestamps,
+      logLevel
     });
     iterators.push(iterator);
     return iterator;
@@ -321,7 +336,8 @@ var makeAudioManager = () => {
       timeInSeconds,
       audioSampleSink,
       isMatroska,
-      actualMatroskaTimestamps
+      actualMatroskaTimestamps,
+      logLevel
     });
   };
   const getCacheStats = () => {
@@ -334,9 +350,9 @@ var makeAudioManager = () => {
     }
     return { count: totalCount, totalSize };
   };
-  const logOpenFrames = (logLevel) => {
+  const logOpenFrames = () => {
     for (const iterator of iterators) {
-      iterator.logOpenFrames(logLevel);
+      iterator.logOpenFrames();
     }
   };
   return {
@@ -359,7 +375,8 @@ import {
   Input,
   MATROSKA,
   UrlSource,
-  VideoSampleSink
+  VideoSampleSink,
+  WEBM
 } from "mediabunny";
 
 // src/video-extraction/keyframe-bank.ts
@@ -510,23 +527,78 @@ var rememberActualMatroskaTimestamps = (isMatroska) => {
 };
 
 // src/video-extraction/get-frames-since-keyframe.ts
+var getRetryDelay = () => {
+  return null;
+};
+var getFormatOrNull = async (input) => {
+  try {
+    return await input.getFormat();
+  } catch {
+    return null;
+  }
+};
 var getSinks = async (src) => {
   const input = new Input({
     formats: ALL_FORMATS,
-    source: new UrlSource(src)
+    source: new UrlSource(src, {
+      getRetryDelay
+    })
   });
-  const format = await input.getFormat();
-  const videoTrack = await input.getPrimaryVideoTrack();
-  const audioTrack = await input.getPrimaryAudioTrack();
-  const isMatroska = format === MATROSKA;
-  return new WeakRef({
-    video: videoTrack ? {
+  const format = await getFormatOrNull(input);
+  const isMatroska = format === MATROSKA || format === WEBM;
+  const getVideoSinks = async () => {
+    if (format === null) {
+      return "unknown-container-format";
+    }
+    const videoTrack = await input.getPrimaryVideoTrack();
+    if (!videoTrack) {
+      return "no-video-track";
+    }
+    const canDecode = await videoTrack.canDecode();
+    if (!canDecode) {
+      return "cannot-decode";
+    }
+    return {
       sampleSink: new VideoSampleSink(videoTrack),
       packetSink: new EncodedPacketSink(videoTrack)
-    } : null,
-    audio: audioTrack ? {
+    };
+  };
+  let videoSinksPromise = null;
+  const getVideoSinksPromise = () => {
+    if (videoSinksPromise) {
+      return videoSinksPromise;
+    }
+    videoSinksPromise = getVideoSinks();
+    return videoSinksPromise;
+  };
+  const audioSinksPromise = {};
+  const getAudioSinks = async (index) => {
+    if (format === null) {
+      return "unknown-container-format";
+    }
+    const audioTracks = await input.getAudioTracks();
+    const audioTrack = audioTracks[index];
+    if (!audioTrack) {
+      return "no-audio-track";
+    }
+    const canDecode = await audioTrack.canDecode();
+    if (!canDecode) {
+      return "cannot-decode-audio";
+    }
+    return {
       sampleSink: new AudioSampleSink(audioTrack)
-    } : null,
+    };
+  };
+  const getAudioSinksPromise = (index) => {
+    if (audioSinksPromise[index]) {
+      return audioSinksPromise[index];
+    }
+    audioSinksPromise[index] = getAudioSinks(index);
+    return audioSinksPromise[index];
+  };
+  return new WeakRef({
+    getVideo: () => getVideoSinksPromise(),
+    getAudio: (index) => getAudioSinksPromise(index),
     actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
     isMatroska,
     getDuration: () => input.computeDuration()
@@ -1006,16 +1078,24 @@ var extractAudio = async ({
   durationInSeconds,
   logLevel,
   loop,
-  playbackRate
+  playbackRate,
+  audioStreamIndex
 }) => {
-  const { audio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSinkWeak(src, logLevel);
+  const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSinkWeak(src, logLevel);
   let duration = null;
   if (loop) {
     duration = await getDuration();
   }
-  if (audio === null) {
+  const audio = await getAudio(audioStreamIndex);
+  if (audio === "no-audio-track") {
     return { data: null, durationInSeconds: null };
   }
+  if (audio === "cannot-decode-audio") {
+    return "cannot-decode";
+  }
+  if (audio === "unknown-container-format") {
+    return "unknown-container-format";
+  }
   const timeInSeconds = loop ? unloopedTimeInSeconds % duration : unloopedTimeInSeconds;
   const sampleIterator = await audioManager.getIterator({
     src,
@@ -1026,7 +1106,7 @@ var extractAudio = async ({
     logLevel
   });
   const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
-  audioManager.logOpenFrames(logLevel);
+  audioManager.logOpenFrames();
   const audioDataArray = [];
   for (let i = 0;i < samples.length; i++) {
     const sample = samples[i];
@@ -1082,11 +1162,17 @@ var extractFrame = async ({
   loop
 }) => {
   const sink = await getSinkWeak(src, logLevel);
-  const { video, getDuration } = sink;
-  if (video === null) {
+  const video = await sink.getVideo();
+  if (video === "no-video-track") {
     throw new Error(`No video track found for ${src}`);
   }
-  const timeInSeconds = loop ? unloopedTimeinSeconds % await getDuration() : unloopedTimeinSeconds;
+  if (video === "cannot-decode") {
+    return "cannot-decode";
+  }
+  if (video === "unknown-container-format") {
+    return "unknown-container-format";
+  }
+  const timeInSeconds = loop ? unloopedTimeinSeconds % await sink.getDuration() : unloopedTimeinSeconds;
   const keyframeBank = await keyframeManager.requestKeyframeBank({
     packetSink: video.packetSink,
     videoSampleSink: video.sampleSink,
@@ -1107,29 +1193,57 @@ var extractFrameAndAudio = async ({
   playbackRate,
   includeAudio,
   includeVideo,
-  loop
+  loop,
+  audioStreamIndex
 }) => {
-  const [frame, audio] = await Promise.all([
-    includeVideo ? extractFrame({
-      src,
-      timeInSeconds,
-      logLevel,
-      loop
-    }) : null,
-    includeAudio ? extractAudio({
-      src,
-      timeInSeconds,
-      durationInSeconds,
-      logLevel,
-      loop,
-      playbackRate
-    }) : null
-  ]);
-  return {
-    frame: frame?.toVideoFrame() ?? null,
-    audio: audio?.data ?? null,
-    durationInSeconds: audio?.durationInSeconds ?? null
-  };
+  try {
+    const [frame, audio] = await Promise.all([
+      includeVideo ? extractFrame({
+        src,
+        timeInSeconds,
+        logLevel,
+        loop
+      }) : null,
+      includeAudio ? extractAudio({
+        src,
+        timeInSeconds,
+        durationInSeconds,
+        logLevel,
+        loop,
+        playbackRate,
+        audioStreamIndex
+      }) : null
+    ]);
+    if (frame === "cannot-decode") {
+      return "cannot-decode";
+    }
+    if (frame === "unknown-container-format") {
+      return "unknown-container-format";
+    }
+    if (audio === "unknown-container-format") {
+      if (frame !== null) {
+        frame?.close();
+      }
+      return "unknown-container-format";
+    }
+    if (audio === "cannot-decode") {
+      if (frame !== null) {
+        frame?.close();
+      }
+      return "cannot-decode";
+    }
+    return {
+      frame: frame?.toVideoFrame() ?? null,
+      audio: audio?.data ?? null,
+      durationInSeconds: audio?.durationInSeconds ?? null
+    };
+  } catch (err) {
+    const error = err;
+    if (error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource")) {
+      return "network-error";
+    }
+    throw err;
+  }
 };
 
 // src/video-extraction/extract-frame-via-broadcast-channel.ts
@@ -1138,7 +1252,7 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
     const data = event.data;
     if (data.type === "request") {
       try {
-        const { frame, audio, durationInSeconds } = await extractFrameAndAudio({
+        const result = await extractFrameAndAudio({
           src: data.src,
           timeInSeconds: data.timeInSeconds,
           logLevel: data.logLevel,
@@ -1146,8 +1260,34 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
           playbackRate: data.playbackRate,
           includeAudio: data.includeAudio,
           includeVideo: data.includeVideo,
-          loop: data.loop
+          loop: data.loop,
+          audioStreamIndex: data.audioStreamIndex
         });
+        if (result === "cannot-decode") {
+          const cannotDecodeResponse = {
+            type: "response-cannot-decode",
+            id: data.id
+          };
+          window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
+          return;
+        }
+        if (result === "network-error") {
+          const networkErrorResponse = {
+            type: "response-network-error",
+            id: data.id
+          };
+          window.remotion_broadcastChannel.postMessage(networkErrorResponse);
+          return;
+        }
+        if (result === "unknown-container-format") {
+          const unknownContainerFormatResponse = {
+            type: "response-unknown-container-format",
+            id: data.id
+          };
+          window.remotion_broadcastChannel.postMessage(unknownContainerFormatResponse);
+          return;
+        }
+        const { frame, audio, durationInSeconds } = result;
         const videoFrame = frame;
         const imageBitmap = videoFrame ? await createImageBitmap(videoFrame) : null;
         if (videoFrame) {
@@ -1184,7 +1324,8 @@ var extractFrameViaBroadcastChannel = ({
   includeAudio,
   includeVideo,
   isClientSideRendering,
-  loop
+  loop,
+  audioStreamIndex
 }) => {
   if (isClientSideRendering || window.remotion_isMainTab) {
     return extractFrameAndAudio({
@@ -1195,7 +1336,8 @@ var extractFrameViaBroadcastChannel = ({
       playbackRate,
       includeAudio,
       includeVideo,
-      loop
+      loop,
+      audioStreamIndex
     });
   }
   const requestId = crypto.randomUUID();
@@ -1205,17 +1347,39 @@ var extractFrameViaBroadcastChannel = ({
       if (!data) {
         return;
       }
-      if (data.type === "response-success" && data.id === requestId) {
+      if (data.id !== requestId) {
+        return;
+      }
+      if (data.type === "response-success") {
         resolve({
           frame: data.frame ? data.frame : null,
           audio: data.audio ? data.audio : null,
           durationInSeconds: data.durationInSeconds ? data.durationInSeconds : null
         });
         window.remotion_broadcastChannel.removeEventListener("message", onMessage);
-      } else if (data.type === "response-error" && data.id === requestId) {
+        return;
+      }
+      if (data.type === "response-error") {
         reject(data.errorStack);
         window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
+      }
+      if (data.type === "response-cannot-decode") {
+        resolve("cannot-decode");
+        window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
       }
+      if (data.type === "response-network-error") {
+        resolve("network-error");
+        window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
+      }
+      if (data.type === "response-unknown-container-format") {
+        resolve("unknown-container-format");
+        window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
+      }
+      throw new Error(`Invalid message: ${JSON.stringify(data)}`);
     };
     window.remotion_broadcastChannel.addEventListener("message", onMessage);
   });
@@ -1229,7 +1393,8 @@ var extractFrameViaBroadcastChannel = ({
     playbackRate,
     includeAudio,
     includeVideo,
-    loop
+    loop,
+    audioStreamIndex
   };
   window.remotion_broadcastChannel.postMessage(request);
   let timeoutId;
@@ -1247,6 +1412,7 @@ var extractFrameViaBroadcastChannel = ({
 };
 
 // src/audio/audio-for-rendering.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var AudioForRendering = ({
   volume: volumeProp,
   playbackRate,
@@ -1256,7 +1422,13 @@ var AudioForRendering = ({
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
   logLevel = window.remotion_logLevel,
-  loop
+  loop,
+  fallbackHtml5AudioProps,
+  audioStreamIndex,
+  showInTimeline,
+  style,
+  name,
+  disallowFallbackToHtml5Audio
 }) => {
   const frame = useCurrentFrame();
   const absoluteFrame = Internals6.useTimelinePosition();
@@ -1273,6 +1445,7 @@ var AudioForRendering = ({
   }
   const { fps } = videoConfig;
   const { delayRender, continueRender } = useDelayRender();
+  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState3(false);
   useLayoutEffect(() => {
     const actualFps = playbackRate ? fps / playbackRate : fps;
     const timestamp = frame / actualFps;
@@ -1299,8 +1472,34 @@ var AudioForRendering = ({
       includeAudio: shouldRenderAudio,
       includeVideo: false,
       isClientSideRendering: environment.isClientSideRendering,
-      loop: loop ?? false
-    }).then(({ audio, durationInSeconds: assetDurationInSeconds }) => {
+      loop: loop ?? false,
+      audioStreamIndex: audioStreamIndex ?? 0
+    }).then((result) => {
+      if (result === "unknown-container-format") {
+        if (disallowFallbackToHtml5Audio) {
+          cancelRender2(new Error(`Unknown container format ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
+        }
+        Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Audio>`);
+        setReplaceWithHtml5Audio(true);
+        return;
+      }
+      if (result === "cannot-decode") {
+        if (disallowFallbackToHtml5Audio) {
+          cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
+        }
+        Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <Audio>`);
+        setReplaceWithHtml5Audio(true);
+        return;
+      }
+      if (result === "network-error") {
+        if (disallowFallbackToHtml5Audio) {
+          cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
+        }
+        Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${src}, falling back to <Audio>`);
+        setReplaceWithHtml5Audio(true);
+        return;
+      }
+      const { audio, durationInSeconds: assetDurationInSeconds } = result;
       const volumePropsFrame = frameForVolumeProp({
         behavior: loopVolumeCurveBehavior ?? "repeat",
         loop: loop ?? false,
@@ -1342,6 +1541,7 @@ var AudioForRendering = ({
     delayRender,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
+    disallowFallbackToHtml5Audio,
     environment.isClientSideRendering,
     fps,
     frame,
@@ -1355,13 +1555,34 @@ var AudioForRendering = ({
     src,
     startsAt,
     unregisterRenderAsset,
-    volumeProp
+    volumeProp,
+    audioStreamIndex
   ]);
+  if (replaceWithHtml5Audio) {
+    return /* @__PURE__ */ jsx2(Audio, {
+      src,
+      playbackRate,
+      muted,
+      loop,
+      volume: volumeProp,
+      delayRenderRetries,
+      delayRenderTimeoutInMilliseconds,
+      style,
+      loopVolumeCurveBehavior,
+      audioStreamIndex,
+      useWebAudioApi: fallbackHtml5AudioProps?.useWebAudioApi,
+      onError: fallbackHtml5AudioProps?.onError,
+      toneFrequency: fallbackHtml5AudioProps?.toneFrequency,
+      acceptableTimeShiftInSeconds: fallbackHtml5AudioProps?.acceptableTimeShiftInSeconds,
+      name,
+      showInTimeline
+    });
+  }
   return null;
 };
 
 // src/audio/audio.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var {
   validateMediaTrimProps,
   resolveTrimProps,
@@ -1369,7 +1590,7 @@ var {
   AudioForPreview
 } = Internals7;
 var onRemotionError = (_e) => {};
-var Audio = (props) => {
+var Audio2 = (props) => {
   const audioContext = useContext5(SharedAudioContext);
   const {
     trimBefore,
@@ -1415,21 +1636,21 @@ var Audio = (props) => {
     }
   }, [loop]);
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx2(Sequence, {
+    return /* @__PURE__ */ jsx3(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx2(Audio, {
+      children: /* @__PURE__ */ jsx3(Audio2, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps
       })
     });
   }
-  validateMediaProps(props, "Video");
+  validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Audio");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx2(AudioForRendering, {
+    return /* @__PURE__ */ jsx3(AudioForRendering, {
       ...otherProps
     });
   }
@@ -1438,7 +1659,7 @@ var Audio = (props) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx2(AudioForPreview, {
+  return /* @__PURE__ */ jsx3(AudioForPreview, {
     _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
     _remotionInternalStack: stack ?? null,
     shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0,
@@ -1450,27 +1671,796 @@ var Audio = (props) => {
     showInTimeline: showInTimeline ?? true
   });
 };
+
 // src/video/video.tsx
-import { useCallback as useCallback3 } from "react";
-import { Internals as Internals9, Sequence as Sequence2, useRemotionEnvironment as useRemotionEnvironment5 } from "remotion";
+import { Internals as Internals11, Sequence as Sequence2, useRemotionEnvironment as useRemotionEnvironment5 } from "remotion";
+
+// src/video/video-for-preview.tsx
+import { ALL_FORMATS as ALL_FORMATS3, Input as Input3, UrlSource as UrlSource3 } from "mediabunny";
+import { useContext as useContext6, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import {
+  Internals as Internals9,
+  Loop,
+  useBufferState,
+  useCurrentFrame as useCurrentFrame2,
+  useVideoConfig
+} from "remotion";
+
+// src/video/media-player.ts
+import {
+  ALL_FORMATS as ALL_FORMATS2,
+  AudioBufferSink,
+  CanvasSink,
+  Input as Input2,
+  UrlSource as UrlSource2
+} from "mediabunny";
+import { Internals as Internals8 } from "remotion";
+
+// src/video/timeout-utils.ts
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function withTimeout(promise, timeoutMs, errorMessage = "Operation timed out") {
+  let timeoutId = null;
+  const timeoutPromise = new Promise((_, reject) => {
+    timeoutId = window.setTimeout(() => {
+      reject(new Error(errorMessage));
+    }, timeoutMs);
+  });
+  return Promise.race([
+    promise.finally(() => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    }),
+    timeoutPromise
+  ]);
+}
+
+// src/video/media-player.ts
+var SEEK_THRESHOLD = 0.05;
+var AUDIO_BUFFER_TOLERANCE_THRESHOLD = 0.1;
+
+class MediaPlayer {
+  canvas;
+  context;
+  src;
+  logLevel;
+  playbackRate;
+  canvasSink = null;
+  videoFrameIterator = null;
+  nextFrame = null;
+  audioSink = null;
+  audioBufferIterator = null;
+  queuedAudioNodes = new Set;
+  gainNode = null;
+  sharedAudioContext;
+  audioSyncAnchor = 0;
+  playing = false;
+  muted = false;
+  animationFrameId = null;
+  videoAsyncId = 0;
+  initialized = false;
+  totalDuration = 0;
+  isBuffering = false;
+  onBufferingChangeCallback;
+  audioBufferHealth = 0;
+  audioIteratorStarted = false;
+  HEALTHY_BUFER_THRESHOLD_SECONDS = 1;
+  onVideoFrameCallback;
+  constructor({
+    canvas,
+    src,
+    logLevel,
+    sharedAudioContext
+  }) {
+    this.canvas = canvas;
+    this.src = src;
+    this.logLevel = logLevel ?? "info";
+    this.sharedAudioContext = sharedAudioContext;
+    this.playbackRate = 1;
+    const context = canvas.getContext("2d", {
+      alpha: false,
+      desynchronized: true
+    });
+    if (!context) {
+      throw new Error("Could not get 2D context from canvas");
+    }
+    this.context = context;
+  }
+  input = null;
+  isReady() {
+    return this.initialized && Boolean(this.sharedAudioContext);
+  }
+  hasAudio() {
+    return Boolean(this.audioSink && this.sharedAudioContext && this.gainNode);
+  }
+  isCurrentlyBuffering() {
+    return this.isBuffering && Boolean(this.bufferingStartedAtMs);
+  }
+  async initialize(startTime = 0) {
+    try {
+      const urlSource = new UrlSource2(this.src);
+      const input = new Input2({
+        source: urlSource,
+        formats: ALL_FORMATS2
+      });
+      this.input = input;
+      this.totalDuration = await input.computeDuration();
+      const videoTrack = await input.getPrimaryVideoTrack();
+      const audioTrack = await input.getPrimaryAudioTrack();
+      if (!videoTrack && !audioTrack) {
+        throw new Error(`No video or audio track found for ${this.src}`);
+      }
+      if (videoTrack) {
+        this.canvasSink = new CanvasSink(videoTrack, {
+          poolSize: 2,
+          fit: "contain"
+        });
+        this.canvas.width = videoTrack.displayWidth;
+        this.canvas.height = videoTrack.displayHeight;
+      }
+      if (audioTrack && this.sharedAudioContext) {
+        this.audioSink = new AudioBufferSink(audioTrack);
+        this.gainNode = this.sharedAudioContext.createGain();
+        this.gainNode.connect(this.sharedAudioContext.destination);
+      }
+      if (this.sharedAudioContext) {
+        this.audioSyncAnchor = this.sharedAudioContext.currentTime - startTime;
+      }
+      this.initialized = true;
+      const mediaTime = startTime * this.playbackRate;
+      await this.startAudioIterator(mediaTime);
+      await this.startVideoIterator(mediaTime);
+      this.startRenderLoop();
+    } catch (error) {
+      Internals8.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
+      throw error;
+    }
+  }
+  cleanupAudioQueue() {
+    for (const node of this.queuedAudioNodes) {
+      node.stop();
+    }
+    this.queuedAudioNodes.clear();
+  }
+  async cleanAudioIteratorAndNodes() {
+    await this.audioBufferIterator?.return();
+    this.audioBufferIterator = null;
+    this.audioIteratorStarted = false;
+    this.audioBufferHealth = 0;
+    this.cleanupAudioQueue();
+  }
+  async seekTo(time) {
+    if (!this.isReady())
+      return;
+    const newTime = Math.max(0, Math.min(time, this.totalDuration));
+    const currentPlaybackTime = this.getPlaybackTime();
+    const isSignificantSeek = Math.abs(newTime - currentPlaybackTime) > SEEK_THRESHOLD;
+    if (isSignificantSeek) {
+      this.nextFrame = null;
+      this.audioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
+      if (this.audioSink) {
+        await this.cleanAudioIteratorAndNodes();
+      }
+      const mediaTime = newTime * this.playbackRate;
+      await this.startAudioIterator(mediaTime);
+      await this.startVideoIterator(mediaTime);
+    }
+    if (!this.playing) {
+      this.render();
+    }
+  }
+  async play() {
+    if (!this.isReady())
+      return;
+    if (!this.playing) {
+      if (this.sharedAudioContext.state === "suspended") {
+        await this.sharedAudioContext.resume();
+      }
+      this.playing = true;
+      this.startRenderLoop();
+    }
+  }
+  pause() {
+    this.playing = false;
+    this.cleanupAudioQueue();
+    this.stopRenderLoop();
+  }
+  setMuted(muted) {
+    this.muted = muted;
+    if (muted) {
+      this.cleanupAudioQueue();
+    }
+  }
+  setVolume(volume) {
+    if (!this.gainNode) {
+      return;
+    }
+    const appliedVolume = Math.max(0, volume);
+    this.gainNode.gain.value = appliedVolume;
+  }
+  async setPlaybackRate(rate) {
+    if (this.playbackRate === rate)
+      return;
+    this.playbackRate = rate;
+    if (this.hasAudio() && this.playing) {
+      const currentPlaybackTime = this.getPlaybackTime();
+      const mediaTime = currentPlaybackTime * rate;
+      await this.cleanAudioIteratorAndNodes();
+      await this.startAudioIterator(mediaTime);
+    }
+  }
+  dispose() {
+    this.input?.dispose();
+    this.stopRenderLoop();
+    this.videoFrameIterator?.return();
+    this.cleanAudioIteratorAndNodes();
+    this.videoAsyncId++;
+  }
+  getPlaybackTime() {
+    return this.sharedAudioContext.currentTime - this.audioSyncAnchor;
+  }
+  getAdjustedTimestamp(mediaTimestamp) {
+    return mediaTimestamp / this.playbackRate;
+  }
+  scheduleAudioChunk(buffer, mediaTimestamp) {
+    const adjustedTimestamp = this.getAdjustedTimestamp(mediaTimestamp);
+    const targetTime = adjustedTimestamp + this.audioSyncAnchor;
+    const delay = targetTime - this.sharedAudioContext.currentTime;
+    const node = this.sharedAudioContext.createBufferSource();
+    node.buffer = buffer;
+    node.playbackRate.value = this.playbackRate;
+    node.connect(this.gainNode);
+    if (delay >= 0) {
+      node.start(targetTime);
+    } else {
+      node.start(this.sharedAudioContext.currentTime, -delay);
+    }
+    this.queuedAudioNodes.add(node);
+    node.onended = () => this.queuedAudioNodes.delete(node);
+  }
+  onBufferingChange(callback) {
+    this.onBufferingChangeCallback = callback;
+  }
+  onVideoFrame(callback) {
+    this.onVideoFrameCallback = callback;
+    if (this.initialized && callback) {
+      callback(this.canvas);
+    }
+  }
+  canRenderVideo() {
+    return !this.hasAudio() || this.audioIteratorStarted && this.audioBufferHealth >= this.HEALTHY_BUFER_THRESHOLD_SECONDS;
+  }
+  startRenderLoop() {
+    if (this.animationFrameId !== null) {
+      return;
+    }
+    this.render();
+  }
+  stopRenderLoop() {
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+  render = () => {
+    if (this.isBuffering) {
+      this.maybeForceResumeFromBuffering();
+    }
+    if (this.shouldRenderFrame()) {
+      this.drawCurrentFrame();
+    }
+    if (this.playing) {
+      this.animationFrameId = requestAnimationFrame(this.render);
+    } else {
+      this.animationFrameId = null;
+    }
+  };
+  shouldRenderFrame() {
+    return !this.isBuffering && this.canRenderVideo() && this.nextFrame !== null && this.getAdjustedTimestamp(this.nextFrame.timestamp) <= this.getPlaybackTime();
+  }
+  drawCurrentFrame() {
+    this.context.drawImage(this.nextFrame.canvas, 0, 0);
+    if (this.onVideoFrameCallback) {
+      this.onVideoFrameCallback(this.canvas);
+    }
+    this.nextFrame = null;
+    this.updateNextFrame();
+  }
+  startAudioIterator = async (startFromSecond) => {
+    if (!this.hasAudio())
+      return;
+    await this.audioBufferIterator?.return();
+    this.audioIteratorStarted = false;
+    this.audioBufferHealth = 0;
+    try {
+      this.audioBufferIterator = this.audioSink.buffers(startFromSecond);
+      this.runAudioIterator(startFromSecond);
+    } catch (error) {
+      Internals8.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio iterator", error);
+    }
+  };
+  startVideoIterator = async (timeToSeek) => {
+    if (!this.canvasSink) {
+      return;
+    }
+    this.videoAsyncId++;
+    const currentAsyncId = this.videoAsyncId;
+    await this.videoFrameIterator?.return();
+    this.videoFrameIterator = this.canvasSink.canvases(timeToSeek);
+    try {
+      const firstFrame = (await this.videoFrameIterator.next()).value ?? null;
+      const secondFrame = (await this.videoFrameIterator.next()).value ?? null;
+      if (currentAsyncId !== this.videoAsyncId) {
+        return;
+      }
+      if (firstFrame) {
+        Internals8.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew initial frame ${firstFrame.timestamp.toFixed(3)}s`);
+        this.context.drawImage(firstFrame.canvas, 0, 0);
+        if (this.onVideoFrameCallback) {
+          this.onVideoFrameCallback(this.canvas);
+        }
+      }
+      this.nextFrame = secondFrame ?? null;
+      if (secondFrame) {
+        Internals8.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Buffered next frame ${secondFrame.timestamp.toFixed(3)}s`);
+      }
+    } catch (error) {
+      Internals8.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start video iterator", error);
+    }
+  };
+  updateNextFrame = async () => {
+    if (!this.videoFrameIterator) {
+      return;
+    }
+    try {
+      while (true) {
+        const newNextFrame = (await this.videoFrameIterator.next()).value ?? null;
+        if (!newNextFrame) {
+          break;
+        }
+        if (this.getAdjustedTimestamp(newNextFrame.timestamp) <= this.getPlaybackTime()) {
+          continue;
+        } else {
+          this.nextFrame = newNextFrame;
+          Internals8.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Buffered next frame ${newNextFrame.timestamp.toFixed(3)}s`);
+          break;
+        }
+      }
+    } catch (error) {
+      Internals8.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to update next frame", error);
+    }
+  };
+  bufferingStartedAtMs = null;
+  minBufferingTimeoutMs = 500;
+  setBufferingState(isBuffering) {
+    if (this.isBuffering !== isBuffering) {
+      this.isBuffering = isBuffering;
+      if (isBuffering) {
+        this.bufferingStartedAtMs = performance.now();
+        this.onBufferingChangeCallback?.(true);
+      } else {
+        this.bufferingStartedAtMs = null;
+        this.onBufferingChangeCallback?.(false);
+      }
+    }
+  }
+  maybeResumeFromBuffering(currentBufferDuration) {
+    if (!this.isCurrentlyBuffering())
+      return;
+    const now = performance.now();
+    const bufferingDuration = now - this.bufferingStartedAtMs;
+    const minTimeElapsed = bufferingDuration >= this.minBufferingTimeoutMs;
+    const bufferHealthy = currentBufferDuration >= this.HEALTHY_BUFER_THRESHOLD_SECONDS;
+    if (minTimeElapsed && bufferHealthy) {
+      Internals8.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Resuming from buffering after ${bufferingDuration}ms - buffer recovered`);
+      this.setBufferingState(false);
+    }
+  }
+  maybeForceResumeFromBuffering() {
+    if (!this.isCurrentlyBuffering())
+      return;
+    const now = performance.now();
+    const bufferingDuration = now - this.bufferingStartedAtMs;
+    const forceTimeout = bufferingDuration > this.minBufferingTimeoutMs * 10;
+    if (forceTimeout) {
+      Internals8.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Force resuming from buffering after ${bufferingDuration}ms`);
+      this.setBufferingState(false);
+    }
+  }
+  runAudioIterator = async (startFromSecond) => {
+    if (!this.hasAudio() || !this.audioBufferIterator)
+      return;
+    try {
+      let totalBufferDuration = 0;
+      let isFirstBuffer = true;
+      this.audioIteratorStarted = true;
+      while (true) {
+        const BUFFERING_TIMEOUT_MS = 50;
+        let result;
+        try {
+          result = await withTimeout(this.audioBufferIterator.next(), BUFFERING_TIMEOUT_MS, "Iterator timeout");
+        } catch {
+          this.setBufferingState(true);
+          await sleep(10);
+          continue;
+        }
+        if (result.done || !result.value) {
+          break;
+        }
+        const { buffer, timestamp, duration } = result.value;
+        totalBufferDuration += duration;
+        this.audioBufferHealth = Math.max(0, totalBufferDuration / this.playbackRate);
+        this.maybeResumeFromBuffering(totalBufferDuration / this.playbackRate);
+        if (this.playing && !this.muted) {
+          if (isFirstBuffer) {
+            this.audioSyncAnchor = this.sharedAudioContext.currentTime - this.getAdjustedTimestamp(timestamp);
+            isFirstBuffer = false;
+          }
+          if (timestamp < startFromSecond - AUDIO_BUFFER_TOLERANCE_THRESHOLD) {
+            continue;
+          }
+          this.scheduleAudioChunk(buffer, timestamp);
+        }
+        if (this.getAdjustedTimestamp(timestamp) - this.getPlaybackTime() >= 1) {
+          await new Promise((resolve) => {
+            const check = () => {
+              if (this.getAdjustedTimestamp(timestamp) - this.getPlaybackTime() < 1) {
+                resolve();
+              } else {
+                requestAnimationFrame(check);
+              }
+            };
+            check();
+          });
+        }
+      }
+    } catch (error) {
+      Internals8.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to run audio iterator", error);
+    }
+  };
+}
+
+// src/video/video-for-preview.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var {
+  useUnsafeVideoConfig,
+  Timeline,
+  SharedAudioContext: SharedAudioContext2,
+  useMediaMutedState,
+  useMediaVolumeState,
+  useFrameForVolumeProp,
+  evaluateVolume,
+  warnAboutTooHighVolume,
+  usePreload
+} = Internals9;
+var calculateLoopDuration = ({
+  endAt,
+  mediaDuration,
+  playbackRate,
+  startFrom
+}) => {
+  let duration = mediaDuration;
+  if (typeof endAt !== "undefined") {
+    duration = endAt;
+  }
+  if (typeof startFrom !== "undefined") {
+    duration -= startFrom;
+  }
+  const actualDuration = duration / playbackRate;
+  return Math.floor(actualDuration);
+};
+var NewVideoForPreview = ({
+  src,
+  style,
+  playbackRate,
+  logLevel,
+  className,
+  muted,
+  volume,
+  loopVolumeCurveBehavior,
+  onVideoFrame
+}) => {
+  const canvasRef = useRef2(null);
+  const videoConfig = useUnsafeVideoConfig();
+  const frame = useCurrentFrame2();
+  const mediaPlayerRef = useRef2(null);
+  const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
+  const [playing] = Timeline.usePlayingState();
+  const timelineContext = useContext6(Timeline.TimelineContext);
+  const globalPlaybackRate = timelineContext.playbackRate;
+  const sharedAudioContext = useContext6(SharedAudioContext2);
+  const buffer = useBufferState();
+  const delayHandleRef = useRef2(null);
+  const [mediaMuted] = useMediaMutedState();
+  const [mediaVolume] = useMediaVolumeState();
+  const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
+  const userPreferredVolume = evaluateVolume({
+    frame: volumePropFrame,
+    volume,
+    mediaVolume
+  });
+  warnAboutTooHighVolume(userPreferredVolume);
+  if (!videoConfig) {
+    throw new Error("No video config found");
+  }
+  if (!src) {
+    throw new TypeError("No `src` was passed to <NewVideoForPreview>.");
+  }
+  const actualFps = videoConfig.fps / playbackRate;
+  const currentTime = frame / actualFps;
+  const [initialTimestamp] = useState4(currentTime);
+  const preloadedSrc = usePreload(src);
+  useEffect2(() => {
+    if (!canvasRef.current)
+      return;
+    if (!sharedAudioContext)
+      return;
+    if (!sharedAudioContext.audioContext)
+      return;
+    try {
+      const player = new MediaPlayer({
+        canvas: canvasRef.current,
+        src: preloadedSrc,
+        logLevel,
+        sharedAudioContext: sharedAudioContext.audioContext
+      });
+      mediaPlayerRef.current = player;
+      player.initialize(initialTimestamp).then(() => {
+        setMediaPlayerReady(true);
+        Internals9.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewVideoForPreview] MediaPlayer initialized successfully`);
+      }).catch((error) => {
+        Internals9.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] Failed to initialize MediaPlayer", error);
+      });
+    } catch (error) {
+      Internals9.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer initialization failed", error);
+    }
+    return () => {
+      if (delayHandleRef.current) {
+        delayHandleRef.current.unblock();
+        delayHandleRef.current = null;
+      }
+      if (mediaPlayerRef.current) {
+        Internals9.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewVideoForPreview] Disposing MediaPlayer`);
+        mediaPlayerRef.current.dispose();
+        mediaPlayerRef.current = null;
+      }
+      setMediaPlayerReady(false);
+    };
+  }, [preloadedSrc, logLevel, sharedAudioContext, initialTimestamp]);
+  const classNameValue = useMemo3(() => {
+    return [Internals9.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals9.truthy).join(" ");
+  }, [className]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer)
+      return;
+    if (playing) {
+      mediaPlayer.play().catch((error) => {
+        Internals9.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] Failed to play", error);
+      });
+    } else {
+      mediaPlayer.pause();
+    }
+  }, [playing, logLevel, mediaPlayerReady]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady)
+      return;
+    mediaPlayer.seekTo(currentTime);
+    Internals9.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewVideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+  }, [currentTime, logLevel, mediaPlayerReady]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady)
+      return;
+    mediaPlayer.onBufferingChange((newBufferingState) => {
+      if (newBufferingState && !delayHandleRef.current) {
+        delayHandleRef.current = buffer.delayPlayback();
+        Internals9.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer buffering - blocking Remotion playback");
+      } else if (!newBufferingState && delayHandleRef.current) {
+        delayHandleRef.current.unblock();
+        delayHandleRef.current = null;
+        Internals9.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer unbuffering - unblocking Remotion playback");
+      }
+    });
+  }, [mediaPlayerReady, buffer, logLevel]);
+  const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady)
+      return;
+    mediaPlayer.setMuted(effectiveMuted);
+  }, [effectiveMuted, mediaPlayerReady]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setVolume(userPreferredVolume);
+  }, [userPreferredVolume, mediaPlayerReady, logLevel]);
+  const effectivePlaybackRate = useMemo3(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setPlaybackRate(effectivePlaybackRate).catch((error) => {
+      Internals9.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] Failed to set playback rate", error);
+    });
+  }, [effectivePlaybackRate, mediaPlayerReady, logLevel]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    if (onVideoFrame) {
+      mediaPlayer.onVideoFrame(onVideoFrame);
+    }
+  }, [onVideoFrame, mediaPlayerReady]);
+  return /* @__PURE__ */ jsx4("canvas", {
+    ref: canvasRef,
+    width: videoConfig.width,
+    height: videoConfig.height,
+    style,
+    className: classNameValue
+  });
+};
+var VideoForPreviewWithDuration = ({
+  className,
+  durationInSeconds,
+  logLevel,
+  loopVolumeCurveBehavior,
+  muted,
+  onVideoFrame,
+  playbackRate,
+  src,
+  style,
+  volume,
+  loop,
+  name,
+  trimAfter,
+  trimBefore
+}) => {
+  const { fps } = useVideoConfig();
+  if (loop) {
+    if (!Number.isFinite(durationInSeconds) || durationInSeconds === null) {
+      return /* @__PURE__ */ jsx4(VideoForPreviewWithDuration, {
+        loop: false,
+        className,
+        durationInSeconds,
+        logLevel,
+        loopVolumeCurveBehavior,
+        muted,
+        onVideoFrame,
+        playbackRate,
+        src,
+        style,
+        volume,
+        name,
+        trimAfter,
+        trimBefore
+      });
+    }
+    const mediaDuration = durationInSeconds * fps;
+    return /* @__PURE__ */ jsx4(Loop, {
+      durationInFrames: calculateLoopDuration({
+        endAt: trimAfter,
+        mediaDuration,
+        playbackRate: playbackRate ?? 1,
+        startFrom: trimBefore
+      }),
+      layout: "none",
+      name,
+      children: /* @__PURE__ */ jsx4(VideoForPreviewWithDuration, {
+        loop: false,
+        className,
+        durationInSeconds,
+        logLevel,
+        loopVolumeCurveBehavior,
+        muted,
+        onVideoFrame,
+        playbackRate,
+        src,
+        style,
+        volume,
+        name,
+        trimAfter,
+        trimBefore
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx4(NewVideoForPreview, {
+    src,
+    style,
+    playbackRate,
+    logLevel,
+    muted,
+    volume,
+    loopVolumeCurveBehavior,
+    onVideoFrame,
+    className
+  });
+};
+var VideoForPreview = ({
+  className,
+  loop,
+  src,
+  logLevel,
+  muted,
+  name,
+  volume,
+  loopVolumeCurveBehavior,
+  onVideoFrame,
+  playbackRate,
+  style
+}) => {
+  const preloadedSrc = usePreload(src);
+  const [durationInSeconds, setDurationInSeconds] = useState4(null);
+  useEffect2(() => {
+    if (!loop) {
+      return;
+    }
+    let cancelled = false;
+    const computeDuration = async () => {
+      const urlSource = new UrlSource3(preloadedSrc);
+      const input = new Input3({
+        source: urlSource,
+        formats: ALL_FORMATS3
+      });
+      try {
+        const duration = await input.computeDuration();
+        if (!cancelled) {
+          setDurationInSeconds(duration);
+        }
+      } catch (error) {
+        Internals9.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to compute duration", error);
+      } finally {
+        input.dispose();
+      }
+    };
+    computeDuration();
+    return () => {
+      cancelled = true;
+    };
+  }, [loop, preloadedSrc, logLevel]);
+  if (loop && durationInSeconds === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4(VideoForPreviewWithDuration, {
+    durationInSeconds,
+    className,
+    logLevel,
+    muted,
+    onVideoFrame,
+    playbackRate,
+    src,
+    style,
+    volume,
+    name,
+    trimAfter: undefined,
+    trimBefore: undefined,
+    loop,
+    loopVolumeCurveBehavior
+  });
+};
 
 // src/video/video-for-rendering.tsx
 import {
-  useContext as useContext6,
+  useContext as useContext7,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo3,
-  useRef as useRef2,
-  useState as useState4
+  useMemo as useMemo4,
+  useRef as useRef3,
+  useState as useState5
 } from "react";
 import {
   cancelRender as cancelRender4,
-  Internals as Internals8,
-  useCurrentFrame as useCurrentFrame2,
+  Internals as Internals10,
+  useCurrentFrame as useCurrentFrame3,
   useDelayRender as useDelayRender2,
   useRemotionEnvironment as useRemotionEnvironment4,
-  useVideoConfig
+  useVideoConfig as useVideoConfig2
 } from "remotion";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var VideoForRendering = ({
   volume: volumeProp,
   playbackRate,
@@ -1480,27 +2470,36 @@ var VideoForRendering = ({
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
   onVideoFrame,
-  logLevel = window.remotion_logLevel,
+  logLevel,
   loop,
   style,
-  className
+  className,
+  fallbackOffthreadVideoProps,
+  audioStreamIndex,
+  name,
+  disallowFallbackToOffthreadVideo,
+  stack
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
   }
-  const frame = useCurrentFrame2();
-  const absoluteFrame = Internals8.useTimelinePosition();
-  const { fps } = useVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext6(Internals8.RenderAssetManager);
-  const startsAt = Internals8.useMediaStartsAt();
-  const [id] = useState4(() => `${Math.random()}`.replace("0.", ""));
+  const frame = useCurrentFrame3();
+  const absoluteFrame = Internals10.useTimelinePosition();
+  const { fps } = useVideoConfig2();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext7(Internals10.RenderAssetManager);
+  const startsAt = Internals10.useMediaStartsAt();
+  const [id] = useState5(() => `${Math.random()}`.replace("0.", ""));
   const environment = useRemotionEnvironment4();
   const { delayRender, continueRender } = useDelayRender2();
-  const canvasRef = useRef2(null);
+  const canvasRef = useRef3(null);
+  const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
   useLayoutEffect2(() => {
     if (!canvasRef.current) {
       return;
     }
+    if (replaceWithOffthreadVideo) {
+      return;
+    }
     const actualFps = playbackRate ? fps / playbackRate : fps;
     const timestamp = frame / actualFps;
     const durationInSeconds = 1 / actualFps;
@@ -1526,12 +2525,44 @@ var VideoForRendering = ({
       includeAudio: shouldRenderAudio,
       includeVideo: window.remotion_videoEnabled,
       isClientSideRendering: environment.isClientSideRendering,
-      loop: loop ?? false
-    }).then(({
-      frame: imageBitmap,
-      audio,
-      durationInSeconds: assetDurationInSeconds
-    }) => {
+      loop: loop ?? false,
+      audioStreamIndex: audioStreamIndex ?? 0
+    }).then((result) => {
+      if (result === "unknown-container-format") {
+        if (disallowFallbackToOffthreadVideo) {
+          cancelRender4(new Error(`Unknown container format ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+        }
+        if (window.remotion_isMainTab) {
+          Internals10.Log.info({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`);
+        }
+        setReplaceWithOffthreadVideo(true);
+        return;
+      }
+      if (result === "cannot-decode") {
+        if (disallowFallbackToOffthreadVideo) {
+          cancelRender4(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+        }
+        if (window.remotion_isMainTab) {
+          Internals10.Log.info({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
+        }
+        setReplaceWithOffthreadVideo(true);
+        return;
+      }
+      if (result === "network-error") {
+        if (disallowFallbackToOffthreadVideo) {
+          cancelRender4(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+        }
+        if (window.remotion_isMainTab) {
+          Internals10.Log.info({ logLevel, tag: "@remotion/media" }, `Network error fetching ${src}, falling back to <OffthreadVideo>`);
+        }
+        setReplaceWithOffthreadVideo(true);
+        return;
+      }
+      const {
+        frame: imageBitmap,
+        audio,
+        durationInSeconds: assetDurationInSeconds
+      } = result;
       if (imageBitmap) {
         onVideoFrame?.(imageBitmap);
         const context = canvasRef.current?.getContext("2d");
@@ -1554,12 +2585,12 @@ var VideoForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals8.evaluateVolume({
+      const volume = Internals10.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals8.warnAboutTooHighVolume(volume);
+      Internals10.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -1601,12 +2632,51 @@ var VideoForRendering = ({
     src,
     startsAt,
     unregisterRenderAsset,
-    volumeProp
+    volumeProp,
+    replaceWithOffthreadVideo,
+    audioStreamIndex,
+    disallowFallbackToOffthreadVideo
   ]);
-  const classNameValue = useMemo3(() => {
-    return [Internals8.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals8.truthy).join(" ");
+  const classNameValue = useMemo4(() => {
+    return [Internals10.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals10.truthy).join(" ");
   }, [className]);
-  return /* @__PURE__ */ jsx3("canvas", {
+  if (replaceWithOffthreadVideo) {
+    return /* @__PURE__ */ jsx5(Internals10.InnerOffthreadVideo, {
+      src,
+      playbackRate: playbackRate ?? 1,
+      muted: muted ?? false,
+      acceptableTimeShiftInSeconds: fallbackOffthreadVideoProps?.acceptableTimeShiftInSeconds,
+      loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
+      delayRenderRetries: delayRenderRetries ?? undefined,
+      delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
+      style,
+      allowAmplificationDuringRender: true,
+      transparent: fallbackOffthreadVideoProps?.transparent ?? false,
+      toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true,
+      audioStreamIndex: audioStreamIndex ?? 0,
+      name,
+      className,
+      onVideoFrame,
+      volume: volumeProp,
+      id,
+      onError: fallbackOffthreadVideoProps?.onError,
+      toneFrequency: fallbackOffthreadVideoProps?.toneFrequency ?? 1,
+      showInTimeline: false,
+      crossOrigin: undefined,
+      onAutoPlayError: () => {
+        return;
+      },
+      pauseWhenBuffering: false,
+      trimAfter: undefined,
+      trimBefore: undefined,
+      useWebAudioApi: false,
+      startFrom: undefined,
+      endAt: undefined,
+      stack,
+      _remotionInternalNativeLoopPassed: false
+    });
+  }
+  return /* @__PURE__ */ jsx5("canvas", {
     ref: canvasRef,
     style,
     className: classNameValue
@@ -1614,29 +2684,33 @@ var VideoForRendering = ({
 };
 
 // src/video/video.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var {
-  validateMediaTrimProps: validateMediaTrimProps2,
-  resolveTrimProps: resolveTrimProps2,
-  validateMediaProps: validateMediaProps2,
-  VideoForPreview
-} = Internals9;
-var Video = (props) => {
-  const {
-    trimBefore,
-    trimAfter,
-    name,
-    pauseWhenBuffering,
-    stack,
-    showInTimeline,
-    ...otherProps
-  } = props;
+import { jsx as jsx6 } from "react/jsx-runtime";
+var { validateMediaTrimProps: validateMediaTrimProps2, resolveTrimProps: resolveTrimProps2, validateMediaProps: validateMediaProps2 } = Internals11;
+var InnerVideo = ({
+  src,
+  audioStreamIndex,
+  className,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  disallowFallbackToOffthreadVideo,
+  fallbackOffthreadVideoProps,
+  logLevel,
+  loop,
+  loopVolumeCurveBehavior,
+  muted,
+  name,
+  onVideoFrame,
+  playbackRate,
+  style,
+  trimAfter,
+  trimBefore,
+  volume,
+  showInTimeline,
+  stack
+}) => {
   const environment = useRemotionEnvironment5();
-  const onDuration = useCallback3(() => {
-    return;
-  }, []);
-  if (typeof props.src !== "string") {
-    throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+  if (typeof src !== "string") {
+    throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(src)} instead.`);
   }
   validateMediaTrimProps2({
     startFrom: undefined,
@@ -1651,42 +2725,125 @@ var Video = (props) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx4(Sequence2, {
+    return /* @__PURE__ */ jsx6(Sequence2, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx4(Video, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
-        ...otherProps
+      children: /* @__PURE__ */ jsx6(InnerVideo, {
+        audioStreamIndex,
+        className,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        disallowFallbackToOffthreadVideo,
+        name,
+        fallbackOffthreadVideoProps,
+        logLevel,
+        loop,
+        loopVolumeCurveBehavior,
+        muted,
+        onVideoFrame,
+        playbackRate,
+        src,
+        stack,
+        style,
+        volume,
+        trimAfter: undefined,
+        trimBefore: undefined,
+        showInTimeline
       })
     });
   }
-  validateMediaProps2(props, "Video");
+  validateMediaProps2({ playbackRate, volume }, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx4(VideoForRendering, {
-      ...otherProps
+    return /* @__PURE__ */ jsx6(VideoForRendering, {
+      audioStreamIndex: audioStreamIndex ?? 0,
+      className,
+      delayRenderRetries: delayRenderRetries ?? null,
+      delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
+      disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
+      name,
+      fallbackOffthreadVideoProps,
+      logLevel,
+      loop,
+      loopVolumeCurveBehavior,
+      muted,
+      onVideoFrame,
+      playbackRate,
+      src,
+      stack,
+      style,
+      volume
     });
   }
-  const {
+  return /* @__PURE__ */ jsx6(VideoForPreview, {
+    className,
+    name,
+    logLevel,
+    loop,
+    loopVolumeCurveBehavior,
+    muted,
     onVideoFrame,
-    delayRenderRetries,
-    delayRenderTimeoutInMilliseconds,
-    ...propsForPreview
-  } = otherProps;
-  return /* @__PURE__ */ jsx4(VideoForPreview, {
-    _remotionInternalStack: stack ?? null,
-    _remotionInternalNativeLoopPassed: false,
-    onDuration,
-    onlyWarnForMediaSeekingError: true,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    playbackRate,
+    src,
+    style,
+    volume
+  });
+};
+var Video = ({
+  src,
+  audioStreamIndex,
+  className,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  disallowFallbackToOffthreadVideo,
+  fallbackOffthreadVideoProps,
+  logLevel,
+  loop,
+  loopVolumeCurveBehavior,
+  muted,
+  name,
+  onVideoFrame,
+  playbackRate,
+  showInTimeline,
+  style,
+  trimAfter,
+  trimBefore,
+  volume,
+  stack
+}) => {
+  return /* @__PURE__ */ jsx6(InnerVideo, {
+    audioStreamIndex: audioStreamIndex ?? 0,
+    className,
+    delayRenderRetries: delayRenderRetries ?? null,
+    delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
+    disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
+    fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
+    logLevel: logLevel ?? "info",
+    loop: loop ?? false,
+    loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
+    muted: muted ?? false,
+    name,
+    onVideoFrame,
+    playbackRate: playbackRate ?? 1,
     showInTimeline: showInTimeline ?? true,
-    onVideoFrame: onVideoFrame ?? null,
-    ...propsForPreview
+    src,
+    style: style ?? {},
+    trimAfter,
+    trimBefore,
+    volume: volume ?? 1,
+    stack
   });
 };
+Internals11.addSequenceStackTraces(Video);
+
+// src/index.ts
+var experimental_Audio = Audio2;
+var experimental_Video = Video;
 export {
-  Video as experimental_Video,
-  Audio as experimental_Audio
+  experimental_Video,
+  experimental_Audio,
+  Video,
+  Audio2 as Audio
 };