@remotion/media 4.0.355 → 4.0.357

package/dist/esm/index.mjs

@@ -1,54 +1,855 @@
 // src/audio/audio.tsx
-import { useCallback as useCallback2, useContext as useContext5 } from "react";
+import { Internals as Internals11, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
+
+// src/audio/audio-for-preview.tsx
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import {
-  cancelRender as cancelRender3,
-  Internals as Internals7,
-  Sequence,
-  useRemotionEnvironment as useRemotionEnvironment3
+  Internals as Internals2,
+  Audio as RemotionAudio,
+  useBufferState,
+  useCurrentFrame
 } from "remotion";
 
-// ../core/src/audio/shared-audio-tags.tsx
-import React3, {
-  createContext as createContext2,
-  createRef,
-  useCallback,
-  useContext as useContext3,
-  useEffect,
-  useMemo as useMemo2,
-  useRef,
-  useState as useState2
-} from "react";
+// src/video/media-player.ts
+import {
+  ALL_FORMATS,
+  AudioBufferSink,
+  CanvasSink,
+  Input,
+  UrlSource
+} from "mediabunny";
+import { Internals } from "remotion";
 
-// ../core/src/log-level-context.tsx
-import { createContext } from "react";
-import * as React from "react";
-var LogLevelContext = createContext({
-  logLevel: "info",
-  mountTime: 0
-});
+// src/is-network-error.ts
+function isNetworkError(error) {
+  if (error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource")) {
+    return true;
+  }
+  return false;
+}
 
-// ../core/src/use-remotion-environment.ts
-import { useContext as useContext2, useState } from "react";
+// src/video/resolve-playback-time.ts
+var resolvePlaybackTime = ({
+  absolutePlaybackTimeInSeconds,
+  playbackRate,
+  loop,
+  trimBeforeInSeconds,
+  trimAfterInSeconds,
+  mediaDurationInSeconds
+}) => {
+  const loopAfterPreliminary = loop ? Math.min(trimAfterInSeconds ?? Infinity, mediaDurationInSeconds ?? Infinity) : Infinity;
+  const loopAfterConsideringTrimBefore = loopAfterPreliminary - (trimBeforeInSeconds ?? 0);
+  const loopAfterConsideringPlaybackRate = loopAfterConsideringTrimBefore / playbackRate;
+  const timeConsideringLoop = absolutePlaybackTimeInSeconds % loopAfterConsideringPlaybackRate;
+  const time = timeConsideringLoop * playbackRate + (trimBeforeInSeconds ?? 0);
+  if (Number.isNaN(time)) {
+    console.log({
+      absolutePlaybackTimeInSeconds,
+      playbackRate,
+      loop,
+      trimBeforeInSeconds,
+      trimAfterInSeconds,
+      mediaDurationInSeconds
+    });
+    throw new Error("Time is NaN");
+  }
+  return time;
+};
 
-// ../core/src/remotion-environment-context.ts
-import React2 from "react";
-var RemotionEnvironmentContext = React2.createContext(null);
+// 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
+  ]);
+}
 
-// ../core/src/audio/use-audio-context.ts
-import { useMemo } from "react";
+// src/video/media-player.ts
+var SEEK_THRESHOLD = 0.05;
+var AUDIO_BUFFER_TOLERANCE_THRESHOLD = 0.1;
 
