@remotion/media 4.0.402 → 4.0.404

package/dist/esm/index.mjs

@@ -946,7 +946,7 @@ class MediaPlayer {
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
-    this.logLevel = logLevel ?? window.remotion_logLevel;
+    this.logLevel = logLevel;
     this.sharedAudioContext = sharedAudioContext;
     this.playbackRate = playbackRate;
     this.globalPlaybackRate = globalPlaybackRate;
@@ -1344,6 +1344,27 @@ class MediaPlayer {
   };
 }
 
+// src/on-error.ts
+var callOnErrorAndResolve = ({
+  onError,
+  error,
+  disallowFallback,
+  isClientSideRendering,
+  clientSideError
+}) => {
+  const result = onError?.(error);
+  if (isClientSideRendering) {
+    return ["fail", clientSideError];
+  }
+  if (result) {
+    return [result, error];
+  }
+  if (disallowFallback) {
+    return ["fail", error];
+  }
+  return ["fallback", error];
+};
+
 // src/show-in-timeline.ts
 import { useMemo } from "react";
 import { Internals as Internals4, useVideoConfig } from "remotion";
@@ -1538,7 +1559,8 @@ var AudioForPreviewAssertedShowing = ({
   disallowFallbackToHtml5Audio,
   toneFrequency,
   audioStreamIndex,
-  fallbackHtml5AudioProps
+  fallbackHtml5AudioProps,
+  onError
 }) => {
   const videoConfig = useUnsafeVideoConfig();
   const frame = useCurrentFrame2();
@@ -1637,36 +1659,35 @@ var AudioForPreviewAssertedShowing = ({
         if (result.type === "disposed") {
           return;
         }
-        if (result.type === "unknown-container-format") {
-          if (disallowFallbackToHtml5Audio) {
-            throw new Error(`Unknown container format ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
+        const handleError = (error, fallbackMessage) => {
+          const [action, errorToUse] = callOnErrorAndResolve({
+            onError,
+            error,
+            disallowFallback: disallowFallbackToHtml5Audio,
+            isClientSideRendering: false,
+            clientSideError: error
+          });
+          if (action === "fail") {
+            throw errorToUse;
+          } else {
+            Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+            setShouldFallbackToNativeAudio(true);
           }
-          Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
-          setShouldFallbackToNativeAudio(true);
+        };
+        if (result.type === "unknown-container-format") {
+          handleError(new Error(`Unknown container format ${preloadedSrc}.`), `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
           return;
         }
         if (result.type === "network-error") {
-          if (disallowFallbackToHtml5Audio) {
-            throw new Error(`Network error fetching ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
-          }
-          Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${preloadedSrc}, falling back to <Html5Audio>`);
-          setShouldFallbackToNativeAudio(true);
+          handleError(new Error(`Network error fetching ${preloadedSrc}.`), `Network error fetching ${preloadedSrc}, falling back to <Html5Audio>`);
           return;
         }
         if (result.type === "cannot-decode") {
-          if (disallowFallbackToHtml5Audio) {
-            throw new Error(`Cannot decode ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
-          }
-          Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${preloadedSrc}, falling back to <Html5Audio>`);
-          setShouldFallbackToNativeAudio(true);
+          handleError(new Error(`Cannot decode ${preloadedSrc}.`), `Cannot decode ${preloadedSrc}, falling back to <Html5Audio>`);
           return;
         }
         if (result.type === "no-tracks") {
-          if (disallowFallbackToHtml5Audio) {
-            throw new Error(`No video or audio tracks found for ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
-          }
-          Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `No video or audio tracks found for ${preloadedSrc}, falling back to <Html5Audio>`);
-          setShouldFallbackToNativeAudio(true);
+          handleError(new Error(`No video or audio tracks found for ${preloadedSrc}.`), `No video or audio tracks found for ${preloadedSrc}, falling back to <Html5Audio>`);
           return;
         }
         if (result.type === "success") {
@@ -1675,11 +1696,32 @@ var AudioForPreviewAssertedShowing = ({
           Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] MediaPlayer initialized successfully`);
         }
       }).catch((error) => {
-        Internals6.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] Failed to initialize MediaPlayer", error);
-        setShouldFallbackToNativeAudio(true);
+        const [action, errorToUse] = callOnErrorAndResolve({
+          onError,
+          error,
+          disallowFallback: disallowFallbackToHtml5Audio,
+          isClientSideRendering: false,
+          clientSideError: error
+        });
+        if (action === "fail") {
+          throw errorToUse;
+        } else {
+          Internals6.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] Failed to initialize MediaPlayer", error);
+          setShouldFallbackToNativeAudio(true);
+        }
       });
     } catch (error) {
-      Internals6.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] MediaPlayer initialization failed", error);
+      const [action, errorToUse] = callOnErrorAndResolve({
+        error,
+        onError,
+        disallowFallback: disallowFallbackToHtml5Audio,
+        isClientSideRendering: false,
+        clientSideError: error
+      });
+      if (action === "fail") {
+        throw errorToUse;
+      }
+      Internals6.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] MediaPlayer initialization failed", errorToUse);
       setShouldFallbackToNativeAudio(true);
     }
     return () => {
@@ -1700,7 +1742,8 @@ var AudioForPreviewAssertedShowing = ({
     videoConfig.fps,
     audioStreamIndex,
     disallowFallbackToHtml5Audio,
-    buffer
+    buffer,
+    onError
   ]);
   useLayoutEffect(() => {
     const audioPlayer = mediaPlayerRef.current;
@@ -1827,9 +1870,11 @@ var AudioForPreview = ({
   disallowFallbackToHtml5Audio,
   toneFrequency,
   audioStreamIndex,
-  fallbackHtml5AudioProps
+  fallbackHtml5AudioProps,
+  onError
 }) => {
   const preloadedSrc = usePreload(src);
+  const defaultLogLevel = Internals6.useLogLevel();
   const frame = useCurrentFrame2();
   const videoConfig = useVideoConfig2();
   const currentTime = frame / videoConfig.fps;
@@ -1861,7 +1906,7 @@ var AudioForPreview = ({
     audioStreamIndex: audioStreamIndex ?? 0,
     src: preloadedSrc,
     playbackRate: playbackRate ?? 1,
-    logLevel: logLevel ?? (typeof window !== "undefined" ? window.remotion_logLevel ?? "info" : "info"),
+    logLevel: logLevel ?? defaultLogLevel,
     muted: muted ?? false,
     volume: volume ?? 1,
     loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
@@ -1873,6 +1918,7 @@ var AudioForPreview = ({
     stack,
     disallowFallbackToHtml5Audio: disallowFallbackToHtml5Audio ?? false,
     toneFrequency,
+    onError,
     fallbackHtml5AudioProps
   });
 };
@@ -2011,7 +2057,7 @@ var makeAudioIterator2 = ({
   const getSamples = async (timestamp, durationInSeconds) => {
     lastUsed = Date.now();
     if (fullDuration !== null && timestamp > fullDuration) {
-      cache.clearBeforeThreshold(fullDuration - SAFE_BACK_WINDOW_IN_SECONDS);
+      cache.clearBeforeThreshold(fullDuration - SAFE_WINDOW_OF_MONOTONICITY);
       return [];
     }
     const samples = cache.getSamples(timestamp, durationInSeconds);
@@ -2024,7 +2070,7 @@ var makeAudioIterator2 = ({
     while (true) {
       const sample = await getNextSample();
       const deleteBefore = fullDuration === null ? timestamp : Math.min(timestamp, fullDuration);
-      cache.clearBeforeThreshold(deleteBefore - SAFE_BACK_WINDOW_IN_SECONDS);
+      cache.clearBeforeThreshold(deleteBefore - SAFE_WINDOW_OF_MONOTONICITY);
       if (sample === null) {
         break;
       }
@@ -2154,8 +2200,14 @@ var makeAudioManager = () => {
     logLevel,
     maxCacheSize
   }) => {
-    while ((await getTotalCacheStats()).totalSize > maxCacheSize) {
+    let attempts = 0;
+    const maxAttempts = 3;
+    while ((await getTotalCacheStats()).totalSize > maxCacheSize && attempts < maxAttempts) {
       deleteOldestIterator();
+      attempts++;
+    }
+    if ((await getTotalCacheStats()).totalSize > maxCacheSize && attempts >= maxAttempts) {
+      Internals8.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio cache: Exceeded max cache size after ${maxAttempts} attempts. Still ${(await getTotalCacheStats()).totalSize} bytes used, target was ${maxCacheSize} bytes.`);
     }
     for (const iterator of iterators) {
       if (iterator.src === src && await iterator.waitForCompletion() && iterator.canSatisfyRequestedTime(timeInSeconds)) {
@@ -2226,21 +2278,6 @@ var makeAudioManager = () => {
 // src/video-extraction/keyframe-manager.ts
 import { Internals as Internals10 } from "remotion";
 
-// src/browser-can-use-webgl2.ts
-var browserCanUseWebGl2 = null;
-var browserCanUseWebGl2Uncached = () => {
-  const canvas = new OffscreenCanvas(1, 1);
-  const context = canvas.getContext("webgl2");
-  return context !== null;
-};
-var canBrowserUseWebGl2 = () => {
-  if (browserCanUseWebGl2 !== null) {
-    return browserCanUseWebGl2;
-  }
-  browserCanUseWebGl2 = browserCanUseWebGl2Uncached();
-  return browserCanUseWebGl2;
-};
-
 // src/render-timestamp-range.ts
 var renderTimestampRange = (timestamps) => {
   if (timestamps.length === 0) {
@@ -2252,18 +2289,6 @@ var renderTimestampRange = (timestamps) => {
   return `${timestamps[0].toFixed(3)}...${timestamps[timestamps.length - 1].toFixed(3)}`;
 };
 
-// src/video-extraction/get-frames-since-keyframe.ts
-import {
-  ALL_FORMATS as ALL_FORMATS2,
-  AudioSampleSink,
-  EncodedPacketSink,
-  Input as Input2,
-  MATROSKA,
-  UrlSource as UrlSource2,
-  VideoSampleSink,
-  WEBM
-} from "mediabunny";
-
 // src/video-extraction/keyframe-bank.ts
 import { Internals as Internals9 } from "remotion";
 
@@ -2276,36 +2301,42 @@ var getAllocationSize = (sample) => {
 };
 
 // src/video-extraction/keyframe-bank.ts
-var makeKeyframeBank = ({
-  startTimestampInSeconds,
-  endTimestampInSeconds,
-  sampleIterator,
+var BIGGEST_ALLOWED_JUMP_FORWARD_SECONDS = 3;
+var makeKeyframeBank = async ({
   logLevel: parentLogLevel,
-  src
+  src,
+  videoSampleSink,
+  requestedTimestamp
 }) => {
-  Internals9.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+  const sampleIterator = videoSampleSink.samples(roundTo4Digits(requestedTimestamp));
   const frames = {};
   const frameTimestamps = [];
+  let hasReachedEndOfVideo = false;
   let lastUsed = Date.now();
   let allocationSize = 0;
+  const deleteFrameAtTimestamp = (timestamp) => {
+    allocationSize -= getAllocationSize(frames[timestamp]);
+    frameTimestamps.splice(frameTimestamps.indexOf(timestamp), 1);
+    frames[timestamp].close();
+    delete frames[timestamp];
+  };
   const deleteFramesBeforeTimestamp = ({
     logLevel,
     timestampInSeconds
   }) => {
     const deletedTimestamps = [];
     for (const frameTimestamp of frameTimestamps.slice()) {
-      const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
-      if (isLast) {
-        continue;
+      if (hasReachedEndOfVideo) {
+        const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
+        if (isLast) {
+          continue;
+        }
       }
       if (frameTimestamp < timestampInSeconds) {
         if (!frames[frameTimestamp]) {
           continue;
         }
-        allocationSize -= getAllocationSize(frames[frameTimestamp]);
-        frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
-        frames[frameTimestamp].close();
-        delete frames[frameTimestamp];
+        deleteFrameAtTimestamp(frameTimestamp);
         deletedTimestamps.push(frameTimestamp);
       }
     }
@@ -2322,32 +2353,31 @@ var makeKeyframeBank = ({
     if (!lastFrame) {
       return true;
     }
-    return roundTo4Digits(lastFrame.timestamp + lastFrame.duration) > roundTo4Digits(timestamp) + 0.001;
+    return roundTo4Digits(lastFrame.timestamp + lastFrame.duration) > roundTo4Digits(timestamp) + SAFE_WINDOW_OF_MONOTONICITY;
   };
-  const addFrame = (frame) => {
+  const addFrame = (frame, logLevel) => {
     if (frames[frame.timestamp]) {
-      allocationSize -= getAllocationSize(frames[frame.timestamp]);
-      frameTimestamps.splice(frameTimestamps.indexOf(frame.timestamp), 1);
-      frames[frame.timestamp].close();
-      delete frames[frame.timestamp];
+      deleteFrameAtTimestamp(frame.timestamp);
     }
     frames[frame.timestamp] = frame;
     frameTimestamps.push(frame.timestamp);
     allocationSize += getAllocationSize(frame);
     lastUsed = Date.now();
+    Internals9.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
   };
-  const ensureEnoughFramesForTimestamp = async (timestampInSeconds) => {
+  const ensureEnoughFramesForTimestamp = async (timestampInSeconds, logLevel) => {
     while (!hasDecodedEnoughForTimestamp(timestampInSeconds)) {
       const sample = await sampleIterator.next();
       if (sample.value) {
-        addFrame(sample.value);
+        addFrame(sample.value, logLevel);
       }
       if (sample.done) {
+        hasReachedEndOfVideo = true;
         break;
       }
       deleteFramesBeforeTimestamp({
         logLevel: parentLogLevel,
-        timestampInSeconds: timestampInSeconds - SAFE_BACK_WINDOW_IN_SECONDS
+        timestampInSeconds: timestampInSeconds - SAFE_WINDOW_OF_MONOTONICITY
       });
     }
     lastUsed = Date.now();
@@ -2355,13 +2385,10 @@ var makeKeyframeBank = ({
   const getFrameFromTimestamp = async (timestampInSeconds) => {
     lastUsed = Date.now();
     let adjustedTimestamp = timestampInSeconds;
-    if (roundTo4Digits(timestampInSeconds) < roundTo4Digits(startTimestampInSeconds)) {
-      adjustedTimestamp = startTimestampInSeconds;
+    if (hasReachedEndOfVideo && roundTo4Digits(adjustedTimestamp) > roundTo4Digits(frameTimestamps[frameTimestamps.length - 1])) {
+      adjustedTimestamp = frameTimestamps[frameTimestamps.length - 1];
     }
-    if (roundTo4Digits(adjustedTimestamp) > roundTo4Digits(endTimestampInSeconds)) {
-      adjustedTimestamp = endTimestampInSeconds;
-    }
-    await ensureEnoughFramesForTimestamp(adjustedTimestamp);
+    await ensureEnoughFramesForTimestamp(adjustedTimestamp, parentLogLevel);
     for (let i = frameTimestamps.length - 1;i >= 0; i--) {
       const sample = frames[frameTimestamps[i]];
       if (!sample) {
@@ -2371,32 +2398,11 @@ var makeKeyframeBank = ({
         return sample;
       }
     }
-    return null;
+    return frames[frameTimestamps[0]] ?? null;
   };
   const hasTimestampInSecond = async (timestamp) => {
     return await getFrameFromTimestamp(timestamp) !== null;
   };
-  const prepareForDeletion = (logLevel) => {
-    Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion of keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
-    sampleIterator.return().then((result) => {
-      if (result.value) {
-        result.value.close();
-      }
-      return null;
-    });
-    let framesDeleted = 0;
-    for (const frameTimestamp of frameTimestamps) {
-      if (!frames[frameTimestamp]) {
-        continue;
-      }
-      allocationSize -= getAllocationSize(frames[frameTimestamp]);
-      frames[frameTimestamp].close();
-      delete frames[frameTimestamp];
-      framesDeleted++;
-    }
-    frameTimestamps.length = 0;
-    return { framesDeleted };
-  };
   const getOpenFrameCount = () => {
     return {
       size: allocationSize,
@@ -2407,173 +2413,91 @@ var makeKeyframeBank = ({
     return lastUsed;
   };
   let queue = Promise.resolve(undefined);
-  const keyframeBank = {
-    startTimestampInSeconds,
-    endTimestampInSeconds,
-    getFrameFromTimestamp: (timestamp) => {
-      queue = queue.then(() => getFrameFromTimestamp(timestamp));
-      return queue;
-    },
-    prepareForDeletion,
-    hasTimestampInSecond,
-    addFrame,
-    deleteFramesBeforeTimestamp,
-    src,
-    getOpenFrameCount,
-    getLastUsed
-  };
-  return keyframeBank;
-};
-
-// src/video-extraction/remember-actual-matroska-timestamps.ts
-var rememberActualMatroskaTimestamps = (isMatroska) => {
-  const observations = [];
-  const observeTimestamp = (startTime) => {
-    if (!isMatroska) {
-      return;
-    }
-    observations.push(startTime);
-  };
-  const getRealTimestamp = (observedTimestamp) => {
-    if (!isMatroska) {
-      return observedTimestamp;
-    }
-    return observations.find((observation) => Math.abs(observedTimestamp - observation) < 0.001) ?? null;
-  };
-  return {
-    observeTimestamp,
-    getRealTimestamp
-  };
-};
-
-// src/video-extraction/get-frames-since-keyframe.ts
-var getRetryDelay = () => {
-  return null;
-};
-var getFormatOrNullOrNetworkError = async (input) => {
-  try {
-    return await input.getFormat();
-  } catch (err) {
-    if (isNetworkError(err)) {
-      return "network-error";
-    }
-    return null;
+  const firstFrame = await sampleIterator.next();
+  if (!firstFrame.value) {
+    throw new Error("No first frame found");
   }
-};
-var getSinks = async (src) => {
-  const input = new Input2({
-    formats: ALL_FORMATS2,
-    source: new UrlSource2(src, {
-      getRetryDelay
-    })
-  });
-  const format = await getFormatOrNullOrNetworkError(input);
-  const isMatroska = format === MATROSKA || format === WEBM;
-  const getVideoSinks = async () => {
-    if (format === "network-error") {
-      return "network-error";
-    }
-    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";
+  const startTimestampInSeconds = firstFrame.value.timestamp;
+  Internals9.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec`);
+  addFrame(firstFrame.value, parentLogLevel);
+  const getRangeOfTimestamps = () => {
+    if (frameTimestamps.length === 0) {
+      return null;
     }
     return {
-      sampleSink: new VideoSampleSink(videoTrack),
-      packetSink: new EncodedPacketSink(videoTrack)
+      firstTimestamp: frameTimestamps[0],
+      lastTimestamp: frameTimestamps[frameTimestamps.length - 1]
     };
   };
-  let videoSinksPromise = null;
-  const getVideoSinksPromise = () => {
-    if (videoSinksPromise) {
-      return videoSinksPromise;
+  const prepareForDeletion = (logLevel, reason) => {
+    const range = getRangeOfTimestamps();
+    if (range) {
+      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion (${reason}) of keyframe bank from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec`);
     }
-    videoSinksPromise = getVideoSinks();
-    return videoSinksPromise;
-  };
-  const audioSinksPromise = {};
-  const getAudioSinks = async (index) => {
-    if (format === null) {
-      return "unknown-container-format";
+    let framesDeleted = 0;
+    for (const frameTimestamp of frameTimestamps.slice()) {
+      if (!frames[frameTimestamp]) {
+        continue;
+      }
+      deleteFrameAtTimestamp(frameTimestamp);
+      framesDeleted++;
     }
-    if (format === "network-error") {
-      return "network-error";
+    sampleIterator.return();
+    frameTimestamps.length = 0;
+    return { framesDeleted };
+  };
+  const canSatisfyTimestamp = (timestamp) => {
+    if (frameTimestamps.length === 0) {
+      return false;
     }
-    const audioTracks = await input.getAudioTracks();
-    const audioTrack = audioTracks[index];
-    if (!audioTrack) {
-      return "no-audio-track";
+    const roundedTimestamp = roundTo4Digits(timestamp);
+    const firstFrameTimestamp = roundTo4Digits(frameTimestamps[0]);
+    const lastFrameTimestamp = roundTo4Digits(frameTimestamps[frameTimestamps.length - 1]);
+    if (hasReachedEndOfVideo && roundedTimestamp > lastFrameTimestamp) {
+      return true;
     }
-    const canDecode = await audioTrack.canDecode();
-    if (!canDecode) {
-      return "cannot-decode-audio";
+    if (roundedTimestamp < firstFrameTimestamp) {
+      return false;
     }
-    return {
-      sampleSink: new AudioSampleSink(audioTrack)
-    };
-  };
-  const getAudioSinksPromise = (index) => {
-    if (audioSinksPromise[index]) {
-      return audioSinksPromise[index];
+    if (roundedTimestamp - BIGGEST_ALLOWED_JUMP_FORWARD_SECONDS > lastFrameTimestamp) {
+      return false;
     }
-    audioSinksPromise[index] = getAudioSinks(index);
-    return audioSinksPromise[index];
+    return true;
   };
-  return {
-    getVideo: () => getVideoSinksPromise(),
-    getAudio: (index) => getAudioSinksPromise(index),
-    actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
-    isMatroska,
-    getDuration: () => {
-      return input.computeDuration();
-    }
+  const keyframeBank = {
+    getFrameFromTimestamp: (timestamp) => {
+      queue = queue.then(() => getFrameFromTimestamp(timestamp));
+      return queue;
+    },
+    prepareForDeletion,
+    hasTimestampInSecond: (timestamp) => {
+      queue = queue.then(() => hasTimestampInSecond(timestamp));
+      return queue;
+    },
+    addFrame,
+    deleteFramesBeforeTimestamp,
+    src,
+    getOpenFrameCount,
+    getLastUsed,
+    canSatisfyTimestamp,
+    getRangeOfTimestamps
   };
-};
-var getFramesSinceKeyframe = async ({
-  packetSink,
-  videoSampleSink,
-  startPacket,
-  logLevel,
-  src
-}) => {
-  const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
-    verifyKeyPackets: true
-  });
-  const sampleIterator = videoSampleSink.samples(startPacket.timestamp, nextKeyPacket ? nextKeyPacket.timestamp : Infinity);
-  const keyframeBank = makeKeyframeBank({
-    startTimestampInSeconds: startPacket.timestamp,
-    endTimestampInSeconds: nextKeyPacket ? nextKeyPacket.timestamp : Infinity,
-    sampleIterator,
-    logLevel,
-    src
-  });
   return keyframeBank;
 };
 
 // src/video-extraction/keyframe-manager.ts
 var makeKeyframeManager = () => {
-  const sources = {};
-  const addKeyframeBank = ({
-    src,
-    bank,
-    startTimestampInSeconds
-  }) => {
-    sources[src] = sources[src] ?? {};
-    sources[src][startTimestampInSeconds] = bank;
+  let sources = {};
+  const addKeyframeBank = ({ src, bank }) => {
+    sources[src] = sources[src] ?? [];
+    sources[src].push(bank);
   };
-  const logCacheStats = async (logLevel) => {
+  const logCacheStats = (logLevel) => {
     let count = 0;
     let totalSize = 0;
     for (const src in sources) {
-      for (const bank in sources[src]) {
-        const v = await sources[src][bank];
-        const { size, timestamps } = v.getOpenFrameCount();
+      for (const bank of sources[src]) {
+        const { size, timestamps } = bank.getOpenFrameCount();
         count += timestamps.length;
         totalSize += size;
         if (size === 0) {
@@ -2584,13 +2508,12 @@ var makeKeyframeManager = () => {
     }
     Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
   };
-  const getCacheStats = async () => {
+  const getCacheStats = () => {
     let count = 0;
     let totalSize = 0;
     for (const src in sources) {
-      for (const bank in sources[src]) {
-        const v = await sources[src][bank];
-        const { timestamps, size } = v.getOpenFrameCount();
+      for (const bank of sources[src]) {
+        const { timestamps, size } = bank.getOpenFrameCount();
         count += timestamps.length;
         totalSize += size;
         if (size === 0) {
@@ -2600,17 +2523,17 @@ var makeKeyframeManager = () => {
     }
     return { count, totalSize };
   };
-  const getTheKeyframeBankMostInThePast = async () => {
+  const getTheKeyframeBankMostInThePast = () => {
     let mostInThePast = null;
     let mostInThePastBank = null;
     let numberOfBanks = 0;
     for (const src in sources) {
-      for (const b in sources[src]) {
-        const bank = await sources[src][b];
+      for (const bank of sources[src]) {
+        const index = sources[src].indexOf(bank);
         const lastUsed = bank.getLastUsed();
         if (mostInThePast === null || lastUsed < mostInThePast) {
           mostInThePast = lastUsed;
-          mostInThePastBank = { src, bank };
+          mostInThePastBank = { src, bank, index };
         }
         numberOfBanks++;
       }
@@ -2620,49 +2543,66 @@ var makeKeyframeManager = () => {
     }
     return { mostInThePastBank, numberOfBanks };
   };
-  const deleteOldestKeyframeBank = async (logLevel) => {
+  const deleteOldestKeyframeBank = (logLevel) => {
     const {
-      mostInThePastBank: { bank: mostInThePastBank, src: mostInThePastSrc },
+      mostInThePastBank: {
+        bank: mostInThePastBank,
+        src: mostInThePastSrc,
+        index: mostInThePastIndex
+      },
       numberOfBanks
-    } = await getTheKeyframeBankMostInThePast();
+    } = getTheKeyframeBankMostInThePast();
     if (numberOfBanks < 2) {
       return { finish: true };
     }
     if (mostInThePastBank) {
-      const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel);
-      delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
-      Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+      const range = mostInThePastBank.getRangeOfTimestamps();
+      const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel, "deleted oldest keyframe bank to stay under max cache size");
+      sources[mostInThePastSrc].splice(mostInThePastIndex, 1);
+      if (range) {
+        Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec to free up memory.`);
+      }
     }
     return { finish: false };
   };
-  const ensureToStayUnderMaxCacheSize = async (logLevel, maxCacheSize) => {
-    let cacheStats = await getTotalCacheStats();
-    while (cacheStats.totalSize > maxCacheSize) {
-      const { finish } = await deleteOldestKeyframeBank(logLevel);
+  const ensureToStayUnderMaxCacheSize = (logLevel, maxCacheSize) => {
+    let cacheStats = getTotalCacheStats();
+    let attempts = 0;
+    const maxAttempts = 3;
+    while (cacheStats.totalSize > maxCacheSize && attempts < maxAttempts) {
+      const { finish } = deleteOldestKeyframeBank(logLevel);
       if (finish) {
         break;
       }
       Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, "Deleted oldest keyframe bank to stay under max cache size", (cacheStats.totalSize / 1024 / 1024).toFixed(1), "out of", (maxCacheSize / 1024 / 1024).toFixed(1));
-      cacheStats = await getTotalCacheStats();
+      cacheStats = getTotalCacheStats();
+      attempts++;
+    }
+    if (cacheStats.totalSize > maxCacheSize && attempts >= maxAttempts) {
+      Internals10.Log.warn({ logLevel, tag: "@remotion/media" }, `Exceeded max cache size after ${maxAttempts} attempts. Remaining cache size: ${(cacheStats.totalSize / 1024 / 1024).toFixed(1)} MB, target was ${(maxCacheSize / 1024 / 1024).toFixed(1)} MB.`);
     }
   };
-  const clearKeyframeBanksBeforeTime = async ({
+  const clearKeyframeBanksBeforeTime = ({
     timestampInSeconds,
     src,
     logLevel
   }) => {
-    const threshold = timestampInSeconds - SAFE_BACK_WINDOW_IN_SECONDS;
+    const threshold = timestampInSeconds - SAFE_WINDOW_OF_MONOTONICITY;
     if (!sources[src]) {
       return;
     }
-    const banks = Object.keys(sources[src]);
-    for (const startTimeInSeconds of banks) {
-      const bank = await sources[src][startTimeInSeconds];
-      const { endTimestampInSeconds, startTimestampInSeconds } = bank;
-      if (endTimestampInSeconds < threshold) {
-        bank.prepareForDeletion(logLevel);
-        Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
-        delete sources[src][startTimeInSeconds];
+    const banks = sources[src];
+    for (const bank of banks) {
+      const range = bank.getRangeOfTimestamps();
+      if (!range) {
+        continue;
+      }
+      const { lastTimestamp } = range;
+      if (lastTimestamp < threshold) {
+        bank.prepareForDeletion(logLevel, "cleared before threshold");
+        Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${range.firstTimestamp}sec to ${range.lastTimestamp}sec`);
+        const bankIndex = banks.indexOf(bank);
+        delete sources[src][bankIndex];
       } else {
         bank.deleteFramesBeforeTimestamp({
           timestampInSeconds: threshold,
@@ -2670,70 +2610,58 @@ var makeKeyframeManager = () => {
         });
       }
     }
-    await logCacheStats(logLevel);
+    sources[src] = sources[src].filter((bank) => bank !== undefined);
+    logCacheStats(logLevel);
   };
   const getKeyframeBankOrRefetch = async ({
-    packetSink,
     timestamp,
     videoSampleSink,
     src,
     logLevel
   }) => {
-    const startPacket = await packetSink.getKeyPacket(timestamp, {
-      verifyKeyPackets: true
-    }) ?? await packetSink.getFirstPacket({ verifyKeyPackets: true });
-    const hasAlpha = startPacket?.sideData.alpha;
-    if (hasAlpha && !canBrowserUseWebGl2()) {
-      return "has-alpha";
-    }
-    if (!startPacket) {
-      return null;
-    }
-    const startTimestampInSeconds = startPacket.timestamp;
-    const existingBank = sources[src]?.[startTimestampInSeconds];
+    const existingBanks = sources[src] ?? [];
+    const existingBank = existingBanks?.find((bank) => bank.canSatisfyTimestamp(timestamp));
     if (!existingBank) {
-      const newKeyframeBank = getFramesSinceKeyframe({
-        packetSink,
+      Internals10.Log.trace({ logLevel, tag: "@remotion/media" }, `Creating new keyframe bank for src ${src} at timestamp ${timestamp}`);
+      const newKeyframeBank = await makeKeyframeBank({
         videoSampleSink,
-        startPacket,
         logLevel,
-        src
+        src,
+        requestedTimestamp: timestamp
       });
-      addKeyframeBank({ src, bank: newKeyframeBank, startTimestampInSeconds });
+      addKeyframeBank({ src, bank: newKeyframeBank });
       return newKeyframeBank;
     }
-    if (await (await existingBank).hasTimestampInSecond(timestamp)) {
+    if (existingBank.canSatisfyTimestamp(timestamp)) {
+      Internals10.Log.trace({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists and satisfies timestamp ${timestamp}`);
       return existingBank;
     }
     Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
-    await (await existingBank).prepareForDeletion(logLevel);
-    delete sources[src][startTimestampInSeconds];
-    const replacementKeybank = getFramesSinceKeyframe({
-      packetSink,
+    existingBank.prepareForDeletion(logLevel, "already existed but evicted");
+    sources[src] = sources[src].filter((bank) => bank !== existingBank);
+    const replacementKeybank = await makeKeyframeBank({
       videoSampleSink,
-      startPacket,
+      requestedTimestamp: timestamp,
       logLevel,
       src
     });
-    addKeyframeBank({ src, bank: replacementKeybank, startTimestampInSeconds });
+    addKeyframeBank({ src, bank: replacementKeybank });
     return replacementKeybank;
   };
   const requestKeyframeBank = async ({
-    packetSink,
     timestamp,
     videoSampleSink,
     src,
     logLevel,
     maxCacheSize
   }) => {
-    await ensureToStayUnderMaxCacheSize(logLevel, maxCacheSize);
-    await clearKeyframeBanksBeforeTime({
+    ensureToStayUnderMaxCacheSize(logLevel, maxCacheSize);
+    clearKeyframeBanksBeforeTime({
       timestampInSeconds: timestamp,
       src,
       logLevel
     });
     const keyframeBank = await getKeyframeBankOrRefetch({
-      packetSink,
       timestamp,
       videoSampleSink,
       src,
@@ -2741,21 +2669,20 @@ var makeKeyframeManager = () => {
     });
     return keyframeBank;
   };
-  const clearAll = async (logLevel) => {
+  const clearAll = (logLevel) => {
     const srcs = Object.keys(sources);
     for (const src of srcs) {
-      const banks = Object.keys(sources[src]);
-      for (const startTimeInSeconds of banks) {
-        const bank = await sources[src][startTimeInSeconds];
-        bank.prepareForDeletion(logLevel);
-        delete sources[src][startTimeInSeconds];
+      const banks = sources[src];
+      for (const bank of banks) {
+        bank.prepareForDeletion(logLevel, "clearAll");
       }
+      sources[src] = [];
     }
+    sources = {};
   };
   let queue = Promise.resolve(undefined);
   return {
     requestKeyframeBank: ({
-      packetSink,
       timestamp,
       videoSampleSink,
       src,
@@ -2763,7 +2690,6 @@ var makeKeyframeManager = () => {
       maxCacheSize
     }) => {
       queue = queue.then(() => requestKeyframeBank({
-        packetSink,
         timestamp,
         videoSampleSink,
         src,
@@ -2778,11 +2704,11 @@ var makeKeyframeManager = () => {
 };
 
 // src/caches.ts
-var SAFE_BACK_WINDOW_IN_SECONDS = 1;
+var SAFE_WINDOW_OF_MONOTONICITY = 0.2;
 var keyframeManager = makeKeyframeManager();
 var audioManager = makeAudioManager();
-var getTotalCacheStats = async () => {
-  const keyframeManagerCacheStats = await keyframeManager.getCacheStats();
+var getTotalCacheStats = () => {
+  const keyframeManagerCacheStats = keyframeManager.getCacheStats();
   const audioManagerCacheStats = audioManager.getCacheStats();
   return {
     count: keyframeManagerCacheStats.count + audioManagerCacheStats.count,
@@ -3050,6 +2976,154 @@ var combineAudioDataAndClosePrevious = (audioDataArray) => {
 
 // src/get-sink.ts
 import { Internals as Internals12 } from "remotion";
+
+// src/video-extraction/get-frames-since-keyframe.ts
+import {
+  ALL_FORMATS as ALL_FORMATS2,
+  AudioSampleSink,
+  EncodedPacketSink,
+  Input as Input2,
+  MATROSKA,
+  UrlSource as UrlSource2,
+  VideoSampleSink,
+  WEBM
+} from "mediabunny";
+
+// src/browser-can-use-webgl2.ts
+var browserCanUseWebGl2 = null;
+var browserCanUseWebGl2Uncached = () => {
+  const canvas = new OffscreenCanvas(1, 1);
+  const context = canvas.getContext("webgl2");
+  return context !== null;
+};
+var canBrowserUseWebGl2 = () => {
+  if (browserCanUseWebGl2 !== null) {
+    return browserCanUseWebGl2;
+  }
+  browserCanUseWebGl2 = browserCanUseWebGl2Uncached();
+  return browserCanUseWebGl2;
+};
+
+// src/video-extraction/remember-actual-matroska-timestamps.ts
+var rememberActualMatroskaTimestamps = (isMatroska) => {
+  const observations = [];
+  const observeTimestamp = (startTime) => {
+    if (!isMatroska) {
+      return;
+    }
+    observations.push(startTime);
+  };
+  const getRealTimestamp = (observedTimestamp) => {
+    if (!isMatroska) {
+      return observedTimestamp;
+    }
+    return observations.find((observation) => Math.abs(observedTimestamp - observation) < 0.001) ?? null;
+  };
+  return {
+    observeTimestamp,
+    getRealTimestamp
+  };
+};
+
+// src/video-extraction/get-frames-since-keyframe.ts
+var getRetryDelay = () => {
+  return null;
+};
+var getFormatOrNullOrNetworkError = async (input) => {
+  try {
+    return await input.getFormat();
+  } catch (err) {
+    if (isNetworkError(err)) {
+      return "network-error";
+    }
+    return null;
+  }
+};
+var getSinks = async (src) => {
+  const input = new Input2({
+    formats: ALL_FORMATS2,
+    source: new UrlSource2(src, {
+      getRetryDelay
+    })
+  });
+  const format = await getFormatOrNullOrNetworkError(input);
+  const isMatroska = format === MATROSKA || format === WEBM;
+  const getVideoSinks = async () => {
+    if (format === "network-error") {
+      return "network-error";
+    }
+    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";
+    }
+    const sampleSink = new VideoSampleSink(videoTrack);
+    const packetSink = new EncodedPacketSink(videoTrack);
+    const startPacket = await packetSink.getFirstPacket({
+      verifyKeyPackets: true
+    });
+    const hasAlpha = startPacket?.sideData.alpha;
+    if (hasAlpha && !canBrowserUseWebGl2()) {
+      return "cannot-decode-alpha";
+    }
+    return {
+      sampleSink
+    };
+  };
+  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";
+    }
+    if (format === "network-error") {
+      return "network-error";
+    }
+    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)
+    };
+  };
+  const getAudioSinksPromise = (index) => {
+    if (audioSinksPromise[index]) {
+      return audioSinksPromise[index];
+    }
+    audioSinksPromise[index] = getAudioSinks(index);
+    return audioSinksPromise[index];
+  };
+  return {
+    getVideo: () => getVideoSinksPromise(),
+    getAudio: (index) => getAudioSinksPromise(index),
+    actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
+    isMatroska,
+    getDuration: () => {
+      return input.computeDuration();
+    }
+  };
+};
+
+// src/get-sink.ts
 var sinkPromises = {};
 var getSink = (src, logLevel) => {
   let promise = sinkPromises[src];
@@ -3224,6 +3298,12 @@ var extractFrameInternal = async ({
   if (video === "network-error") {
     return { type: "network-error" };
   }
+  if (video === "cannot-decode-alpha") {
+    return {
+      type: "cannot-decode-alpha",
+      durationInSeconds: mediaDurationInSeconds
+    };
+  }
   const timeInSeconds = getTimeInSeconds({
     loop,
     mediaDurationInSeconds,
@@ -3238,36 +3318,29 @@ var extractFrameInternal = async ({
   if (timeInSeconds === null) {
     return {
       type: "success",
-      frame: null,
+      sample: null,
       durationInSeconds: await sink.getDuration()
     };
   }
   try {
     const keyframeBank = await keyframeManager.requestKeyframeBank({
-      packetSink: video.packetSink,
       videoSampleSink: video.sampleSink,
       timestamp: timeInSeconds,
       src,
       logLevel,
       maxCacheSize
     });
-    if (keyframeBank === "has-alpha") {
-      return {
-        type: "cannot-decode-alpha",
-        durationInSeconds: await sink.getDuration()
-      };
-    }
     if (!keyframeBank) {
       return {
         type: "success",
-        frame: null,
+        sample: null,
         durationInSeconds: await sink.getDuration()
       };
     }
     const frame = await keyframeBank.getFrameFromTimestamp(timeInSeconds);
     return {
       type: "success",
-      frame,
+      sample: frame,
       durationInSeconds: await sink.getDuration()
     };
   } catch (err) {
@@ -3331,7 +3404,7 @@ var extractFrameAndAudio = async ({
   maxCacheSize
 }) => {
   try {
-    const [frame, audio] = await Promise.all([
+    const [video, audio] = await Promise.all([
       includeVideo ? extractFrame({
         src,
         timeInSeconds,
@@ -3357,59 +3430,42 @@ var extractFrameAndAudio = async ({
         maxCacheSize
       }) : null
     ]);
-    if (frame?.type === "cannot-decode") {
+    if (video?.type === "cannot-decode") {
       return {
         type: "cannot-decode",
-        durationInSeconds: frame.durationInSeconds
+        durationInSeconds: video.durationInSeconds
       };
     }
-    if (frame?.type === "unknown-container-format") {
+    if (video?.type === "unknown-container-format") {
       return { type: "unknown-container-format" };
     }
-    if (frame?.type === "cannot-decode-alpha") {
+    if (video?.type === "cannot-decode-alpha") {
       return {
         type: "cannot-decode-alpha",
-        durationInSeconds: frame.durationInSeconds
+        durationInSeconds: video.durationInSeconds
       };
     }
-    if (frame?.type === "network-error") {
+    if (video?.type === "network-error") {
       return { type: "network-error" };
     }
     if (audio === "unknown-container-format") {
-      if (frame !== null) {
-        frame?.frame?.close();
-      }
       return { type: "unknown-container-format" };
     }
     if (audio === "network-error") {
-      if (frame !== null) {
-        frame?.frame?.close();
-      }
       return { type: "network-error" };
     }
     if (audio === "cannot-decode") {
-      if (frame?.type === "success" && frame.frame !== null) {
-        frame?.frame.close();
-      }
       return {
         type: "cannot-decode",
-        durationInSeconds: frame?.type === "success" ? frame.durationInSeconds : null
-      };
-    }
-    if (!frame?.frame) {
-      return {
-        type: "success",
-        frame: null,
-        audio: audio?.data ?? null,
-        durationInSeconds: audio?.durationInSeconds ?? null
+        durationInSeconds: video?.type === "success" ? video.durationInSeconds : null
       };
     }
     return {
       type: "success",
-      frame: await rotateFrame({
-        frame: frame.frame.toVideoFrame(),
-        rotation: frame.frame.rotation
-      }),
+      frame: video?.sample ? await rotateFrame({
+        frame: video.sample.toVideoFrame(),
+        rotation: video.sample.rotation
+      }) : null,
       audio: audio?.data ?? null,
       durationInSeconds: audio?.durationInSeconds ?? null
     };
@@ -3676,7 +3732,7 @@ var AudioForRendering = ({
   loopVolumeCurveBehavior,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
-  logLevel = window.remotion_logLevel ?? "info",
+  logLevel: overriddenLogLevel,
   loop,
   fallbackHtml5AudioProps,
   audioStreamIndex,
@@ -3686,8 +3742,11 @@ var AudioForRendering = ({
   disallowFallbackToHtml5Audio,
   toneFrequency,
   trimAfter,
-  trimBefore
+  trimBefore,
+  onError
 }) => {
+  const defaultLogLevel = Internals14.useLogLevel();
+  const logLevel = overriddenLogLevel ?? defaultLogLevel;
   const frame = useCurrentFrame3();
   const absoluteFrame = Internals14.useTimelinePosition();
   const videoConfig = Internals14.useUnsafeVideoConfig();
@@ -3710,7 +3769,7 @@ var AudioForRendering = ({
     sequenceContext?.relativeFrom,
     sequenceContext?.durationInFrames
   ]);
-  const maxCacheSize = useMaxMediaCacheSize(logLevel ?? window.remotion_logLevel);
+  const maxCacheSize = useMaxMediaCacheSize(logLevel);
   const audioEnabled = Internals14.useAudioEnabled();
   useLayoutEffect2(() => {
     const timestamp = frame / fps;
@@ -3739,7 +3798,7 @@ var AudioForRendering = ({
       timeInSeconds: timestamp,
       durationInSeconds,
       playbackRate: playbackRate ?? 1,
-      logLevel: logLevel ?? window.remotion_logLevel,
+      logLevel,
       includeAudio: shouldRenderAudio,
       includeVideo: false,
       isClientSideRendering: environment.isClientSideRendering,
@@ -3750,52 +3809,33 @@ var AudioForRendering = ({
       fps,
       maxCacheSize
     }).then((result) => {
-      if (result.type === "unknown-container-format") {
-        if (environment.isClientSideRendering) {
-          cancelRender2(new Error(`Cannot render audio "${src}": Unknown container format. See supported formats: https://www.remotion.dev/docs/mediabunny/formats`));
-          return;
-        }
-        if (disallowFallbackToHtml5Audio) {
-          cancelRender2(new Error(`Unknown container format ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
+      const handleError = (error, clientSideError, fallbackMessage) => {
+        const [action, errorToUse] = callOnErrorAndResolve({
+          onError,
+          error,
+          disallowFallback: disallowFallbackToHtml5Audio ?? false,
+          isClientSideRendering: environment.isClientSideRendering,
+          clientSideError
+        });
+        if (action === "fail") {
+          cancelRender2(errorToUse);
         }
-        Internals14.Log.warn({
-          logLevel: logLevel ?? window.remotion_logLevel,
-          tag: "@remotion/media"
-        }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
+        Internals14.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
         setReplaceWithHtml5Audio(true);
+      };
+      if (result.type === "unknown-container-format") {
+        handleError(new Error(`Unknown container format ${src}.`), new Error(`Cannot render audio "${src}": Unknown container format. See supported formats: https://www.remotion.dev/docs/mediabunny/formats`), `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
         return;
       }
       if (result.type === "cannot-decode") {
-        if (environment.isClientSideRendering) {
-          cancelRender2(new Error(`Cannot render audio "${src}": The audio could not be decoded by the browser.`));
-          return;
-        }
-        if (disallowFallbackToHtml5Audio) {
-          cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
-        }
-        Internals14.Log.warn({
-          logLevel: logLevel ?? window.remotion_logLevel,
-          tag: "@remotion/media"
-        }, `Cannot decode ${src}, falling back to <Html5Audio>`);
-        setReplaceWithHtml5Audio(true);
+        handleError(new Error(`Cannot decode ${src}.`), new Error(`Cannot render audio "${src}": The audio could not be decoded by the browser.`), `Cannot decode ${src}, falling back to <Html5Audio>`);
         return;
       }
       if (result.type === "cannot-decode-alpha") {
         throw new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToHtml5Audio' was set. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
       }
       if (result.type === "network-error") {
-        if (environment.isClientSideRendering) {
-          cancelRender2(new Error(`Cannot render audio "${src}": Network error while fetching the audio (possibly CORS).`));
-          return;
-        }
-        if (disallowFallbackToHtml5Audio) {
-          cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
-        }
-        Internals14.Log.warn({
-          logLevel: logLevel ?? window.remotion_logLevel,
-          tag: "@remotion/media"
-        }, `Network error fetching ${src}, falling back to <Html5Audio>`);
-        setReplaceWithHtml5Audio(true);
+        handleError(new Error(`Network error fetching ${src}.`), new Error(`Cannot render audio "${src}": Network error while fetching the audio (possibly CORS).`), `Network error fetching ${src}, falling back to <Html5Audio>`);
         return;
       }
       const { audio, durationInSeconds: assetDurationInSeconds } = result;
@@ -3860,7 +3900,8 @@ var AudioForRendering = ({
     trimBefore,
     replaceWithHtml5Audio,
     maxCacheSize,
-    audioEnabled
+    audioEnabled,
+    onError
   ]);
   if (replaceWithHtml5Audio) {
     return /* @__PURE__ */ jsx2(Html5Audio, {
@@ -3961,7 +4002,8 @@ var VideoForPreviewAssertedShowing = ({
   fallbackOffthreadVideoProps,
   audioStreamIndex,
   debugOverlay,
-  headless
+  headless,
+  onError
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -4060,36 +4102,34 @@ var VideoForPreviewAssertedShowing = ({
         if (result.type === "disposed") {
           return;
         }
-        if (result.type === "unknown-container-format") {
-          if (disallowFallbackToOffthreadVideo) {
-            throw new Error(`Unknown container format ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
+        const handleError = (error, fallbackMessage) => {
+          const [action, errorToUse] = callOnErrorAndResolve({
+            onError,
+            error,
+            disallowFallback: disallowFallbackToOffthreadVideo,
+            isClientSideRendering: false,
+            clientSideError: error
+          });
+          if (action === "fail") {
+            throw errorToUse;
           }
-          Internals16.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`);
+          Internals16.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
           setShouldFallbackToNativeVideo(true);
+        };
+        if (result.type === "unknown-container-format") {
+          handleError(new Error(`Unknown container format ${preloadedSrc}.`), `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`);
           return;
         }
         if (result.type === "network-error") {
-          if (disallowFallbackToOffthreadVideo) {
-            throw new Error(`Network error fetching ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
-          }
-          Internals16.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${preloadedSrc}, falling back to <OffthreadVideo>`);
-          setShouldFallbackToNativeVideo(true);
+          handleError(new Error(`Network error fetching ${preloadedSrc}.`), `Network error fetching ${preloadedSrc}, falling back to <OffthreadVideo>`);
           return;
         }
         if (result.type === "cannot-decode") {
-          if (disallowFallbackToOffthreadVideo) {
-            throw new Error(`Cannot decode ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
-          }
-          Internals16.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${preloadedSrc}, falling back to <OffthreadVideo>`);
-          setShouldFallbackToNativeVideo(true);
+          handleError(new Error(`Cannot decode ${preloadedSrc}.`), `Cannot decode ${preloadedSrc}, falling back to <OffthreadVideo>`);
           return;
         }
         if (result.type === "no-tracks") {
-          if (disallowFallbackToOffthreadVideo) {
-            throw new Error(`No video or audio tracks found for ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
-          }
-          Internals16.Log.warn({ logLevel, tag: "@remotion/media" }, `No video or audio tracks found for ${preloadedSrc}, falling back to <OffthreadVideo>`);
-          setShouldFallbackToNativeVideo(true);
+          handleError(new Error(`No video or audio tracks found for ${preloadedSrc}.`), `No video or audio tracks found for ${preloadedSrc}, falling back to <OffthreadVideo>`);
           return;
         }
         if (result.type === "success") {
@@ -4097,11 +4137,31 @@ var VideoForPreviewAssertedShowing = ({
           setMediaDurationInSeconds(result.durationInSeconds);
         }
       }).catch((error) => {
-        Internals16.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", error);
+        const [action, errorToUse] = callOnErrorAndResolve({
+          onError,
+          error,
+          disallowFallback: disallowFallbackToOffthreadVideo,
+          isClientSideRendering: false,
+          clientSideError: error
+        });
+        if (action === "fail") {
+          throw errorToUse;
+        }
+        Internals16.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
         setShouldFallbackToNativeVideo(true);
       });
     } catch (error) {
-      Internals16.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", error);
+      const [action, errorToUse] = callOnErrorAndResolve({
+        error,
+        onError,
+        disallowFallback: disallowFallbackToOffthreadVideo,
+        isClientSideRendering: false,
+        clientSideError: error
+      });
+      if (action === "fail") {
+        throw errorToUse;
+      }
+      Internals16.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
       setShouldFallbackToNativeVideo(true);
     }
     return () => {
@@ -4122,7 +4182,8 @@ var VideoForPreviewAssertedShowing = ({
     loop,
     preloadedSrc,
     sharedAudioContext,
-    videoConfig.fps
+    videoConfig.fps,
+    onError
   ]);
   const classNameValue = useMemo4(() => {
     return [Internals16.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals16.truthy).join(" ");
@@ -4335,7 +4396,8 @@ var VideoForRendering = ({
   toneFrequency,
   trimAfterValue,
   trimBeforeValue,
-  headless
+  headless,
+  onError
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
@@ -4404,64 +4466,43 @@ var VideoForRendering = ({
       fps,
       maxCacheSize
     }).then((result) => {
-      if (result.type === "unknown-container-format") {
+      const handleError = (err, clientSideError, fallbackMessage, mediaDurationInSeconds) => {
         if (environment.isClientSideRendering) {
-          cancelRender3(new Error(`Cannot render video "${src}": Unknown container format. See supported formats: https://www.remotion.dev/docs/mediabunny/formats`));
+          cancelRender3(clientSideError);
           return;
         }
-        if (disallowFallbackToOffthreadVideo) {
-          cancelRender3(new Error(`Unknown container format ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
-        }
-        if (window.remotion_isMainTab) {
-          Internals17.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({ durationInSeconds: null });
-        return;
-      }
-      if (result.type === "cannot-decode") {
-        if (environment.isClientSideRendering) {
-          cancelRender3(new Error(`Cannot render video "${src}": The video could not be decoded by the browser.`));
+        const [action, errorToUse] = callOnErrorAndResolve({
+          onError,
+          error: err,
+          disallowFallback: disallowFallbackToOffthreadVideo,
+          isClientSideRendering: environment.isClientSideRendering,
+          clientSideError: err
+        });
+        if (action === "fail") {
+          cancelRender3(errorToUse);
           return;
         }
-        if (disallowFallbackToOffthreadVideo) {
-          cancelRender3(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
-        }
         if (window.remotion_isMainTab) {
-          Internals17.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
+          Internals17.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
         }
         setReplaceWithOffthreadVideo({
-          durationInSeconds: result.durationInSeconds
+          durationInSeconds: mediaDurationInSeconds
         });
+      };
+      if (result.type === "unknown-container-format") {
+        handleError(new Error(`Unknown container format ${src}.`), new Error(`Cannot render video "${src}": Unknown container format. See supported formats: https://www.remotion.dev/docs/mediabunny/formats`), `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`, null);
+        return;
+      }
+      if (result.type === "cannot-decode") {
+        handleError(new Error(`Cannot decode ${src}.`), new Error(`Cannot render video "${src}": The video could not be decoded by the browser.`), `Cannot decode ${src}, falling back to <OffthreadVideo>`, result.durationInSeconds);
         return;
       }
       if (result.type === "cannot-decode-alpha") {
-        if (environment.isClientSideRendering) {
-          cancelRender3(new Error(`Cannot render video "${src}": The alpha channel could not be decoded by the browser.`));
-          return;
-        }
-        if (disallowFallbackToOffthreadVideo) {
-          cancelRender3(new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
-        }
-        if (window.remotion_isMainTab) {
-          Internals17.Log.info({ logLevel, tag: "@remotion/media" }, `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`);
-        }
-        setReplaceWithOffthreadVideo({
-          durationInSeconds: result.durationInSeconds
-        });
+        handleError(new Error(`Cannot decode alpha component for ${src}.`), new Error(`Cannot render video "${src}": The alpha channel could not be decoded by the browser.`), `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`, result.durationInSeconds);
         return;
       }
       if (result.type === "network-error") {
-        if (environment.isClientSideRendering) {
-          cancelRender3(new Error(`Cannot render video "${src}": Network error while fetching the video (possibly CORS).`));
-          return;
-        }
-        if (disallowFallbackToOffthreadVideo) {
-          cancelRender3(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
-        }
-        if (window.remotion_isMainTab) {
-          Internals17.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${src} (no CORS?), falling back to <OffthreadVideo>`);
-        }
-        setReplaceWithOffthreadVideo({ durationInSeconds: null });
+        handleError(new Error(`Network error fetching ${src}.`), new Error(`Cannot render video "${src}": Network error while fetching the video (possibly CORS).`), `Network error fetching ${src} (no CORS?), falling back to <OffthreadVideo>`, null);
         return;
       }
       const {
@@ -4554,7 +4595,8 @@ var VideoForRendering = ({
     videoEnabled,
     maxCacheSize,
     cancelRender3,
-    headless
+    headless,
+    onError
   ]);
   const classNameValue = useMemo5(() => {
     return [Internals17.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals17.truthy).join(" ");
@@ -4649,7 +4691,8 @@ var InnerVideo = ({
   toneFrequency,
   showInTimeline,
   debugOverlay,
-  headless
+  headless,
+  onError
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -4690,7 +4733,8 @@ var InnerVideo = ({
       toneFrequency,
       trimAfterValue,
       trimBeforeValue,
-      headless
+      headless,
+      onError
     });
   }
   return /* @__PURE__ */ jsx6(VideoForPreview, {
@@ -4713,7 +4757,8 @@ var InnerVideo = ({
     disallowFallbackToOffthreadVideo,
     fallbackOffthreadVideoProps,
     debugOverlay: debugOverlay ?? false,
-    headless: headless ?? false
+    headless: headless ?? false,
+    onError
   });
 };
 var Video = ({
@@ -4739,8 +4784,10 @@ var Video = ({
   stack,
   toneFrequency,
   debugOverlay,
-  headless
+  headless,
+  onError
 }) => {
+  const fallbackLogLevel = Internals18.useLogLevel();
   return /* @__PURE__ */ jsx6(InnerVideo, {
     audioStreamIndex: audioStreamIndex ?? 0,
     className,
@@ -4748,7 +4795,7 @@ var Video = ({
     delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
     disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
     fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
-    logLevel: logLevel ?? (typeof window !== "undefined" ? window.remotion_logLevel ?? "info" : "info"),
+    logLevel: logLevel ?? fallbackLogLevel,
     loop: loop ?? false,
     loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
     muted: muted ?? false,
@@ -4764,7 +4811,8 @@ var Video = ({
     toneFrequency: toneFrequency ?? 1,
     stack,
     debugOverlay: debugOverlay ?? false,
-    headless: headless ?? false
+    headless: headless ?? false,
+    onError
   });
 };
 Internals18.addSequenceStackTraces(Video);