-// ../core/src/audio/shared-audio-tags.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var SharedAudioContext = createContext2(null);
+class MediaPlayer {
+  canvas;
+  context;
+  src;
+  logLevel;
+  playbackRate;
+  audioStreamIndex;
+  canvasSink = null;
+  videoFrameIterator = null;
+  nextFrame = null;
+  audioSink = null;
+  audioBufferIterator = null;
+  queuedAudioNodes = new Set;
+  gainNode = null;
+  sharedAudioContext;
+  audioSyncAnchor = 0;
+  playing = false;
+  muted = false;
+  loop = false;
+  trimBeforeSeconds;
+  trimAfterSeconds;
+  animationFrameId = null;
+  videoAsyncId = 0;
+  audioAsyncId = 0;
+  initialized = false;
+  totalDuration;
+  isBuffering = false;
+  onBufferingChangeCallback;
+  audioBufferHealth = 0;
+  audioIteratorStarted = false;
+  HEALTHY_BUFER_THRESHOLD_SECONDS = 1;
+  onVideoFrameCallback;
+  constructor({
+    canvas,
+    src,
+    logLevel,
+    sharedAudioContext,
+    loop,
+    trimBeforeSeconds,
+    trimAfterSeconds,
+    playbackRate,
+    audioStreamIndex
+  }) {
+    this.canvas = canvas ?? null;
+    this.src = src;
+    this.logLevel = logLevel ?? window.remotion_logLevel;
+    this.sharedAudioContext = sharedAudioContext;
+    this.playbackRate = playbackRate;
+    this.loop = loop;
+    this.trimBeforeSeconds = trimBeforeSeconds;
+    this.trimAfterSeconds = trimAfterSeconds;
+    this.audioStreamIndex = audioStreamIndex ?? 0;
+    if (canvas) {
+      const context = canvas.getContext("2d", {
+        alpha: false,
+        desynchronized: true
+      });
+      if (!context) {
+        throw new Error("Could not get 2D context from canvas");
+      }
+      this.context = context;
+    } else {
+      this.context = null;
+    }
+  }
+  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(startTimeUnresolved) {
+    try {
+      const urlSource = new UrlSource(this.src);
+      const input = new Input({
+        source: urlSource,
+        formats: ALL_FORMATS
+      });
+      this.input = input;
+      try {
+        await this.input.getFormat();
+      } catch (error) {
+        const err = error;
+        if (isNetworkError(err)) {
+          throw error;
+        }
+        Internals.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
+        return { type: "unknown-container-format" };
+      }
+      const [duration, videoTrack, audioTracks] = await Promise.all([
+        input.computeDuration(),
+        input.getPrimaryVideoTrack(),
+        input.getAudioTracks()
+      ]);
+      this.totalDuration = duration;
+      const audioTrack = audioTracks[this.audioStreamIndex] ?? null;
+      if (!videoTrack && !audioTrack) {
+        return { type: "no-tracks" };
+      }
+      if (videoTrack && this.canvas && this.context) {
+        const canDecode = await videoTrack.canDecode();
+        if (!canDecode) {
+          return { type: "cannot-decode" };
+        }
+        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);
+      }
+      const startTime = resolvePlaybackTime({
+        absolutePlaybackTimeInSeconds: startTimeUnresolved,
+        playbackRate: this.playbackRate,
+        loop: this.loop,
+        trimBeforeInSeconds: this.trimBeforeSeconds,
+        trimAfterInSeconds: this.trimAfterSeconds,
+        mediaDurationInSeconds: this.totalDuration
+      });
+      if (this.sharedAudioContext) {
+        this.audioSyncAnchor = this.sharedAudioContext.currentTime - startTime;
+      }
+      this.initialized = true;
+      await Promise.all([
+        this.startAudioIterator(startTime),
+        this.startVideoIterator(startTime)
+      ]);
+      this.startRenderLoop();
+      return { type: "success" };
+    } catch (error) {
+      const err = error;
+      if (isNetworkError(err)) {
+        Internals.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
+        return { type: "network-error" };
+      }
+      Internals.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 = resolvePlaybackTime({
+      absolutePlaybackTimeInSeconds: time,
+      playbackRate: this.playbackRate,
+      loop: this.loop,
+      trimBeforeInSeconds: this.trimBeforeSeconds,
+      trimAfterInSeconds: this.trimAfterSeconds,
+      mediaDurationInSeconds: 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();
+      }
+      await Promise.all([
+        this.startAudioIterator(newTime),
+        this.startVideoIterator(newTime)
+      ]);
+    }
+    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;
+  }
+  setPlaybackRate(rate) {
+    this.playbackRate = rate;
+  }
+  setLoop(loop) {
+    this.loop = loop;
+  }
+  dispose() {
+    this.input?.dispose();
+    this.stopRenderLoop();
+    this.videoFrameIterator?.return();
+    this.cleanAudioIteratorAndNodes();
+    this.videoAsyncId++;
+  }
+  getPlaybackTime() {
+    const absoluteTime = this.sharedAudioContext.currentTime - this.audioSyncAnchor;
+    return resolvePlaybackTime({
+      absolutePlaybackTimeInSeconds: absoluteTime,
+      playbackRate: this.playbackRate,
+      loop: this.loop,
+      trimBeforeInSeconds: this.trimBeforeSeconds,
+      trimAfterInSeconds: this.trimAfterSeconds,
+      mediaDurationInSeconds: this.totalDuration
+    });
+  }
+  scheduleAudioChunk(buffer, mediaTimestamp) {
+    const targetTime = mediaTimestamp + 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;
+    return () => {
+      if (this.onBufferingChangeCallback === callback) {
+        this.onBufferingChangeCallback = undefined;
+      }
+    };
+  }
+  onVideoFrame(callback) {
+    this.onVideoFrameCallback = callback;
+    if (this.initialized && callback && this.canvas) {
+      callback(this.canvas);
+    }
+    return () => {
+      if (this.onVideoFrameCallback === callback) {
+        this.onVideoFrameCallback = undefined;
+      }
+    };
+  }
+  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.nextFrame.timestamp <= this.getPlaybackTime();
+  }
+  drawCurrentFrame() {
+    if (this.context && this.nextFrame) {
+      this.context.drawImage(this.nextFrame.canvas, 0, 0);
+    }
+    if (this.onVideoFrameCallback && this.canvas) {
+      this.onVideoFrameCallback(this.canvas);
+    }
+    this.nextFrame = null;
+    this.updateNextFrame();
+  }
+  startAudioIterator = async (startFromSecond) => {
+    if (!this.hasAudio())
+      return;
+    this.audioAsyncId++;
+    const currentAsyncId = this.audioAsyncId;
+    await this.audioBufferIterator?.return();
+    this.audioIteratorStarted = false;
+    this.audioBufferHealth = 0;
+    try {
+      this.audioBufferIterator = this.audioSink.buffers(startFromSecond);
+      this.runAudioIterator(startFromSecond, currentAsyncId);
+    } catch (error) {
+      Internals.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;
+    this.videoFrameIterator?.return().catch(() => {
+      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 && this.context) {
+        Internals.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.canvas) {
+          this.onVideoFrameCallback(this.canvas);
+        }
+      }
+      this.nextFrame = secondFrame ?? null;
+      if (secondFrame) {
+        Internals.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Buffered next frame ${secondFrame.timestamp.toFixed(3)}s`);
+      }
+    } catch (error) {
+      Internals.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 (newNextFrame.timestamp <= this.getPlaybackTime()) {
+          continue;
+        } else {
+          this.nextFrame = newNextFrame;
+          Internals.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Buffered next frame ${newNextFrame.timestamp.toFixed(3)}s`);
+          break;
+        }
+      }
+    } catch (error) {
+      Internals.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) {
+      Internals.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) {
+      Internals.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Force resuming from buffering after ${bufferingDuration}ms`);
+      this.setBufferingState(false);
+    }
+  }
+  runAudioIterator = async (startFromSecond, audioAsyncId) => {
+    if (!this.hasAudio() || !this.audioBufferIterator)
+      return;
+    try {
+      let totalBufferDuration = 0;
+      let isFirstBuffer = true;
+      this.audioIteratorStarted = true;
+      while (true) {
+        if (audioAsyncId !== this.audioAsyncId) {
+          return;
+        }
+        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 - timestamp;
+            isFirstBuffer = false;
+          }
+          if (timestamp < startFromSecond - AUDIO_BUFFER_TOLERANCE_THRESHOLD) {
+            continue;
+          }
+          this.scheduleAudioChunk(buffer, timestamp);
+        }
+        if (timestamp - this.getPlaybackTime() >= 1) {
+          await new Promise((resolve) => {
+            const check = () => {
+              if (timestamp - this.getPlaybackTime() < 1) {
+                resolve();
+              } else {
+                requestAnimationFrame(check);
+              }
+            };
+            check();
+          });
+        }
+      }
+    } catch (error) {
+      Internals.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to run audio iterator", error);
+    }
+  };
+}
+
+// src/audio/audio-for-preview.tsx
+import { jsx } from "react/jsx-runtime";
+var {
+  useUnsafeVideoConfig,
+  Timeline,
+  SharedAudioContext,
+  useMediaMutedState,
+  useMediaVolumeState,
+  useFrameForVolumeProp,
+  evaluateVolume,
+  warnAboutTooHighVolume,
+  usePreload,
+  useMediaInTimeline,
+  SequenceContext
+} = Internals2;
+var NewAudioForPreview = ({
+  src,
+  playbackRate,
+  logLevel,
+  muted,
+  volume,
+  loopVolumeCurveBehavior,
+  loop,
+  trimAfter,
+  trimBefore,
+  name,
+  showInTimeline,
+  stack,
+  disallowFallbackToHtml5Audio,
+  toneFrequency,
+  audioStreamIndex,
+  fallbackHtml5AudioProps
+}) => {
+  const videoConfig = useUnsafeVideoConfig();
+  const frame = useCurrentFrame();
+  const mediaPlayerRef = useRef(null);
+  const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
+  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState(false);
+  const [playing] = Timeline.usePlayingState();
+  const timelineContext = useContext(Timeline.TimelineContext);
+  const globalPlaybackRate = timelineContext.playbackRate;
+  const sharedAudioContext = useContext(SharedAudioContext);
+  const buffer = useBufferState();
+  const delayHandleRef = useRef(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 <NewAudioForPreview>.");
+  }
+  const currentTime = frame / videoConfig.fps;
+  const currentTimeRef = useRef(currentTime);
+  currentTimeRef.current = currentTime;
+  const preloadedSrc = usePreload(src);
+  const [timelineId] = useState(() => String(Math.random()));
+  const parentSequence = useContext(SequenceContext);
+  useMediaInTimeline({
+    volume,
+    mediaVolume,
+    mediaType: "audio",
+    src,
+    playbackRate,
+    displayName: name ?? null,
+    id: timelineId,
+    stack,
+    showInTimeline,
+    premountDisplay: parentSequence?.premountDisplay ?? null,
+    postmountDisplay: parentSequence?.postmountDisplay ?? null
+  });
+  useEffect(() => {
+    if (!sharedAudioContext)
+      return;
+    if (!sharedAudioContext.audioContext)
+      return;
+    try {
+      const player = new MediaPlayer({
+        src: preloadedSrc,
+        logLevel,
+        sharedAudioContext: sharedAudioContext.audioContext,
+        loop,
+        trimAfterSeconds: trimAfter ? trimAfter / videoConfig.fps : undefined,
+        trimBeforeSeconds: trimBefore ? trimBefore / videoConfig.fps : undefined,
+        canvas: null,
+        playbackRate,
+        audioStreamIndex: audioStreamIndex ?? 0
+      });
+      mediaPlayerRef.current = player;
+      player.initialize(currentTimeRef.current).then((result) => {
+        if (result.type === "unknown-container-format") {
+          if (disallowFallbackToHtml5Audio) {
+            throw new Error(`Unknown container format ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
+          }
+          Internals2.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Audio>`);
+          setShouldFallbackToNativeAudio(true);
+          return;
+        }
+        if (result.type === "network-error") {
+          if (disallowFallbackToHtml5Audio) {
+            throw new Error(`Network error fetching ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
+          }
+          Internals2.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${preloadedSrc}, falling back to <Audio>`);
+          setShouldFallbackToNativeAudio(true);
+          return;
+        }
+        if (result.type === "cannot-decode") {
+          if (disallowFallbackToHtml5Audio) {
+            throw new Error(`Cannot decode ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
+          }
+          Internals2.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${preloadedSrc}, falling back to <Audio>`);
+          setShouldFallbackToNativeAudio(true);
+          return;
+        }
+        if (result.type === "no-tracks") {
+          if (disallowFallbackToHtml5Audio) {
+            throw new Error(`No video or audio tracks found for ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
+          }
+          Internals2.Log.warn({ logLevel, tag: "@remotion/media" }, `No video or audio tracks found for ${preloadedSrc}, falling back to <Audio>`);
+          setShouldFallbackToNativeAudio(true);
+          return;
+        }
+        if (result.type === "success") {
+          setMediaPlayerReady(true);
+          Internals2.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] MediaPlayer initialized successfully`);
+        }
+      }).catch((error) => {
+        Internals2.Log.error({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] Failed to initialize MediaPlayer", error);
+        setShouldFallbackToNativeAudio(true);
+      });
+    } catch (error) {
+      Internals2.Log.error({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] MediaPlayer initialization failed", error);
+      setShouldFallbackToNativeAudio(true);
+    }
+    return () => {
+      if (delayHandleRef.current) {
+        delayHandleRef.current.unblock();
+        delayHandleRef.current = null;
+      }
+      if (mediaPlayerRef.current) {
+        Internals2.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] Disposing MediaPlayer`);
+        mediaPlayerRef.current.dispose();
+        mediaPlayerRef.current = null;
+      }
+      setMediaPlayerReady(false);
+      setShouldFallbackToNativeAudio(false);
+    };
+  }, [
+    preloadedSrc,
+    logLevel,
+    sharedAudioContext,
+    currentTimeRef,
+    loop,
+    trimAfter,
+    trimBefore,
+    playbackRate,
+    videoConfig.fps,
+    audioStreamIndex,
+    disallowFallbackToHtml5Audio
+  ]);
+  useEffect(() => {
+    const audioPlayer = mediaPlayerRef.current;
+    if (!audioPlayer)
+      return;
+    if (playing) {
+      audioPlayer.play().catch((error) => {
+        Internals2.Log.error({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] Failed to play", error);
+      });
+    } else {
+      audioPlayer.pause();
+    }
+  }, [playing, logLevel, mediaPlayerReady]);
+  useEffect(() => {
+    const audioPlayer = mediaPlayerRef.current;
+    if (!audioPlayer || !mediaPlayerReady)
+      return;
+    audioPlayer.seekTo(currentTime);
+    Internals2.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+  }, [currentTime, logLevel, mediaPlayerReady]);
+  useEffect(() => {
+    const audioPlayer = mediaPlayerRef.current;
+    if (!audioPlayer || !mediaPlayerReady)
+      return;
+    audioPlayer.onBufferingChange((newBufferingState) => {
+      if (newBufferingState && !delayHandleRef.current) {
+        delayHandleRef.current = buffer.delayPlayback();
+        Internals2.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] MediaPlayer buffering - blocking Remotion playback");
+      } else if (!newBufferingState && delayHandleRef.current) {
+        delayHandleRef.current.unblock();
+        delayHandleRef.current = null;
+        Internals2.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] MediaPlayer unbuffering - unblocking Remotion playback");
+      }
+    });
+  }, [mediaPlayerReady, buffer, logLevel]);
+  const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
+  useEffect(() => {
+    const audioPlayer = mediaPlayerRef.current;
+    if (!audioPlayer || !mediaPlayerReady)
+      return;
+    audioPlayer.setMuted(effectiveMuted);
+  }, [effectiveMuted, mediaPlayerReady]);
+  useEffect(() => {
+    const audioPlayer = mediaPlayerRef.current;
+    if (!audioPlayer || !mediaPlayerReady) {
+      return;
+    }
+    audioPlayer.setVolume(userPreferredVolume);
+  }, [userPreferredVolume, mediaPlayerReady, logLevel]);
+  const effectivePlaybackRate = useMemo(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
+  useEffect(() => {
+    const audioPlayer = mediaPlayerRef.current;
+    if (!audioPlayer || !mediaPlayerReady) {
+      return;
+    }
+    audioPlayer.setPlaybackRate(effectivePlaybackRate);
+  }, [effectivePlaybackRate, mediaPlayerReady, logLevel]);
+  if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
+    return /* @__PURE__ */ jsx(RemotionAudio, {
+      src,
+      muted,
+      volume,
+      startFrom: trimBefore,
+      endAt: trimAfter,
+      playbackRate,
+      loopVolumeCurveBehavior,
+      name,
+      loop,
+      showInTimeline,
+      stack: stack ?? undefined,
+      toneFrequency,
+      audioStreamIndex,
+      pauseWhenBuffering: fallbackHtml5AudioProps?.pauseWhenBuffering,
+      ...fallbackHtml5AudioProps
+    });
+  }
+  return null;
+};
+var AudioForPreview = ({
+  loop,
+  src,
+  logLevel,
+  muted,
+  name,
+  volume,
+  loopVolumeCurveBehavior,
+  playbackRate,
+  trimAfter,
+  trimBefore,
+  showInTimeline,
+  stack,
+  disallowFallbackToHtml5Audio,
+  toneFrequency,
+  audioStreamIndex,
+  fallbackHtml5AudioProps
+}) => {
+  const preloadedSrc = usePreload(src);
+  return /* @__PURE__ */ jsx(NewAudioForPreview, {
+    audioStreamIndex: audioStreamIndex ?? 0,
+    src: preloadedSrc,
+    playbackRate: playbackRate ?? 1,
+    logLevel: logLevel ?? window.remotion_logLevel,
+    muted: muted ?? false,
+    volume: volume ?? 1,
+    loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
+    loop: loop ?? false,
+    trimAfter,
+    trimBefore,
+    name,
+    showInTimeline: showInTimeline ?? true,
+    stack,
+    disallowFallbackToHtml5Audio: disallowFallbackToHtml5Audio ?? false,
+    toneFrequency,
+    fallbackHtml5AudioProps
+  });
+};
 
 // src/audio/audio-for-rendering.tsx
-import { useContext as useContext4, useLayoutEffect, useState as useState3 } from "react";
+import { useContext as useContext2, useLayoutEffect, useMemo as useMemo2, useState as useState2 } from "react";
 import {
+  Audio,
   cancelRender as cancelRender2,
-  Internals as Internals6,
-  useCurrentFrame,
+  Internals as Internals10,
+  random,
+  useCurrentFrame as useCurrentFrame2,
   useDelayRender,
-  useRemotionEnvironment as useRemotionEnvironment2
+  useRemotionEnvironment
 } from "remotion";
 
 // src/convert-audiodata/apply-volume.ts
@@ -63,7 +864,94 @@ var applyVolume = (array, volume) => {
     } else if (newValue > 32767) {
       array[i] = 32767;
     } else {
-      array[i] = newValue;
+      array[i] = newValue;
+    }
+  }
+};
+
+// src/convert-audiodata/resample-audiodata.ts
+var TARGET_NUMBER_OF_CHANNELS = 2;
+var TARGET_SAMPLE_RATE = 48000;
+var fixFloatingPoint = (value) => {
+  if (value % 1 < 0.0000001) {
+    return Math.floor(value);
+  }
+  if (value % 1 > 0.9999999) {
+    return Math.ceil(value);
+  }
+  return value;
+};
+var resampleAudioData = ({
+  srcNumberOfChannels,
+  sourceChannels,
+  destination,
+  targetFrames,
+  chunkSize
+}) => {
+  const getSourceValues = (startUnfixed, endUnfixed, channelIndex) => {
+    const start = fixFloatingPoint(startUnfixed);
+    const end = fixFloatingPoint(endUnfixed);
+    const startFloor = Math.floor(start);
+    const startCeil = Math.ceil(start);
+    const startFraction = start - startFloor;
+    const endFraction = end - Math.floor(end);
+    const endFloor = Math.floor(end);
+    let weightedSum = 0;
+    let totalWeight = 0;
+    if (startFraction > 0) {
+      const firstSample = sourceChannels[startFloor * srcNumberOfChannels + channelIndex];
+      weightedSum += firstSample * (1 - startFraction);
+      totalWeight += 1 - startFraction;
+    }
+    for (let k = startCeil;k < endFloor; k++) {
+      const num = sourceChannels[k * srcNumberOfChannels + channelIndex];
+      weightedSum += num;
+      totalWeight += 1;
+    }
+    if (endFraction > 0) {
+      const lastSample = sourceChannels[endFloor * srcNumberOfChannels + channelIndex];
+      weightedSum += lastSample * endFraction;
+      totalWeight += endFraction;
+    }
+    const average = weightedSum / totalWeight;
+    return average;
+  };
+  for (let newFrameIndex = 0;newFrameIndex < targetFrames; newFrameIndex++) {
+    const start = newFrameIndex * chunkSize;
+    const end = start + chunkSize;
+    if (TARGET_NUMBER_OF_CHANNELS === srcNumberOfChannels) {
+      for (let i = 0;i < srcNumberOfChannels; i++) {
+        destination[newFrameIndex * srcNumberOfChannels + i] = getSourceValues(start, end, i);
+      }
+    }
+    if (srcNumberOfChannels === 1) {
+      const m = getSourceValues(start, end, 0);
+      destination[newFrameIndex * 2 + 0] = m;
+      destination[newFrameIndex * 2 + 1] = m;
+    } else if (srcNumberOfChannels === 4) {
+      const l = getSourceValues(start, end, 0);
+      const r = getSourceValues(start, end, 1);
+      const sl = getSourceValues(start, end, 2);
+      const sr = getSourceValues(start, end, 3);
+      const l2 = 0.5 * (l + sl);
+      const r2 = 0.5 * (r + sr);
+      destination[newFrameIndex * 2 + 0] = l2;
+      destination[newFrameIndex * 2 + 1] = r2;
+    } else if (srcNumberOfChannels === 6) {
+      const l = getSourceValues(start, end, 0);
+      const r = getSourceValues(start, end, 1);
+      const c = getSourceValues(start, end, 2);
+      const sl = getSourceValues(start, end, 3);
+      const sr = getSourceValues(start, end, 4);
+      const sq = Math.sqrt(1 / 2);
+      const l2 = l + sq * (c + sl);
+      const r2 = r + sq * (c + sr);
+      destination[newFrameIndex * 2 + 0] = l2;
+      destination[newFrameIndex * 2 + 1] = r2;
+    } else {
+      for (let i = 0;i < srcNumberOfChannels; i++) {
+        destination[newFrameIndex * TARGET_NUMBER_OF_CHANNELS + i] = getSourceValues(start, end, i);
+      }
     }
   }
 };
@@ -88,10 +976,13 @@ var frameForVolumeProp = ({
 };
 
 // src/caches.ts
-import { cancelRender, Internals as Internals4 } from "remotion";
+import { cancelRender, Internals as Internals7 } from "remotion";
+
+// src/audio-extraction/audio-manager.ts
+import { Internals as Internals4 } from "remotion";
 
 // src/audio-extraction/audio-iterator.ts
-import { Internals } from "remotion";
+import { Internals as Internals3 } from "remotion";
 
 // src/audio-extraction/audio-cache.ts
 var makeAudioCache = () => {
@@ -102,7 +993,7 @@ var makeAudioCache = () => {
     samples[sample.timestamp] = sample;
   };
   const clearBeforeThreshold = (threshold) => {
-    for (const timestamp of timestamps) {
+    for (const timestamp of timestamps.slice()) {
       const endTimestamp = timestamp + samples[timestamp].duration;
       if (endTimestamp < threshold) {
         const isLast = timestamp === timestamps[timestamps.length - 1];
@@ -117,6 +1008,7 @@ var makeAudioCache = () => {
   };
   const deleteAll = () => {
     for (const timestamp of timestamps) {
+      samples[timestamp].close();
       delete samples[timestamp];
     }
     timestamps.length = 0;
@@ -143,6 +1035,9 @@ var makeAudioCache = () => {
     return timestamps[0];
   };
   const getNewestTimestamp = () => {
+    if (timestamps.length === 0) {
+      return null;
+    }
     const sample = samples[timestamps[timestamps.length - 1]];
     return sample.timestamp + sample.duration;
   };
@@ -159,14 +1054,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;
+  Internals3.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();
@@ -174,7 +1081,7 @@ var makeAudioIterator = ({
     lastUsed = Date.now();
     const { value: sample, done } = await sampleIterator.next();
     if (done) {
-      fullDuration = cache.getNewestTimestamp() ?? null;
+      fullDuration = cache.getNewestTimestamp();
       return null;
     }
     const realTimestamp = actualMatroskaTimestamps.getRealTimestamp(sample.timestamp);
@@ -193,6 +1100,12 @@ var makeAudioIterator = ({
       return [];
     }
     const samples = cache.getSamples(timestamp, durationInSeconds);
+    const newestTimestamp = cache.getNewestTimestamp();
+    if (newestTimestamp !== null) {
+      if (newestTimestamp >= timestamp + durationInSeconds - 0.0000000001) {
+        return samples;
+      }
+    }
     while (true) {
       const sample = await getNextSample();
       const deleteBefore = fullDuration === null ? timestamp : Math.min(timestamp, fullDuration);
@@ -210,8 +1123,13 @@ var makeAudioIterator = ({
     }
     return samples;
   };
-  const logOpenFrames = (logLevel) => {
-    Internals.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, cache.getOpenTimestamps().map((t) => t.toFixed(3)).join(", "));
+  const logOpenFrames = () => {
+    const openTimestamps = cache.getOpenTimestamps();
+    if (openTimestamps.length > 0) {
+      const first = openTimestamps[0];
+      const last = openTimestamps[openTimestamps.length - 1];
+      Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
+    }
   };
   const getCacheStats = () => {
     return {
@@ -226,12 +1144,13 @@ var makeAudioIterator = ({
     }
     return oldestTimestamp < timestamp && Math.abs(oldestTimestamp - timestamp) < 10;
   };
-  const prepareForDeletion = async () => {
+  const prepareForDeletion = () => {
     cache.deleteAll();
-    const { value } = await sampleIterator.return();
-    if (value) {
-      value.close();
-    }
+    sampleIterator.return().then((value) => {
+      if (value.value) {
+        value.value.close();
+      }
+    });
     fullDuration = null;
   };
   let op = Promise.resolve([]);
@@ -250,7 +1169,10 @@ var makeAudioIterator = ({
     getCacheStats,
     getLastUsed: () => lastUsed,
     prepareForDeletion,
-    startTimestamp
+    startTimestamp,
+    clearBeforeThreshold: cache.clearBeforeThreshold,
+    getOldestTimestamp: cache.getOldestTimestamp,
+    getNewestTimestamp: cache.getNewestTimestamp
   };
 };
 
@@ -262,14 +1184,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;
@@ -286,13 +1210,26 @@ var makeAudioManager = () => {
     }
     return mostInThePastIterator;
   };
-  const deleteOldestIterator = async () => {
+  const deleteOldestIterator = () => {
     const iterator = getIteratorMostInThePast();
     if (iterator) {
-      await iterator.prepareForDeletion();
+      iterator.prepareForDeletion();
       iterators.splice(iterators.indexOf(iterator), 1);
     }
   };
+  const deleteDuplicateIterators = (logLevel) => {
+    const seenKeys = new Set;
+    for (let i = 0;i < iterators.length; i++) {
+      const iterator = iterators[i];
+      const key = `${iterator.src}-${iterator.getOldestTimestamp()}-${iterator.getNewestTimestamp()}`;
+      if (seenKeys.has(key)) {
+        iterator.prepareForDeletion();
+        iterators.splice(iterators.indexOf(iterator), 1);
+        Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
+      }
+      seenKeys.add(key);
+    }
+  };
   const getIterator = async ({
     src,
     timeInSeconds,
@@ -303,25 +1240,28 @@ var makeAudioManager = () => {
   }) => {
     const maxCacheSize = getMaxVideoCacheSize(logLevel);
     while ((await getTotalCacheStats()).totalSize > maxCacheSize) {
-      await deleteOldestIterator();
+      deleteOldestIterator();
     }
     for (const iterator of iterators) {
       if (iterator.src === src && await iterator.waitForCompletion() && iterator.canSatisfyRequestedTime(timeInSeconds)) {
         return iterator;
       }
     }
-    for (const iterator of iterators) {
+    for (let i = 0;i < iterators.length; i++) {
+      const iterator = iterators[i];
       if (iterator.src === src && iterator.startTimestamp === timeInSeconds) {
-        await iterator.prepareForDeletion();
+        iterator.prepareForDeletion();
         iterators.splice(iterators.indexOf(iterator), 1);
       }
     }
+    deleteDuplicateIterators(logLevel);
     return makeIterator({
       src,
       timeInSeconds,
       audioSampleSink,
       isMatroska,
-      actualMatroskaTimestamps
+      actualMatroskaTimestamps,
+      logLevel
     });
   };
   const getCacheStats = () => {
@@ -334,44 +1274,76 @@ var makeAudioManager = () => {
     }
     return { count: totalCount, totalSize };
   };
-  const logOpenFrames = (logLevel) => {
+  const logOpenFrames = () => {
     for (const iterator of iterators) {
-      iterator.logOpenFrames(logLevel);
+      iterator.logOpenFrames();
     }
   };
+  let queue = Promise.resolve(undefined);
   return {
-    makeIterator,
-    getIterator,
+    getIterator: ({
+      src,
+      timeInSeconds,
+      audioSampleSink,
+      isMatroska,
+      actualMatroskaTimestamps,
+      logLevel
+    }) => {
+      queue = queue.then(() => getIterator({
+        src,
+        timeInSeconds,
+        audioSampleSink,
+        isMatroska,
+        actualMatroskaTimestamps,
+        logLevel
+      }));
+      return queue;
+    },
     getCacheStats,
     getIteratorMostInThePast,
-    logOpenFrames
+    logOpenFrames,
+    deleteDuplicateIterators
   };
 };
 
 // src/video-extraction/keyframe-manager.ts
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals6 } from "remotion";
+
+// src/render-timestamp-range.ts
+var renderTimestampRange = (timestamps) => {
+  if (timestamps.length === 0) {
+    return "(none)";
+  }
+  if (timestamps.length === 1) {
+    return timestamps[0].toFixed(3);
+  }
+  return `${timestamps[0].toFixed(3)}...${timestamps[timestamps.length - 1].toFixed(3)}`;
+};
 
 // src/video-extraction/get-frames-since-keyframe.ts
 import {
-  ALL_FORMATS,
+  ALL_FORMATS as ALL_FORMATS2,
   AudioSampleSink,
   EncodedPacketSink,
-  Input,
+  Input as Input2,
   MATROSKA,
-  UrlSource,
-  VideoSampleSink
+  UrlSource as UrlSource2,
+  VideoSampleSink,
+  WEBM
 } from "mediabunny";
 
 // src/video-extraction/keyframe-bank.ts
-import { Internals as Internals2 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 var roundTo4Digits = (timestamp) => {
   return Math.round(timestamp * 1000) / 1000;
 };
 var makeKeyframeBank = ({
   startTimestampInSeconds,
   endTimestampInSeconds,
-  sampleIterator
+  sampleIterator,
+  logLevel: parentLogLevel
 }) => {
+  Internals5.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
   const frames = {};
   const frameTimestamps = [];
   let lastUsed = Date.now();
@@ -385,7 +1357,7 @@ var makeKeyframeBank = ({
     if (!lastFrame) {
       return true;
     }
-    return roundTo4Digits(lastFrame.timestamp + lastFrame.duration) > roundTo4Digits(timestamp);
+    return roundTo4Digits(lastFrame.timestamp + lastFrame.duration) > roundTo4Digits(timestamp) + 0.001;
   };
   const addFrame = (frame) => {
     frames[frame.timestamp] = frame;
@@ -419,7 +1391,7 @@ var makeKeyframeBank = ({
       if (!sample) {
         return null;
       }
-      if (roundTo4Digits(sample.timestamp) <= roundTo4Digits(timestampInSeconds)) {
+      if (roundTo4Digits(sample.timestamp) <= roundTo4Digits(timestampInSeconds) || Math.abs(sample.timestamp - timestampInSeconds) <= 0.001) {
         return sample;
       }
     }
@@ -428,11 +1400,14 @@ var makeKeyframeBank = ({
   const hasTimestampInSecond = async (timestamp) => {
     return await getFrameFromTimestamp(timestamp) !== null;
   };
-  const prepareForDeletion = async () => {
-    const { value } = await sampleIterator.return();
-    if (value) {
-      value.close();
-    }
+  const prepareForDeletion = (logLevel) => {
+    Internals5.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;
+    });
     for (const frameTimestamp of frameTimestamps) {
       if (!frames[frameTimestamp]) {
         continue;
@@ -448,7 +1423,8 @@ var makeKeyframeBank = ({
     src,
     timestampInSeconds
   }) => {
-    for (const frameTimestamp of frameTimestamps) {
+    const deletedTimestamps = [];
+    for (const frameTimestamp of frameTimestamps.slice()) {
       const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
       if (isLast) {
         continue;
@@ -461,9 +1437,12 @@ var makeKeyframeBank = ({
         frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
         frames[frameTimestamp].close();
         delete frames[frameTimestamp];
-        Internals2.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted frame ${frameTimestamp} for src ${src}`);
+        deletedTimestamps.push(frameTimestamp);
       }
     }
+    if (deletedTimestamps.length > 0) {
+      Internals5.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? "" : "s"} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
+    }
   };
   const getOpenFrameCount = () => {
     return {
@@ -474,11 +1453,18 @@ var makeKeyframeBank = ({
   const getLastUsed = () => {
     return lastUsed;
   };
+  let queue = Promise.resolve(undefined);
   const keyframeBank = {
     startTimestampInSeconds,
     endTimestampInSeconds,
-    getFrameFromTimestamp,
-    prepareForDeletion,
+    getFrameFromTimestamp: (timestamp) => {
+      queue = queue.then(() => getFrameFromTimestamp(timestamp));
+      return queue;
+    },
+    prepareForDeletion: (logLevel) => {
+      queue = queue.then(() => prepareForDeletion(logLevel));
+      return queue;
+    },
     hasTimestampInSecond,
     addFrame,
     deleteFramesBeforeTimestamp,
@@ -510,32 +1496,90 @@ 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)
+  const input = new Input2({
+    formats: ALL_FORMATS2,
+    source: new UrlSource2(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 {
+    getVideo: () => getVideoSinksPromise(),
+    getAudio: (index) => getAudioSinksPromise(index),
     actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
     isMatroska,
-    getDuration: () => input.computeDuration()
-  });
+    getDuration: () => {
+      return input.computeDuration();
+    }
+  };
 };
 var getFramesSinceKeyframe = async ({
   packetSink,
   videoSampleSink,
-  startPacket
+  startPacket,
+  logLevel
 }) => {
   const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
     verifyKeyPackets: true
@@ -544,7 +1588,8 @@ var getFramesSinceKeyframe = async ({
   const keyframeBank = makeKeyframeBank({
     startTimestampInSeconds: startPacket.timestamp,
     endTimestampInSeconds: nextKeyPacket ? nextKeyPacket.timestamp : Infinity,
-    sampleIterator
+    sampleIterator,
+    logLevel
   });
   return keyframeBank;
 };
@@ -572,10 +1617,10 @@ var makeKeyframeManager = () => {
         if (size === 0) {
           continue;
         }
-        Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${timestamps.join(", ")}`);
+        Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
       }
     }
-    Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
+    Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
   };
   const getCacheStats = async () => {
     let count = 0;
@@ -614,9 +1659,9 @@ var makeKeyframeManager = () => {
   const deleteOldestKeyframeBank = async (logLevel) => {
     const { bank: mostInThePastBank, src: mostInThePastSrc } = await getTheKeyframeBankMostInThePast();
     if (mostInThePastBank) {
-      await mostInThePastBank.prepareForDeletion();
+      await mostInThePastBank.prepareForDeletion(logLevel);
       delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
-      Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+      Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
     }
   };
   const ensureToStayUnderMaxCacheSize = async (logLevel) => {
@@ -641,8 +1686,8 @@ var makeKeyframeManager = () => {
       const bank = await sources[src][startTimeInSeconds];
       const { endTimestampInSeconds, startTimestampInSeconds } = bank;
       if (endTimestampInSeconds < threshold) {
-        await bank.prepareForDeletion();
-        Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+        await bank.prepareForDeletion(logLevel);
+        Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
         delete sources[src][startTimeInSeconds];
       } else {
         bank.deleteFramesBeforeTimestamp({
@@ -665,7 +1710,7 @@ var makeKeyframeManager = () => {
       verifyKeyPackets: true
     });
     if (!startPacket) {
-      throw new Error(`No key packet found for timestamp ${timestamp}`);
+      return null;
     }
     const startTimestampInSeconds = startPacket.timestamp;
     const existingBank = sources[src]?.[startTimestampInSeconds];
@@ -673,7 +1718,8 @@ var makeKeyframeManager = () => {
       const newKeyframeBank = getFramesSinceKeyframe({
         packetSink,
         videoSampleSink,
-        startPacket
+        startPacket,
+        logLevel
       });
       addKeyframeBank({ src, bank: newKeyframeBank, startTimestampInSeconds });
       return newKeyframeBank;
@@ -681,13 +1727,14 @@ var makeKeyframeManager = () => {
     if (await (await existingBank).hasTimestampInSecond(timestamp)) {
       return existingBank;
     }
-    Internals3.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frames have already been evicted!`);
-    await (await existingBank).prepareForDeletion();
+    Internals6.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,
       videoSampleSink,
-      startPacket
+      startPacket,
+      logLevel
     });
     addKeyframeBank({ src, bank: replacementKeybank, startTimestampInSeconds });
     return replacementKeybank;
@@ -714,20 +1761,35 @@ var makeKeyframeManager = () => {
     });
     return keyframeBank;
   };
-  const clearAll = async () => {
+  const clearAll = async (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];
-        await bank.prepareForDeletion();
+        bank.prepareForDeletion(logLevel);
         delete sources[src][startTimeInSeconds];
       }
     }
   };
+  let queue = Promise.resolve(undefined);
   return {
-    requestKeyframeBank,
-    addKeyframeBank,
+    requestKeyframeBank: ({
+      packetSink,
+      timestamp,
+      videoSampleSink,
+      src,
+      logLevel
+    }) => {
+      queue = queue.then(() => requestKeyframeBank({
+        packetSink,
+        timestamp,
+        videoSampleSink,
+        src,
+        logLevel
+      }));
+      return queue;
+    },
     getCacheStats,
     clearAll
   };
@@ -753,174 +1815,59 @@ var getUncachedMaxCacheSize = (logLevel) => {
     if (window.remotion_mediaCacheSizeInBytes > 20000 * 1024 * 1024) {
       cancelRender(new Error(`The maximum value for the "mediaCacheSizeInBytes" prop is 20GB (${20000 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
     }
-    Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
+    Internals7.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
     return window.remotion_mediaCacheSizeInBytes;
   }
-  if (window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
-    const value = window.remotion_initialMemoryAvailable / 2;
-    if (value < 240 * 1024 * 1024) {
-      Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 240MB (which is more than half of the available system memory!)`);
-      return 240 * 1024 * 1024;
-    }
-    if (value > 20000 * 1024 * 1024) {
-      Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
-      return 20000 * 1024 * 1024;
-    }
-    Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
-    return value;
-  }
-  return 1000 * 1000 * 1000;
-};
-var cachedMaxCacheSize = null;
-var getMaxVideoCacheSize = (logLevel) => {
-  if (cachedMaxCacheSize !== null) {
-    return cachedMaxCacheSize;
-  }
-  cachedMaxCacheSize = getUncachedMaxCacheSize(logLevel);
-  return cachedMaxCacheSize;
-};
-
-// src/convert-audiodata/combine-audiodata.ts
-var combineAudioDataAndClosePrevious = (audioDataArray) => {
-  let numberOfFrames = 0;
-  let numberOfChannels = null;
-  let sampleRate = null;
-  const { timestamp } = audioDataArray[0];
-  for (const audioData of audioDataArray) {
-    numberOfFrames += audioData.numberOfFrames;
-    if (!numberOfChannels) {
-      numberOfChannels = audioData.numberOfChannels;
-    } else if (numberOfChannels !== audioData.numberOfChannels) {
-      throw new Error("Number of channels do not match");
-    }
-    if (!sampleRate) {
-      sampleRate = audioData.sampleRate;
-    } else if (sampleRate !== audioData.sampleRate) {
-      throw new Error("Sample rates do not match");
-    }
-  }
-  if (!numberOfChannels) {
-    throw new Error("Number of channels is not set");
-  }
-  if (!sampleRate) {
-    throw new Error("Sample rate is not set");
-  }
-  const arr = new Int16Array(numberOfFrames * numberOfChannels);
-  let offset = 0;
-  for (const audioData of audioDataArray) {
-    arr.set(audioData.data, offset);
-    offset += audioData.data.length;
-  }
-  return {
-    data: arr,
-    numberOfChannels,
-    numberOfFrames,
-    sampleRate,
-    timestamp
-  };
-};
-
-// src/convert-audiodata/resample-audiodata.ts
-var TARGET_NUMBER_OF_CHANNELS = 2;
-var TARGET_SAMPLE_RATE = 48000;
-var fixFloatingPoint = (value) => {
-  if (value % 1 < 0.0000001) {
-    return Math.floor(value);
-  }
-  if (value % 1 > 0.9999999) {
-    return Math.ceil(value);
-  }
-  return value;
-};
-var resampleAudioData = ({
-  srcNumberOfChannels,
-  sourceChannels,
-  destination,
-  targetFrames,
-  chunkSize
-}) => {
-  const getSourceValues = (startUnfixed, endUnfixed, channelIndex) => {
-    const start = fixFloatingPoint(startUnfixed);
-    const end = fixFloatingPoint(endUnfixed);
-    const startFloor = Math.floor(start);
-    const startCeil = Math.ceil(start);
-    const startFraction = start - startFloor;
-    const endFraction = end - Math.floor(end);
-    const endFloor = Math.floor(end);
-    let weightedSum = 0;
-    let totalWeight = 0;
-    if (startFraction > 0) {
-      const firstSample = sourceChannels[startFloor * srcNumberOfChannels + channelIndex];
-      weightedSum += firstSample * (1 - startFraction);
-      totalWeight += 1 - startFraction;
-    }
-    for (let k = startCeil;k < endFloor; k++) {
-      const num = sourceChannels[k * srcNumberOfChannels + channelIndex];
-      weightedSum += num;
-      totalWeight += 1;
-    }
-    if (endFraction > 0) {
-      const lastSample = sourceChannels[endFloor * srcNumberOfChannels + channelIndex];
-      weightedSum += lastSample * endFraction;
-      totalWeight += endFraction;
-    }
-    const average = weightedSum / totalWeight;
-    return average;
-  };
-  for (let newFrameIndex = 0;newFrameIndex < targetFrames; newFrameIndex++) {
-    const start = newFrameIndex * chunkSize;
-    const end = start + chunkSize;
-    if (TARGET_NUMBER_OF_CHANNELS === srcNumberOfChannels) {
-      for (let i = 0;i < srcNumberOfChannels; i++) {
-        destination[newFrameIndex * srcNumberOfChannels + i] = getSourceValues(start, end, i);
-      }
-    }
-    if (srcNumberOfChannels === 1) {
-      const m = getSourceValues(start, end, 0);
-      destination[newFrameIndex * 2 + 0] = m;
-      destination[newFrameIndex * 2 + 1] = m;
-    } else if (srcNumberOfChannels === 4) {
-      const l = getSourceValues(start, end, 0);
-      const r = getSourceValues(start, end, 1);
-      const sl = getSourceValues(start, end, 2);
-      const sr = getSourceValues(start, end, 3);
-      const l2 = 0.5 * (l + sl);
-      const r2 = 0.5 * (r + sr);
-      destination[newFrameIndex * 2 + 0] = l2;
-      destination[newFrameIndex * 2 + 1] = r2;
-    } else if (srcNumberOfChannels === 6) {
-      const l = getSourceValues(start, end, 0);
-      const r = getSourceValues(start, end, 1);
-      const c = getSourceValues(start, end, 2);
-      const sl = getSourceValues(start, end, 3);
-      const sr = getSourceValues(start, end, 4);
-      const sq = Math.sqrt(1 / 2);
-      const l2 = l + sq * (c + sl);
-      const r2 = r + sq * (c + sr);
-      destination[newFrameIndex * 2 + 0] = l2;
-      destination[newFrameIndex * 2 + 1] = r2;
-    } else {
-      for (let i = 0;i < srcNumberOfChannels; i++) {
-        destination[newFrameIndex * TARGET_NUMBER_OF_CHANNELS + i] = getSourceValues(start, end, i);
-      }
+  if (window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
+    const value = window.remotion_initialMemoryAvailable / 2;
+    if (value < 240 * 1024 * 1024) {
+      Internals7.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 240MB (which is more than half of the available system memory!)`);
+      return 240 * 1024 * 1024;
     }
+    if (value > 20000 * 1024 * 1024) {
+      Internals7.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
+      return 20000 * 1024 * 1024;
+    }
+    Internals7.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
+    return value;
   }
+  return 1000 * 1000 * 1000;
+};
+var cachedMaxCacheSize = null;
+var getMaxVideoCacheSize = (logLevel) => {
+  if (cachedMaxCacheSize !== null) {
+    return cachedMaxCacheSize;
+  }
+  cachedMaxCacheSize = getUncachedMaxCacheSize(logLevel);
+  return cachedMaxCacheSize;
 };
 
-// src/convert-audiodata/convert-audiodata.ts
-var FORMAT = "s16";
-var roundButRoundDownZeroPointFive = (value) => {
-  if (value % 1 <= 0.5) {
-    return Math.floor(value);
+// src/convert-audiodata/combine-audiodata.ts
+var combineAudioDataAndClosePrevious = (audioDataArray) => {
+  let numberOfFrames = 0;
+  const { timestamp } = audioDataArray[0];
+  for (const audioData of audioDataArray) {
+    numberOfFrames += audioData.numberOfFrames;
+  }
+  const arr = new Int16Array(numberOfFrames * TARGET_NUMBER_OF_CHANNELS);
+  let offset = 0;
+  for (const audioData of audioDataArray) {
+    arr.set(audioData.data, offset);
+    offset += audioData.data.length;
   }
-  return Math.ceil(value);
+  return {
+    data: arr,
+    numberOfFrames,
+    timestamp
+  };
 };
+
+// src/convert-audiodata/convert-audiodata.ts
+var FORMAT = "s16";
 var convertAudioData = ({
   audioData,
-  newSampleRate,
   trimStartInSeconds,
   trimEndInSeconds,
-  targetNumberOfChannels,
   playbackRate
 }) => {
   const {
@@ -928,17 +1875,14 @@ var convertAudioData = ({
     sampleRate: currentSampleRate,
     numberOfFrames
   } = audioData;
-  const ratio = currentSampleRate / newSampleRate;
-  const frameOffset = roundButRoundDownZeroPointFive(trimStartInSeconds * audioData.sampleRate);
+  const ratio = currentSampleRate / TARGET_SAMPLE_RATE;
+  const frameOffset = Math.floor(trimStartInSeconds * audioData.sampleRate);
   const unroundedFrameCount = numberOfFrames - (trimEndInSeconds + trimStartInSeconds) * audioData.sampleRate;
-  const frameCount = Math.round(unroundedFrameCount);
-  const newNumberOfFrames = Math.round(unroundedFrameCount / ratio / playbackRate);
+  const frameCount = Math.ceil(unroundedFrameCount);
+  const newNumberOfFrames = Math.ceil(unroundedFrameCount / ratio / playbackRate);
   if (newNumberOfFrames === 0) {
     throw new Error("Cannot resample - the given sample rate would result in less than 1 sample");
   }
-  if (newSampleRate < 3000 || newSampleRate > 768000) {
-    throw new Error("newSampleRate must be between 3000 and 768000");
-  }
   const srcChannels = new Int16Array(srcNumberOfChannels * frameCount);
   audioData.copyTo(srcChannels, {
     planeIndex: 0,
@@ -946,15 +1890,13 @@ var convertAudioData = ({
     frameOffset,
     frameCount
   });
-  const data = new Int16Array(newNumberOfFrames * targetNumberOfChannels);
+  const data = new Int16Array(newNumberOfFrames * TARGET_NUMBER_OF_CHANNELS);
   const chunkSize = frameCount / newNumberOfFrames;
-  if (newNumberOfFrames === frameCount && targetNumberOfChannels === srcNumberOfChannels && playbackRate === 1) {
+  if (newNumberOfFrames === frameCount && TARGET_NUMBER_OF_CHANNELS === srcNumberOfChannels && playbackRate === 1) {
     return {
       data: srcChannels,
-      numberOfChannels: targetNumberOfChannels,
       numberOfFrames: newNumberOfFrames,
-      sampleRate: newSampleRate,
-      timestamp: audioData.timestamp + trimStartInSeconds * 1e6
+      timestamp: audioData.timestamp + frameOffset / audioData.sampleRate * 1e6
     };
   }
   resampleAudioData({
@@ -966,57 +1908,102 @@ var convertAudioData = ({
   });
   const newAudioData = {
     data,
-    format: FORMAT,
-    numberOfChannels: targetNumberOfChannels,
     numberOfFrames: newNumberOfFrames,
-    sampleRate: newSampleRate,
-    timestamp: audioData.timestamp + trimStartInSeconds * 1e6
+    timestamp: audioData.timestamp + frameOffset / audioData.sampleRate * 1e6
   };
   return newAudioData;
 };
 
-// src/get-sink-weak.ts
-import { Internals as Internals5 } from "remotion";
+// src/get-sink.ts
+import { Internals as Internals8 } from "remotion";
 var sinkPromises = {};
-var getSinkWeak = async (src, logLevel) => {
+var getSink = (src, logLevel) => {
   let promise = sinkPromises[src];
   if (!promise) {
-    promise = getSinks(src);
-    sinkPromises[src] = promise;
-  }
-  let awaited = await promise;
-  let deferredValue = awaited.deref();
-  if (!deferredValue) {
-    Internals5.Log.verbose({
+    Internals8.Log.verbose({
       logLevel,
       tag: "@remotion/media"
-    }, `Sink for ${src} was garbage collected, creating new sink`);
+    }, `Sink for ${src} was not found, creating new sink`);
     promise = getSinks(src);
     sinkPromises[src] = promise;
-    awaited = await promise;
-    deferredValue = awaited.deref();
   }
-  return deferredValue;
+  return promise;
+};
+
+// src/get-time-in-seconds.ts
+import { Internals as Internals9 } from "remotion";
+var getTimeInSeconds = ({
+  loop,
+  mediaDurationInSeconds,
+  unloopedTimeInSeconds,
+  src,
+  trimAfter,
+  trimBefore,
+  fps,
+  playbackRate
+}) => {
+  if (mediaDurationInSeconds === null && loop) {
+    throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
+  }
+  const loopDuration = loop ? Internals9.calculateLoopDuration({
+    trimAfter,
+    mediaDurationInFrames: mediaDurationInSeconds * fps,
+    playbackRate: 1,
+    trimBefore
+  }) / fps : Infinity;
+  const timeInSeconds = unloopedTimeInSeconds * playbackRate % loopDuration;
+  if ((trimAfter ?? null) !== null) {
+    if (!loop) {
+      const time = (trimAfter - (trimBefore ?? 0)) / fps;
+      if (timeInSeconds >= time) {
+        return null;
+      }
+    }
+  }
+  return timeInSeconds + (trimBefore ?? 0) / fps;
 };
 
 // src/audio-extraction/extract-audio.ts
-var extractAudio = async ({
+var extractAudioInternal = async ({
   src,
   timeInSeconds: unloopedTimeInSeconds,
-  durationInSeconds,
+  durationInSeconds: durationNotYetApplyingPlaybackRate,
   logLevel,
   loop,
-  playbackRate
+  playbackRate,
+  audioStreamIndex,
+  trimBefore,
+  trimAfter,
+  fps
 }) => {
-  const { audio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSinkWeak(src, logLevel);
-  let duration = null;
+  const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSink(src, logLevel);
+  let mediaDurationInSeconds = null;
   if (loop) {
-    duration = await getDuration();
+    mediaDurationInSeconds = await getDuration();
   }
-  if (audio === null) {
+  const audio = await getAudio(audioStreamIndex);
+  if (audio === "no-audio-track") {
     return { data: null, durationInSeconds: null };
   }
-  const timeInSeconds = loop ? unloopedTimeInSeconds % duration : unloopedTimeInSeconds;
+  if (audio === "cannot-decode-audio") {
+    return "cannot-decode";
+  }
+  if (audio === "unknown-container-format") {
+    return "unknown-container-format";
+  }
+  const timeInSeconds = getTimeInSeconds({
+    loop,
+    mediaDurationInSeconds,
+    unloopedTimeInSeconds,
+    src,
+    trimAfter,
+    playbackRate,
+    trimBefore,
+    fps
+  });
+  if (timeInSeconds === null) {
+    return { data: null, durationInSeconds: mediaDurationInSeconds };
+  }
   const sampleIterator = await audioManager.getIterator({
     src,
     timeInSeconds,
@@ -1025,8 +2012,9 @@ var extractAudio = async ({
     actualMatroskaTimestamps,
     logLevel
   });
+  const durationInSeconds = durationNotYetApplyingPlaybackRate * playbackRate;
   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];
@@ -1047,7 +2035,7 @@ var extractAudio = async ({
         trimStartInSeconds = 0;
       }
       if (trimStartInSeconds < 0) {
-        throw new Error(`trimStartInSeconds is negative: ${trimStartInSeconds}`);
+        throw new Error(`trimStartInSeconds is negative: ${trimStartInSeconds}. ${JSON.stringify({ timeInSeconds, ts: sample.timestamp, d: sample.duration, isFirstSample, isLastSample, durationInSeconds, i, st: samples.map((s) => s.timestamp) })}`);
       }
     }
     if (isLastSample) {
@@ -1055,10 +2043,8 @@ var extractAudio = async ({
     }
     const audioData = convertAudioData({
       audioData: audioDataRaw,
-      newSampleRate: TARGET_SAMPLE_RATE,
       trimStartInSeconds,
       trimEndInSeconds,
-      targetNumberOfChannels: TARGET_NUMBER_OF_CHANNELS,
       playbackRate
     });
     audioDataRaw.close();
@@ -1068,25 +2054,60 @@ var extractAudio = async ({
     audioDataArray.push(audioData);
   }
   if (audioDataArray.length === 0) {
-    return { data: null, durationInSeconds: duration };
+    return { data: null, durationInSeconds: mediaDurationInSeconds };
   }
   const combined = combineAudioDataAndClosePrevious(audioDataArray);
-  return { data: combined, durationInSeconds: duration };
+  return { data: combined, durationInSeconds: mediaDurationInSeconds };
+};
+var queue = Promise.resolve(undefined);
+var extractAudio = (params) => {
+  queue = queue.then(() => extractAudioInternal(params));
+  return queue;
 };
 
 // src/video-extraction/extract-frame.ts
-var extractFrame = async ({
+var extractFrameInternal = async ({
   src,
-  timeInSeconds: unloopedTimeinSeconds,
+  timeInSeconds: unloopedTimeInSeconds,
   logLevel,
-  loop
+  loop,
+  trimAfter,
+  trimBefore,
+  playbackRate,
+  fps
 }) => {
-  const sink = await getSinkWeak(src, logLevel);
-  const { video, getDuration } = sink;
-  if (video === null) {
+  const sink = await getSink(src, logLevel);
+  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 { type: "cannot-decode", durationInSeconds: await sink.getDuration() };
+  }
+  if (video === "unknown-container-format") {
+    return { type: "unknown-container-format" };
+  }
+  let mediaDurationInSeconds = null;
+  if (loop) {
+    mediaDurationInSeconds = await sink.getDuration();
+  }
+  const timeInSeconds = getTimeInSeconds({
+    loop,
+    mediaDurationInSeconds,
+    unloopedTimeInSeconds,
+    src,
+    trimAfter,
+    playbackRate,
+    trimBefore,
+    fps
+  });
+  if (timeInSeconds === null) {
+    return {
+      type: "success",
+      frame: null,
+      durationInSeconds: await sink.getDuration()
+    };
+  }
   const keyframeBank = await keyframeManager.requestKeyframeBank({
     packetSink: video.packetSink,
     videoSampleSink: video.sampleSink,
@@ -1094,8 +2115,20 @@ var extractFrame = async ({
     src,
     logLevel
   });
+  if (!keyframeBank) {
+    return {
+      type: "success",
+      frame: null,
+      durationInSeconds: await sink.getDuration()
+    };
+  }
   const frame = await keyframeBank.getFrameFromTimestamp(timeInSeconds);
-  return frame;
+  return { type: "success", frame, durationInSeconds: await sink.getDuration() };
+};
+var queue2 = Promise.resolve(undefined);
+var extractFrame = (params) => {
+  queue2 = queue2.then(() => extractFrameInternal(params));
+  return queue2;
 };
 
 // src/extract-frame-and-audio.ts
@@ -1107,29 +2140,74 @@ var extractFrameAndAudio = async ({
   playbackRate,
   includeAudio,
   includeVideo,
-  loop
+  loop,
+  audioStreamIndex,
+  trimAfter,
+  trimBefore,
+  fps
 }) => {
-  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,
+        trimAfter,
+        playbackRate,
+        trimBefore,
+        fps
+      }) : null,
+      includeAudio ? extractAudio({
+        src,
+        timeInSeconds,
+        durationInSeconds,
+        logLevel,
+        loop,
+        playbackRate,
+        audioStreamIndex,
+        trimAfter,
+        fps,
+        trimBefore
+      }) : null
+    ]);
+    if (frame?.type === "cannot-decode") {
+      return {
+        type: "cannot-decode",
+        durationInSeconds: frame.durationInSeconds
+      };
+    }
+    if (frame?.type === "unknown-container-format") {
+      return { type: "unknown-container-format" };
+    }
+    if (audio === "unknown-container-format") {
+      if (frame !== null) {
+        frame?.frame?.close();
+      }
+      return { type: "unknown-container-format" };
+    }
+    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
+      };
+    }
+    return {
+      type: "success",
+      frame: frame?.frame?.toVideoFrame() ?? null,
+      audio: audio?.data ?? null,
+      durationInSeconds: audio?.durationInSeconds ?? null
+    };
+  } catch (err) {
+    const error = err;
+    if (isNetworkError(error)) {
+      return { type: "network-error" };
+    }
+    throw err;
+  }
 };
 
 // src/video-extraction/extract-frame-via-broadcast-channel.ts
@@ -1138,7 +2216,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 +2224,38 @@ 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,
+          trimAfter: data.trimAfter,
+          trimBefore: data.trimBefore,
+          fps: data.fps
         });
+        if (result.type === "cannot-decode") {
+          const cannotDecodeResponse = {
+            type: "response-cannot-decode",
+            id: data.id,
+            durationInSeconds: result.durationInSeconds
+          };
+          window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
+          return;
+        }
+        if (result.type === "network-error") {
+          const networkErrorResponse = {
+            type: "response-network-error",
+            id: data.id
+          };
+          window.remotion_broadcastChannel.postMessage(networkErrorResponse);
+          return;
+        }
+        if (result.type === "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 +2292,11 @@ var extractFrameViaBroadcastChannel = ({
   includeAudio,
   includeVideo,
   isClientSideRendering,
-  loop
+  loop,
+  audioStreamIndex,
+  trimAfter,
+  trimBefore,
+  fps
 }) => {
   if (isClientSideRendering || window.remotion_isMainTab) {
     return extractFrameAndAudio({
@@ -1195,7 +2307,11 @@ var extractFrameViaBroadcastChannel = ({
       playbackRate,
       includeAudio,
       includeVideo,
-      loop
+      loop,
+      audioStreamIndex,
+      trimAfter,
+      trimBefore,
+      fps
     });
   }
   const requestId = crypto.randomUUID();
@@ -1205,17 +2321,43 @@ var extractFrameViaBroadcastChannel = ({
       if (!data) {
         return;
       }
-      if (data.type === "response-success" && data.id === requestId) {
+      if (data.id !== requestId) {
+        return;
+      }
+      if (data.type === "response-success") {
         resolve({
+          type: "success",
           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({
+          type: "cannot-decode",
+          durationInSeconds: data.durationInSeconds
+        });
+        window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
+      }
+      if (data.type === "response-network-error") {
+        resolve({ type: "network-error" });
+        window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
+      }
+      if (data.type === "response-unknown-container-format") {
+        resolve({ type: "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 +2371,11 @@ var extractFrameViaBroadcastChannel = ({
     playbackRate,
     includeAudio,
     includeVideo,
-    loop
+    loop,
+    audioStreamIndex,
+    trimAfter,
+    trimBefore,
+    fps
   };
   window.remotion_broadcastChannel.postMessage(request);
   let timeoutId;
@@ -1247,6 +2393,7 @@ var extractFrameViaBroadcastChannel = ({
 };
 
 // src/audio/audio-for-rendering.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var AudioForRendering = ({
   volume: volumeProp,
   playbackRate,
@@ -1256,15 +2403,23 @@ var AudioForRendering = ({
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
   logLevel = window.remotion_logLevel,
-  loop
+  loop,
+  fallbackHtml5AudioProps,
+  audioStreamIndex,
+  showInTimeline,
+  style,
+  name,
+  disallowFallbackToHtml5Audio,
+  toneFrequency,
+  trimAfter,
+  trimBefore
 }) => {
-  const frame = useCurrentFrame();
-  const absoluteFrame = Internals6.useTimelinePosition();
-  const videoConfig = Internals6.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext4(Internals6.RenderAssetManager);
-  const startsAt = Internals6.useMediaStartsAt();
-  const environment = useRemotionEnvironment2();
-  const [id] = useState3(() => `${Math.random()}`.replace("0.", ""));
+  const frame = useCurrentFrame2();
+  const absoluteFrame = Internals10.useTimelinePosition();
+  const videoConfig = Internals10.useUnsafeVideoConfig();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext2(Internals10.RenderAssetManager);
+  const startsAt = Internals10.useMediaStartsAt();
+  const environment = useRemotionEnvironment();
   if (!videoConfig) {
     throw new Error("No video config found");
   }
@@ -1273,10 +2428,20 @@ var AudioForRendering = ({
   }
   const { fps } = videoConfig;
   const { delayRender, continueRender } = useDelayRender();
+  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState2(false);
+  const sequenceContext = useContext2(Internals10.SequenceContext);
+  const id = useMemo2(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+    src,
+    sequenceContext?.cumulatedFrom,
+    sequenceContext?.relativeFrom,
+    sequenceContext?.durationInFrames
+  ]);
   useLayoutEffect(() => {
-    const actualFps = playbackRate ? fps / playbackRate : fps;
-    const timestamp = frame / actualFps;
-    const durationInSeconds = 1 / actualFps;
+    const timestamp = frame / fps;
+    const durationInSeconds = 1 / fps;
+    if (replaceWithHtml5Audio) {
+      return;
+    }
     const newHandle = delayRender(`Extracting audio for frame ${frame}`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
@@ -1295,12 +2460,41 @@ var AudioForRendering = ({
       timeInSeconds: timestamp,
       durationInSeconds,
       playbackRate: playbackRate ?? 1,
-      logLevel: logLevel ?? "info",
+      logLevel,
       includeAudio: shouldRenderAudio,
       includeVideo: false,
       isClientSideRendering: environment.isClientSideRendering,
-      loop: loop ?? false
-    }).then(({ audio, durationInSeconds: assetDurationInSeconds }) => {
+      loop: loop ?? false,
+      audioStreamIndex: audioStreamIndex ?? 0,
+      trimAfter,
+      trimBefore,
+      fps
+    }).then((result) => {
+      if (result.type === "unknown-container-format") {
+        if (disallowFallbackToHtml5Audio) {
+          cancelRender2(new Error(`Unknown container format ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
+        }
+        Internals10.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.type === "cannot-decode") {
+        if (disallowFallbackToHtml5Audio) {
+          cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
+        }
+        Internals10.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <Audio>`);
+        setReplaceWithHtml5Audio(true);
+        return;
+      }
+      if (result.type === "network-error") {
+        if (disallowFallbackToHtml5Audio) {
+          cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
+        }
+        Internals10.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,
@@ -1309,168 +2503,467 @@ var AudioForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals6.evaluateVolume({
+      const volume = Internals10.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals6.warnAboutTooHighVolume(volume);
-      if (audio && volume > 0) {
-        applyVolume(audio.data, volume);
-        registerRenderAsset({
-          type: "inline-audio",
-          id,
-          audio: Array.from(audio.data),
-          sampleRate: audio.sampleRate,
-          numberOfChannels: audio.numberOfChannels,
-          frame: absoluteFrame,
-          timestamp: audio.timestamp,
-          duration: audio.numberOfFrames / audio.sampleRate * 1e6
-        });
-      }
-      continueRender(newHandle);
-    }).catch((error) => {
-      cancelRender2(error);
-    });
+      Internals10.warnAboutTooHighVolume(volume);
+      if (audio && volume > 0) {
+        applyVolume(audio.data, volume);
+        registerRenderAsset({
+          type: "inline-audio",
+          id,
+          audio: Array.from(audio.data),
+          frame: absoluteFrame,
+          timestamp: audio.timestamp,
+          duration: audio.numberOfFrames / TARGET_SAMPLE_RATE * 1e6,
+          toneFrequency: toneFrequency ?? 1
+        });
+      }
+      continueRender(newHandle);
+    }).catch((error) => {
+      cancelRender2(error);
+    });
+    return () => {
+      continueRender(newHandle);
+      unregisterRenderAsset(id);
+    };
+  }, [
+    absoluteFrame,
+    continueRender,
+    delayRender,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    disallowFallbackToHtml5Audio,
+    environment.isClientSideRendering,
+    fps,
+    frame,
+    id,
+    logLevel,
+    loop,
+    loopVolumeCurveBehavior,
+    muted,
+    playbackRate,
+    registerRenderAsset,
+    src,
+    startsAt,
+    unregisterRenderAsset,
+    volumeProp,
+    audioStreamIndex,
+    toneFrequency,
+    trimAfter,
+    trimBefore,
+    replaceWithHtml5Audio
+  ]);
+  if (replaceWithHtml5Audio) {
+    return /* @__PURE__ */ jsx2(Audio, {
+      src,
+      playbackRate,
+      muted,
+      loop,
+      volume: volumeProp,
+      delayRenderRetries,
+      delayRenderTimeoutInMilliseconds,
+      style,
+      loopVolumeCurveBehavior,
+      audioStreamIndex,
+      useWebAudioApi: fallbackHtml5AudioProps?.useWebAudioApi,
+      onError: fallbackHtml5AudioProps?.onError,
+      toneFrequency,
+      acceptableTimeShiftInSeconds: fallbackHtml5AudioProps?.acceptableTimeShiftInSeconds,
+      name,
+      showInTimeline
+    });
+  }
+  return null;
+};
+
+// src/audio/audio.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var { validateMediaProps } = Internals11;
+var Audio2 = (props) => {
+  const { name, stack, showInTimeline, ...otherProps } = props;
+  const environment = useRemotionEnvironment2();
+  if (typeof props.src !== "string") {
+    throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+  }
+  validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Audio");
+  if (environment.isRendering) {
+    return /* @__PURE__ */ jsx3(AudioForRendering, {
+      ...otherProps
+    });
+  }
+  return /* @__PURE__ */ jsx3(AudioForPreview, {
+    name,
+    ...otherProps,
+    stack: stack ?? null
+  });
+};
+Internals11.addSequenceStackTraces(Audio2);
+
+// src/video/video.tsx
+import { Internals as Internals14, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
+
+// src/video/video-for-preview.tsx
+import { useContext as useContext3, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { Internals as Internals12, useBufferState as useBufferState2, useCurrentFrame as useCurrentFrame3, Video } from "remotion";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var {
+  useUnsafeVideoConfig: useUnsafeVideoConfig2,
+  Timeline: Timeline2,
+  SharedAudioContext: SharedAudioContext2,
+  useMediaMutedState: useMediaMutedState2,
+  useMediaVolumeState: useMediaVolumeState2,
+  useFrameForVolumeProp: useFrameForVolumeProp2,
+  evaluateVolume: evaluateVolume2,
+  warnAboutTooHighVolume: warnAboutTooHighVolume2,
+  usePreload: usePreload2,
+  useMediaInTimeline: useMediaInTimeline2,
+  SequenceContext: SequenceContext2
+} = Internals12;
+var NewVideoForPreview = ({
+  src,
+  style,
+  playbackRate,
+  logLevel,
+  className,
+  muted,
+  volume,
+  loopVolumeCurveBehavior,
+  onVideoFrame,
+  showInTimeline,
+  loop,
+  name,
+  trimAfter,
+  trimBefore,
+  stack,
+  disallowFallbackToOffthreadVideo,
+  fallbackOffthreadVideoProps,
+  audioStreamIndex
+}) => {
+  const canvasRef = useRef2(null);
+  const videoConfig = useUnsafeVideoConfig2();
+  const frame = useCurrentFrame3();
+  const mediaPlayerRef = useRef2(null);
+  const [mediaPlayerReady, setMediaPlayerReady] = useState3(false);
+  const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState3(false);
+  const [playing] = Timeline2.usePlayingState();
+  const timelineContext = useContext3(Timeline2.TimelineContext);
+  const globalPlaybackRate = timelineContext.playbackRate;
+  const sharedAudioContext = useContext3(SharedAudioContext2);
+  const buffer = useBufferState2();
+  const [mediaMuted] = useMediaMutedState2();
+  const [mediaVolume] = useMediaVolumeState2();
+  const volumePropFrame = useFrameForVolumeProp2(loopVolumeCurveBehavior);
+  const userPreferredVolume = evaluateVolume2({
+    frame: volumePropFrame,
+    volume,
+    mediaVolume
+  });
+  warnAboutTooHighVolume2(userPreferredVolume);
+  const [timelineId] = useState3(() => String(Math.random()));
+  const parentSequence = useContext3(SequenceContext2);
+  useMediaInTimeline2({
+    volume,
+    mediaVolume,
+    mediaType: "video",
+    src,
+    playbackRate,
+    displayName: name ?? null,
+    id: timelineId,
+    stack,
+    showInTimeline,
+    premountDisplay: parentSequence?.premountDisplay ?? null,
+    postmountDisplay: parentSequence?.postmountDisplay ?? null
+  });
+  if (!videoConfig) {
+    throw new Error("No video config found");
+  }
+  if (!src) {
+    throw new TypeError("No `src` was passed to <NewVideoForPreview>.");
+  }
+  const currentTime = frame / videoConfig.fps;
+  const currentTimeRef = useRef2(currentTime);
+  currentTimeRef.current = currentTime;
+  const preloadedSrc = usePreload2(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,
+        loop,
+        trimAfterSeconds: trimAfter ? trimAfter / videoConfig.fps : undefined,
+        trimBeforeSeconds: trimBefore ? trimBefore / videoConfig.fps : undefined,
+        playbackRate,
+        audioStreamIndex
+      });
+      mediaPlayerRef.current = player;
+      player.initialize(currentTimeRef.current).then((result) => {
+        if (result.type === "unknown-container-format") {
+          if (disallowFallbackToOffthreadVideo) {
+            throw new Error(`Unknown container format ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
+          }
+          Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`);
+          setShouldFallbackToNativeVideo(true);
+          return;
+        }
+        if (result.type === "network-error") {
+          if (disallowFallbackToOffthreadVideo) {
+            throw new Error(`Network error fetching ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
+          }
+          Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${preloadedSrc}, falling back to <OffthreadVideo>`);
+          setShouldFallbackToNativeVideo(true);
+          return;
+        }
+        if (result.type === "cannot-decode") {
+          if (disallowFallbackToOffthreadVideo) {
+            throw new Error(`Cannot decode ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
+          }
+          Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${preloadedSrc}, falling back to <OffthreadVideo>`);
+          setShouldFallbackToNativeVideo(true);
+          return;
+        }
+        if (result.type === "no-tracks") {
+          if (disallowFallbackToOffthreadVideo) {
+            throw new Error(`No video or audio tracks found for ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
+          }
+          Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `No video or audio tracks found for ${preloadedSrc}, falling back to <OffthreadVideo>`);
+          setShouldFallbackToNativeVideo(true);
+          return;
+        }
+        if (result.type === "success") {
+          setMediaPlayerReady(true);
+        }
+      }).catch((error) => {
+        Internals12.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] Failed to initialize MediaPlayer", error);
+        setShouldFallbackToNativeVideo(true);
+      });
+    } catch (error) {
+      Internals12.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer initialization failed", error);
+      setShouldFallbackToNativeVideo(true);
+    }
     return () => {
-      continueRender(newHandle);
-      unregisterRenderAsset(id);
+      if (mediaPlayerRef.current) {
+        Internals12.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewVideoForPreview] Disposing MediaPlayer`);
+        mediaPlayerRef.current.dispose();
+        mediaPlayerRef.current = null;
+      }
+      setMediaPlayerReady(false);
+      setShouldFallbackToNativeVideo(false);
     };
   }, [
-    absoluteFrame,
-    continueRender,
-    delayRender,
-    delayRenderRetries,
-    delayRenderTimeoutInMilliseconds,
-    environment.isClientSideRendering,
-    fps,
-    frame,
-    id,
+    preloadedSrc,
     logLevel,
+    sharedAudioContext,
     loop,
-    loopVolumeCurveBehavior,
-    muted,
-    playbackRate,
-    registerRenderAsset,
-    src,
-    startsAt,
-    unregisterRenderAsset,
-    volumeProp
-  ]);
-  return null;
-};
-
-// src/audio/audio.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var {
-  validateMediaTrimProps,
-  resolveTrimProps,
-  validateMediaProps,
-  AudioForPreview
-} = Internals7;
-var onRemotionError = (_e) => {};
-var Audio = (props) => {
-  const audioContext = useContext5(SharedAudioContext);
-  const {
-    trimBefore,
     trimAfter,
-    name,
-    pauseWhenBuffering,
-    stack,
-    showInTimeline,
-    loop,
-    ...otherProps
-  } = props;
-  const environment = useRemotionEnvironment3();
-  const onDuration = useCallback2(() => {
-    return;
-  }, []);
-  if (typeof props.src !== "string") {
-    throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
-  }
-  validateMediaTrimProps({
-    startFrom: undefined,
-    endAt: undefined,
-    trimBefore,
-    trimAfter
-  });
-  const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
-    startFrom: undefined,
-    endAt: undefined,
     trimBefore,
-    trimAfter
-  });
-  const onError = useCallback2((e) => {
-    console.log(e.currentTarget.error);
-    const errMessage = `Could not play audio: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
-    if (loop) {
-      if (onRemotionError) {
-        onRemotionError(new Error(errMessage));
-        return;
-      }
-      cancelRender3(new Error(errMessage));
+    videoConfig.fps,
+    playbackRate,
+    disallowFallbackToOffthreadVideo,
+    audioStreamIndex
+  ]);
+  const classNameValue = useMemo3(() => {
+    return [Internals12.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals12.truthy).join(" ");
+  }, [className]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer)
+      return;
+    if (playing) {
+      mediaPlayer.play().catch((error) => {
+        Internals12.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] Failed to play", error);
+      });
     } else {
-      onRemotionError?.(new Error(errMessage));
-      console.warn(errMessage);
-    }
-  }, [loop]);
-  if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx2(Sequence, {
-      layout: "none",
-      from: 0 - (trimBeforeValue ?? 0),
-      showInTimeline: false,
-      durationInFrames: trimAfterValue,
-      name,
-      children: /* @__PURE__ */ jsx2(Audio, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
-        ...otherProps
-      })
+      mediaPlayer.pause();
+    }
+  }, [playing, logLevel, mediaPlayerReady]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady)
+      return;
+    mediaPlayer.seekTo(currentTime);
+    Internals12.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;
+    let currentBlock = null;
+    const unsubscribe = mediaPlayer.onBufferingChange((newBufferingState) => {
+      if (newBufferingState && !currentBlock) {
+        currentBlock = buffer.delayPlayback();
+        Internals12.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer buffering - blocking Remotion playback");
+      } else if (!newBufferingState && currentBlock) {
+        currentBlock.unblock();
+        currentBlock = null;
+        Internals12.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer unbuffering - unblocking Remotion playback");
+      }
     });
-  }
-  validateMediaProps(props, "Video");
-  if (environment.isRendering) {
-    return /* @__PURE__ */ jsx2(AudioForRendering, {
-      ...otherProps
+    return () => {
+      unsubscribe();
+      if (currentBlock) {
+        currentBlock.unblock();
+        currentBlock = null;
+      }
+    };
+  }, [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);
+  }, [effectivePlaybackRate, mediaPlayerReady, logLevel]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setLoop(loop);
+  }, [loop, mediaPlayerReady]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady || !onVideoFrame) {
+      return;
+    }
+    const unsubscribe = mediaPlayer.onVideoFrame(onVideoFrame);
+    return () => {
+      unsubscribe();
+    };
+  }, [onVideoFrame, mediaPlayerReady]);
+  if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
+    return /* @__PURE__ */ jsx4(Video, {
+      src,
+      style,
+      className,
+      muted,
+      volume,
+      trimAfter,
+      trimBefore,
+      playbackRate,
+      loopVolumeCurveBehavior,
+      name,
+      loop,
+      showInTimeline,
+      stack: stack ?? undefined,
+      ...fallbackOffthreadVideoProps
     });
   }
-  const {
-    delayRenderRetries,
-    delayRenderTimeoutInMilliseconds,
-    ...propsForPreview
-  } = otherProps;
-  return /* @__PURE__ */ jsx2(AudioForPreview, {
-    _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
-    _remotionInternalStack: stack ?? null,
-    shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0,
-    ...propsForPreview,
-    onNativeError: onError,
-    onDuration,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
-    _remotionInternalNeedsDurationCalculation: Boolean(loop),
-    showInTimeline: showInTimeline ?? true
+  return /* @__PURE__ */ jsx4("canvas", {
+    ref: canvasRef,
+    width: videoConfig.width,
+    height: videoConfig.height,
+    style,
+    className: classNameValue
+  });
+};
+var VideoForPreview = ({
+  className,
+  loop,
+  src,
+  logLevel,
+  muted,
+  name,
+  volume,
+  loopVolumeCurveBehavior,
+  onVideoFrame,
+  playbackRate,
+  style,
+  showInTimeline,
+  trimAfter,
+  trimBefore,
+  stack,
+  disallowFallbackToOffthreadVideo,
+  fallbackOffthreadVideoProps,
+  audioStreamIndex
+}) => {
+  const preloadedSrc = usePreload2(src);
+  return /* @__PURE__ */ jsx4(NewVideoForPreview, {
+    className,
+    logLevel,
+    muted,
+    onVideoFrame,
+    playbackRate,
+    src: preloadedSrc,
+    style,
+    volume,
+    name,
+    trimAfter,
+    trimBefore,
+    loop,
+    loopVolumeCurveBehavior,
+    showInTimeline,
+    stack,
+    disallowFallbackToOffthreadVideo,
+    fallbackOffthreadVideoProps,
+    audioStreamIndex
   });
 };
-// src/video/video.tsx
-import { useCallback as useCallback3 } from "react";
-import { Internals as Internals9, Sequence as Sequence2, useRemotionEnvironment as useRemotionEnvironment5 } from "remotion";
 
 // src/video/video-for-rendering.tsx
 import {
-  useContext as useContext6,
+  useContext as useContext4,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo3,
-  useRef as useRef2,
+  useMemo as useMemo4,
+  useRef as useRef3,
   useState as useState4
 } from "react";
 import {
-  cancelRender as cancelRender4,
-  Internals as Internals8,
-  useCurrentFrame as useCurrentFrame2,
+  cancelRender as cancelRender3,
+  Internals as Internals13,
+  Loop,
+  random as random2,
+  useCurrentFrame as useCurrentFrame4,
   useDelayRender as useDelayRender2,
-  useRemotionEnvironment as useRemotionEnvironment4,
+  useRemotionEnvironment as useRemotionEnvironment3,
   useVideoConfig
 } from "remotion";
-import { jsx as jsx3 } from "react/jsx-runtime";
+
+// ../core/src/calculate-loop.ts
+var calculateLoopDuration = ({
+  trimAfter,
+  mediaDurationInFrames,
+  playbackRate,
+  trimBefore
+}) => {
+  let duration = mediaDurationInFrames;
+  if (typeof trimAfter !== "undefined") {
+    duration = trimAfter;
+  }
+  if (typeof trimBefore !== "undefined") {
+    duration -= trimBefore;
+  }
+  const actualDuration = duration / playbackRate;
+  return Math.floor(actualDuration);
+};
+
+// src/video/video-for-rendering.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
 var VideoForRendering = ({
   volume: volumeProp,
   playbackRate,
@@ -1480,31 +2973,48 @@ var VideoForRendering = ({
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
   onVideoFrame,
-  logLevel = window.remotion_logLevel,
+  logLevel,
   loop,
   style,
-  className
+  className,
+  fallbackOffthreadVideoProps,
+  audioStreamIndex,
+  name,
+  disallowFallbackToOffthreadVideo,
+  stack,
+  toneFrequency,
+  trimAfterValue,
+  trimBeforeValue
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
   }
-  const frame = useCurrentFrame2();
-  const absoluteFrame = Internals8.useTimelinePosition();
+  const frame = useCurrentFrame4();
+  const absoluteFrame = Internals13.useTimelinePosition();
   const { fps } = useVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext6(Internals8.RenderAssetManager);
-  const startsAt = Internals8.useMediaStartsAt();
-  const [id] = useState4(() => `${Math.random()}`.replace("0.", ""));
-  const environment = useRemotionEnvironment4();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext4(Internals13.RenderAssetManager);
+  const startsAt = Internals13.useMediaStartsAt();
+  const sequenceContext = useContext4(Internals13.SequenceContext);
+  const id = useMemo4(() => `media-video-${random2(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+    src,
+    sequenceContext?.cumulatedFrom,
+    sequenceContext?.relativeFrom,
+    sequenceContext?.durationInFrames
+  ]);
+  const environment = useRemotionEnvironment3();
   const { delayRender, continueRender } = useDelayRender2();
-  const canvasRef = useRef2(null);
+  const canvasRef = useRef3(null);
+  const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState4(false);
   useLayoutEffect2(() => {
     if (!canvasRef.current) {
       return;
     }
-    const actualFps = playbackRate ? fps / playbackRate : fps;
-    const timestamp = frame / actualFps;
-    const durationInSeconds = 1 / actualFps;
-    const newHandle = delayRender(`Extracting frame number ${frame}`, {
+    if (replaceWithOffthreadVideo) {
+      return;
+    }
+    const timestamp = frame / fps;
+    const durationInSeconds = 1 / fps;
+    const newHandle = delayRender(`Extracting frame at time ${timestamp}`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -1521,17 +3031,54 @@ var VideoForRendering = ({
       src,
       timeInSeconds: timestamp,
       durationInSeconds,
-      playbackRate: playbackRate ?? 1,
-      logLevel: logLevel ?? "info",
+      playbackRate,
+      logLevel,
       includeAudio: shouldRenderAudio,
       includeVideo: window.remotion_videoEnabled,
       isClientSideRendering: environment.isClientSideRendering,
-      loop: loop ?? false
-    }).then(({
-      frame: imageBitmap,
-      audio,
-      durationInSeconds: assetDurationInSeconds
-    }) => {
+      loop,
+      audioStreamIndex,
+      trimAfter: trimAfterValue,
+      trimBefore: trimBeforeValue,
+      fps
+    }).then((result) => {
+      if (result.type === "unknown-container-format") {
+        if (disallowFallbackToOffthreadVideo) {
+          cancelRender3(new Error(`Unknown container format ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+        }
+        if (window.remotion_isMainTab) {
+          Internals13.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 (disallowFallbackToOffthreadVideo) {
+          cancelRender3(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+        }
+        if (window.remotion_isMainTab) {
+          Internals13.Log.info({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
+        }
+        setReplaceWithOffthreadVideo({
+          durationInSeconds: result.durationInSeconds
+        });
+        return;
+      }
+      if (result.type === "network-error") {
+        if (disallowFallbackToOffthreadVideo) {
+          cancelRender3(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+        }
+        if (window.remotion_isMainTab) {
+          Internals13.Log.info({ logLevel, tag: "@remotion/media" }, `Network error fetching ${src}, falling back to <OffthreadVideo>`);
+        }
+        setReplaceWithOffthreadVideo({ durationInSeconds: null });
+        return;
+      }
+      const {
+        frame: imageBitmap,
+        audio,
+        durationInSeconds: assetDurationInSeconds
+      } = result;
       if (imageBitmap) {
         onVideoFrame?.(imageBitmap);
         const context = canvasRef.current?.getContext("2d");
@@ -1544,38 +3091,40 @@ var VideoForRendering = ({
         context.drawImage(imageBitmap, 0, 0);
         imageBitmap.close();
       } else if (window.remotion_videoEnabled) {
-        cancelRender4(new Error("No video frame found"));
+        const context = canvasRef.current?.getContext("2d");
+        if (context) {
+          context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+        }
       }
       const volumePropsFrame = frameForVolumeProp({
-        behavior: loopVolumeCurveBehavior ?? "repeat",
-        loop: loop ?? false,
+        behavior: loopVolumeCurveBehavior,
+        loop,
         assetDurationInSeconds: assetDurationInSeconds ?? 0,
         fps,
         frame,
         startsAt
       });
-      const volume = Internals8.evaluateVolume({
+      const volume = Internals13.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals8.warnAboutTooHighVolume(volume);
+      Internals13.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
           type: "inline-audio",
           id,
           audio: Array.from(audio.data),
-          sampleRate: audio.sampleRate,
-          numberOfChannels: audio.numberOfChannels,
           frame: absoluteFrame,
           timestamp: audio.timestamp,
-          duration: audio.numberOfFrames / audio.sampleRate * 1e6
+          duration: audio.numberOfFrames / TARGET_SAMPLE_RATE * 1e6,
+          toneFrequency
         });
       }
       continueRender(newHandle);
     }).catch((error) => {
-      cancelRender4(error);
+      cancelRender3(error);
     });
     return () => {
       continueRender(newHandle);
@@ -1601,12 +3150,70 @@ var VideoForRendering = ({
     src,
     startsAt,
     unregisterRenderAsset,
-    volumeProp
+    volumeProp,
+    replaceWithOffthreadVideo,
+    audioStreamIndex,
+    disallowFallbackToOffthreadVideo,
+    toneFrequency,
+    trimAfterValue,
+    trimBeforeValue
   ]);
-  const classNameValue = useMemo3(() => {
-    return [Internals8.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals8.truthy).join(" ");
+  const classNameValue = useMemo4(() => {
+    return [Internals13.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals13.truthy).join(" ");
   }, [className]);
-  return /* @__PURE__ */ jsx3("canvas", {
+  if (replaceWithOffthreadVideo) {
+    const fallback = /* @__PURE__ */ jsx5(Internals13.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
+    });
+    if (loop) {
+      if (!replaceWithOffthreadVideo.durationInSeconds) {
+        cancelRender3(new Error(`Cannot render video ${src}: @remotion/media was unable to render, and fell back to <OffthreadVideo>. Also, "loop" was set, but <OffthreadVideo> does not support looping and @remotion/media could also not determine the duration of the video.`));
+      }
+      return /* @__PURE__ */ jsx5(Loop, {
+        layout: "none",
+        durationInFrames: calculateLoopDuration({
+          trimAfter: trimAfterValue,
+          mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
+          playbackRate,
+          trimBefore: trimBeforeValue
+        }),
+        children: fallback
+      });
+    }
+    return fallback;
+  }
+  return /* @__PURE__ */ jsx5("canvas", {
     ref: canvasRef,
     style,
     className: classNameValue
@@ -1614,79 +3221,148 @@ 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;
-  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.`);
+import { jsx as jsx6 } from "react/jsx-runtime";
+var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals14;
+var InnerVideo = ({
+  src,
+  audioStreamIndex,
+  className,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  disallowFallbackToOffthreadVideo,
+  fallbackOffthreadVideoProps,
+  logLevel,
+  loop,
+  loopVolumeCurveBehavior,
+  muted,
+  name,
+  onVideoFrame,
+  playbackRate,
+  style,
+  trimAfter,
+  trimBefore,
+  volume,
+  stack,
+  toneFrequency,
+  showInTimeline
+}) => {
+  const environment = useRemotionEnvironment4();
+  if (typeof src !== "string") {
+    throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(src)} instead.`);
   }
-  validateMediaTrimProps2({
+  validateMediaTrimProps({
     startFrom: undefined,
     endAt: undefined,
     trimBefore,
     trimAfter
   });
-  const { trimBeforeValue, trimAfterValue } = resolveTrimProps2({
+  const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
     startFrom: undefined,
     endAt: undefined,
     trimBefore,
     trimAfter
   });
-  if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx4(Sequence2, {
-      layout: "none",
-      from: 0 - (trimBeforeValue ?? 0),
-      showInTimeline: false,
-      durationInFrames: trimAfterValue,
-      name,
-      children: /* @__PURE__ */ jsx4(Video, {
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
-        ...otherProps
-      })
-    });
-  }
-  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,
+      toneFrequency,
+      trimAfterValue,
+      trimBeforeValue
     });
   }
-  const {
+  return /* @__PURE__ */ jsx6(VideoForPreview, {
+    audioStreamIndex: audioStreamIndex ?? 0,
+    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,
+    showInTimeline,
+    trimAfter: trimAfterValue,
+    trimBefore: trimBeforeValue,
+    stack: stack ?? null,
+    disallowFallbackToOffthreadVideo,
+    fallbackOffthreadVideoProps
+  });
+};
+var Video2 = ({
+  src,
+  audioStreamIndex,
+  className,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  disallowFallbackToOffthreadVideo,
+  fallbackOffthreadVideoProps,
+  logLevel,
+  loop,
+  loopVolumeCurveBehavior,
+  muted,
+  name,
+  onVideoFrame,
+  playbackRate,
+  showInTimeline,
+  style,
+  trimAfter,
+  trimBefore,
+  volume,
+  stack,
+  toneFrequency
+}) => {
+  return /* @__PURE__ */ jsx6(InnerVideo, {
+    audioStreamIndex: audioStreamIndex ?? 0,
+    className,
+    delayRenderRetries: delayRenderRetries ?? null,
+    delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
+    disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
+    fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
+    logLevel: logLevel ?? window.remotion_logLevel,
+    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,
+    toneFrequency: toneFrequency ?? 1,
+    stack
   });
 };
+Internals14.addSequenceStackTraces(Video2);
+// src/index.ts
+var experimental_Audio = Audio2;
+var experimental_Video = Video2;
 export {
-  Video as experimental_Video,
-  Audio as experimental_Audio
+  experimental_Video,
+  experimental_Audio,
+  Video2 as Video,
+  AudioForPreview,
+  Audio2 as Audio
 };