@remotion/media 4.0.365 → 4.0.366

package/dist/esm/index.mjs

@@ -1,24 +1,54 @@
 // src/audio/audio.tsx
-import { Internals as Internals13, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
+import { Internals as Internals14, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
 
 // src/audio/audio-for-preview.tsx
 import { useContext as useContext2, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 import {
-  Internals as Internals5,
+  Internals as Internals6,
   Audio as RemotionAudio,
   useBufferState,
-  useCurrentFrame as useCurrentFrame2
+  useCurrentFrame as useCurrentFrame2,
+  useVideoConfig as useVideoConfig2
 } from "remotion";
 
+// src/get-time-in-seconds.ts
+import { Internals } from "remotion";
+var getTimeInSeconds = ({
+  loop,
+  mediaDurationInSeconds,
+  unloopedTimeInSeconds,
+  src,
+  trimAfter,
+  trimBefore,
+  fps,
+  playbackRate,
+  ifNoMediaDuration
+}) => {
+  if (mediaDurationInSeconds === null && loop && ifNoMediaDuration === "fail") {
+    throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
+  }
+  const loopDuration = loop ? Internals.calculateMediaDuration({
+    trimAfter,
+    mediaDurationInFrames: mediaDurationInSeconds ? mediaDurationInSeconds * fps : Infinity,
+    playbackRate: 1,
+    trimBefore
+  }) / fps : Infinity;
+  const timeInSeconds = unloopedTimeInSeconds * playbackRate % loopDuration;
+  if ((trimAfter ?? null) !== null && !loop) {
+    const time = (trimAfter - (trimBefore ?? 0)) / fps;
+    if (timeInSeconds >= time) {
+      return null;
+    }
+  }
+  return timeInSeconds + (trimBefore ?? 0) / fps;
+};
+
 // src/media-player.ts
-import {
-  ALL_FORMATS,
-  AudioBufferSink,
-  CanvasSink,
-  Input,
-  UrlSource
-} from "mediabunny";
-import { Internals as Internals2 } from "remotion";
+import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
+import { Internals as Internals3 } from "remotion";
+
+// src/audio-iterator-manager.ts
+import { AudioBufferSink } from "mediabunny";
 
 // src/helpers/round-to-4-digits.ts
 var roundTo4Digits = (timestamp) => {
@@ -30,6 +60,7 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
   let destroyed = false;
   const iterator = audioSink.buffers(startFromSecond);
   const queuedAudioNodes = [];
+  const audioChunksForAfterResuming = [];
   const cleanupAudioQueue = () => {
     for (const node of queuedAudioNodes) {
       node.node.stop();
@@ -38,9 +69,9 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
   };
   let lastReturnedBuffer = null;
   let iteratorEnded = false;
-  const getNextOrNullIfNotAvailable = async () => {
+  const getNextOrNullIfNotAvailable = async (allowWait) => {
     const next = iterator.next();
-    const result = await Promise.race([
+    const result = allowWait ? await next : await Promise.race([
       next,
       new Promise((resolve) => {
         Promise.resolve().then(() => resolve());
@@ -70,7 +101,7 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
       buffer: result.value ?? null
     };
   };
-  const tryToSatisfySeek = async (time) => {
+  const tryToSatisfySeek = async (time, allowWait) => {
     if (lastReturnedBuffer) {
       const bufferTimestamp = roundTo4Digits(lastReturnedBuffer.timestamp);
       const bufferEndTimestamp = roundTo4Digits(lastReturnedBuffer.timestamp + lastReturnedBuffer.duration);
@@ -88,20 +119,14 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
       }
     }
     if (iteratorEnded) {
-      if (lastReturnedBuffer) {
-        return {
-          type: "satisfied",
-          buffers: [lastReturnedBuffer]
-        };
-      }
       return {
-        type: "not-satisfied",
-        reason: "iterator ended"
+        type: "satisfied",
+        buffers: lastReturnedBuffer ? [lastReturnedBuffer] : []
       };
     }
     const toBeReturned = [];
     while (true) {
-      const buffer = await getNextOrNullIfNotAvailable();
+      const buffer = await getNextOrNullIfNotAvailable(allowWait);
       if (buffer.type === "need-to-wait-for-it") {
         return {
           type: "not-satisfied",
@@ -111,15 +136,9 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
       if (buffer.type === "got-buffer-or-end") {
         if (buffer.buffer === null) {
           iteratorEnded = true;
-          if (lastReturnedBuffer) {
-            return {
-              type: "satisfied",
-              buffers: [lastReturnedBuffer]
-            };
-          }
           return {
-            type: "not-satisfied",
-            reason: "iterator ended and did not have buffer ready"
+            type: "satisfied",
+            buffers: lastReturnedBuffer ? [lastReturnedBuffer] : []
           };
         }
         const bufferTimestamp = roundTo4Digits(buffer.buffer.timestamp);
@@ -137,6 +156,26 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
       throw new Error("Unreachable");
     }
   };
+  const removeAndReturnAllQueuedAudioNodes = () => {
+    const nodes = queuedAudioNodes.slice();
+    for (const node of nodes) {
+      node.node.stop();
+    }
+    queuedAudioNodes.length = 0;
+    return nodes;
+  };
+  const addChunkForAfterResuming = (buffer, timestamp) => {
+    audioChunksForAfterResuming.push({ buffer, timestamp });
+  };
+  const moveQueuedChunksToPauseQueue = () => {
+    const toQueue = removeAndReturnAllQueuedAudioNodes();
+    for (const chunk of toQueue) {
+      addChunkForAfterResuming(chunk.buffer, chunk.timestamp);
+    }
+  };
+  const getNumberOfChunksAfterResuming = () => {
+    return audioChunksForAfterResuming.length;
+  };
   return {
     destroy: () => {
       cleanupAudioQueue();
@@ -144,9 +183,16 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
       iterator.return().catch(() => {
         return;
       });
+      audioChunksForAfterResuming.length = 0;
     },
-    getNext: () => {
-      return iterator.next();
+    getNext: async () => {
+      const next = await iterator.next();
+      if (next.value) {
+        lastReturnedBuffer = next.value;
+      } else {
+        iteratorEnded = true;
+      }
+      return next;
     },
     isDestroyed: () => {
       return destroyed;
@@ -160,29 +206,38 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
         queuedAudioNodes.splice(index, 1);
       }
     },
-    removeAndReturnAllQueuedAudioNodes: () => {
-      const nodes = queuedAudioNodes.slice();
-      for (const node of nodes) {
-        node.node.stop();
-      }
-      queuedAudioNodes.length = 0;
-      return nodes;
+    getAndClearAudioChunksForAfterResuming: () => {
+      const chunks = audioChunksForAfterResuming.slice();
+      audioChunksForAfterResuming.length = 0;
+      return chunks;
     },
-    getQueuedPeriod: () => {
-      const lastNode = queuedAudioNodes[queuedAudioNodes.length - 1];
-      if (!lastNode) {
-        return null;
+    getQueuedPeriod: (pendingBuffers) => {
+      let until = -Infinity;
+      let from = Infinity;
+      for (const buffer of pendingBuffers) {
+        until = Math.max(until, buffer.timestamp + buffer.duration);
+        from = Math.min(from, buffer.timestamp);
+      }
+      for (const node of queuedAudioNodes) {
+        until = Math.max(until, node.timestamp + node.buffer.duration);
+        from = Math.min(from, node.timestamp);
+      }
+      for (const chunk of audioChunksForAfterResuming) {
+        until = Math.max(until, chunk.timestamp + chunk.buffer.duration);
+        from = Math.min(from, chunk.timestamp);
       }
-      const firstNode = queuedAudioNodes[0];
-      if (!firstNode) {
+      if (!Number.isFinite(from) || !Number.isFinite(until)) {
         return null;
       }
       return {
-        from: firstNode.timestamp,
-        until: lastNode.timestamp + lastNode.buffer.duration
+        from,
+        until
       };
     },
-    tryToSatisfySeek
+    tryToSatisfySeek,
+    addChunkForAfterResuming,
+    moveQueuedChunksToPauseQueue,
+    getNumberOfChunksAfterResuming
   };
 };
 var isAlreadyQueued = (time, queuedPeriod) => {
@@ -192,31 +247,241 @@ var isAlreadyQueued = (time, queuedPeriod) => {
   return time >= queuedPeriod.from && time < queuedPeriod.until;
 };
 
+// src/audio-iterator-manager.ts
+var audioIteratorManager = ({
+  audioTrack,
+  delayPlaybackHandleIfNotPremounting,
+  sharedAudioContext
+}) => {
+  let muted = false;
+  let currentVolume = 1;
+  const gainNode = sharedAudioContext.createGain();
+  gainNode.connect(sharedAudioContext.destination);
+  const audioSink = new AudioBufferSink(audioTrack);
+  let audioBufferIterator = null;
+  let audioIteratorsCreated = 0;
+  const scheduleAudioChunk = ({
+    buffer,
+    mediaTimestamp,
+    playbackRate,
+    scheduleAudioNode
+  }) => {
+    if (!audioBufferIterator) {
+      throw new Error("Audio buffer iterator not found");
+    }
+    const node = sharedAudioContext.createBufferSource();
+    node.buffer = buffer;
+    node.playbackRate.value = playbackRate;
+    node.connect(gainNode);
+    scheduleAudioNode(node, mediaTimestamp);
+    const iterator = audioBufferIterator;
+    iterator.addQueuedAudioNode(node, mediaTimestamp, buffer);
+    node.onended = () => {
+      setTimeout(() => {
+        iterator.removeQueuedAudioNode(node);
+      }, 30);
+    };
+  };
+  const onAudioChunk = ({
+    getIsPlaying,
+    buffer,
+    playbackRate,
+    scheduleAudioNode
+  }) => {
+    if (getIsPlaying()) {
+      scheduleAudioChunk({
+        buffer: buffer.buffer,
+        mediaTimestamp: buffer.timestamp,
+        playbackRate,
+        scheduleAudioNode
+      });
+    } else {
+      if (!audioBufferIterator) {
+        throw new Error("Audio buffer iterator not found");
+      }
+      audioBufferIterator.addChunkForAfterResuming(buffer.buffer, buffer.timestamp);
+    }
+  };
+  const startAudioIterator = async ({
+    nonce,
+    playbackRate,
+    startFromSecond,
+    getIsPlaying,
+    scheduleAudioNode
+  }) => {
+    audioBufferIterator?.destroy();
+    const delayHandle = delayPlaybackHandleIfNotPremounting();
+    const iterator = makeAudioIterator(audioSink, startFromSecond);
+    audioIteratorsCreated++;
+    audioBufferIterator = iterator;
+    for (let i = 0;i < 3; i++) {
+      const result = await iterator.getNext();
+      if (iterator.isDestroyed()) {
+        delayHandle.unblock();
+        return;
+      }
+      if (nonce.isStale()) {
+        delayHandle.unblock();
+        return;
+      }
+      if (!result.value) {
+        delayHandle.unblock();
+        return;
+      }
+      onAudioChunk({
+        getIsPlaying,
+        buffer: result.value,
+        playbackRate,
+        scheduleAudioNode
+      });
+    }
+    delayHandle.unblock();
+  };
+  const pausePlayback = () => {
+    if (!audioBufferIterator) {
+      return;
+    }
+    audioBufferIterator.moveQueuedChunksToPauseQueue();
+  };
+  const seek = async ({
+    newTime,
+    nonce,
+    fps,
+    playbackRate,
+    getIsPlaying,
+    scheduleAudioNode
+  }) => {
+    if (!audioBufferIterator) {
+      await startAudioIterator({
+        nonce,
+        playbackRate,
+        startFromSecond: newTime,
+        getIsPlaying,
+        scheduleAudioNode
+      });
+      return;
+    }
+    const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, audioBufferIterator.getQueuedPeriod([]));
+    const toBeScheduled = [];
+    if (!currentTimeIsAlreadyQueued) {
+      const audioSatisfyResult = await audioBufferIterator.tryToSatisfySeek(newTime, false);
+      if (nonce.isStale()) {
+        return;
+      }
+      if (audioSatisfyResult.type === "not-satisfied") {
+        await startAudioIterator({
+          nonce,
+          playbackRate,
+          startFromSecond: newTime,
+          getIsPlaying,
+          scheduleAudioNode
+        });
+        return;
+      }
+      toBeScheduled.push(...audioSatisfyResult.buffers);
+    }
+    const nextTime = newTime + 1 / fps * playbackRate + 1 / fps * playbackRate;
+    const nextIsAlreadyQueued = isAlreadyQueued(nextTime, audioBufferIterator.getQueuedPeriod(toBeScheduled));
+    if (!nextIsAlreadyQueued) {
+      const audioSatisfyResult = await audioBufferIterator.tryToSatisfySeek(nextTime, true);
+      if (nonce.isStale()) {
+        return;
+      }
+      if (audioSatisfyResult.type === "not-satisfied") {
+        await startAudioIterator({
+          nonce,
+          playbackRate,
+          startFromSecond: newTime,
+          getIsPlaying,
+          scheduleAudioNode
+        });
+        return;
+      }
+      toBeScheduled.push(...audioSatisfyResult.buffers);
+    }
+    for (const buffer of toBeScheduled) {
+      onAudioChunk({
+        getIsPlaying,
+        buffer,
+        playbackRate,
+        scheduleAudioNode
+      });
+    }
+  };
+  const resumeScheduledAudioChunks = ({
+    playbackRate,
+    scheduleAudioNode
+  }) => {
+    if (!audioBufferIterator) {
+      return;
+    }
+    for (const chunk of audioBufferIterator.getAndClearAudioChunksForAfterResuming()) {
+      scheduleAudioChunk({
+        buffer: chunk.buffer,
+        mediaTimestamp: chunk.timestamp,
+        playbackRate,
+        scheduleAudioNode
+      });
+    }
+  };
+  return {
+    startAudioIterator,
+    resumeScheduledAudioChunks,
+    pausePlayback,
+    getAudioBufferIterator: () => audioBufferIterator,
+    destroy: () => {
+      audioBufferIterator?.destroy();
+      audioBufferIterator = null;
+    },
+    seek,
+    getAudioIteratorsCreated: () => audioIteratorsCreated,
+    setMuted: (newMuted) => {
+      muted = newMuted;
+      gainNode.gain.value = muted ? 0 : currentVolume;
+    },
+    setVolume: (volume) => {
+      currentVolume = Math.max(0, volume);
+      gainNode.gain.value = muted ? 0 : currentVolume;
+    },
+    scheduleAudioChunk
+  };
+};
+
+// src/calculate-playbacktime.ts
+var calculatePlaybackTime = ({
+  audioSyncAnchor,
+  currentTime,
+  playbackRate
+}) => {
+  const timeSinceAnchor = currentTime - audioSyncAnchor;
+  return timeSinceAnchor * playbackRate;
+};
+
 // src/debug-overlay/preview-overlay.ts
 var drawPreviewOverlay = ({
   context,
-  stats,
   audioTime,
   audioContextState,
-  audioIterator,
   audioSyncAnchor,
-  audioChunksForAfterResuming,
-  playing
+  playing,
+  audioIteratorManager: audioIteratorManager2,
+  videoIteratorManager
 }) => {
   const lines = [
     "Debug overlay",
-    `Video iterators created: ${stats.videoIteratorsCreated}`,
-    `Audio iterators created: ${stats.audioIteratorsCreated}`,
-    `Frames rendered: ${stats.framesRendered}`,
+    `Video iterators created: ${videoIteratorManager?.getVideoIteratorsCreated()}`,
+    `Audio iterators created: ${audioIteratorManager2?.getAudioIteratorsCreated()}`,
+    `Frames rendered: ${videoIteratorManager?.getFramesRendered()}`,
     `Audio context state: ${audioContextState}`,
     `Audio time: ${(audioTime - audioSyncAnchor).toFixed(3)}s`
   ];
-  if (audioIterator) {
-    const queuedPeriod = audioIterator.getQueuedPeriod();
+  if (audioIteratorManager2) {
+    const queuedPeriod = audioIteratorManager2.getAudioBufferIterator()?.getQueuedPeriod([]);
+    const numberOfChunksAfterResuming = audioIteratorManager2?.getAudioBufferIterator()?.getNumberOfChunksAfterResuming();
     if (queuedPeriod) {
       lines.push(`Audio queued until: ${(queuedPeriod.until - (audioTime - audioSyncAnchor)).toFixed(3)}s`);
-    } else if (audioChunksForAfterResuming.length > 0) {
-      lines.push(`Audio chunks for after resuming: ${audioChunksForAfterResuming.length}`);
+    } else if (numberOfChunksAfterResuming) {
+      lines.push(`Audio chunks for after resuming: ${numberOfChunksAfterResuming}`);
     }
     lines.push(`Playing: ${playing}`);
   }
@@ -237,38 +502,6 @@ var drawPreviewOverlay = ({
   }
 };
 
-// src/get-time-in-seconds.ts
-import { Internals } from "remotion";
-var getTimeInSeconds = ({
-  loop,
-  mediaDurationInSeconds,
-  unloopedTimeInSeconds,
-  src,
-  trimAfter,
-  trimBefore,
-  fps,
-  playbackRate,
-  ifNoMediaDuration
-}) => {
-  if (mediaDurationInSeconds === null && loop && ifNoMediaDuration === "fail") {
-    throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
-  }
-  const loopDuration = loop ? Internals.calculateMediaDuration({
-    trimAfter,
-    mediaDurationInFrames: mediaDurationInSeconds ? mediaDurationInSeconds * fps : Infinity,
-    playbackRate: 1,
-    trimBefore
-  }) / fps : Infinity;
-  const timeInSeconds = unloopedTimeInSeconds * playbackRate % loopDuration;
-  if ((trimAfter ?? null) !== null && !loop) {
-    const time = (trimAfter - (trimBefore ?? 0)) / fps;
-    if (timeInSeconds >= time) {
-      return null;
-    }
-  }
-  return timeInSeconds + (trimBefore ?? 0) / fps;
-};
-
 // 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")) {
@@ -277,6 +510,25 @@ function isNetworkError(error) {
   return false;
 }
 
+// src/nonce-manager.ts
+var makeNonceManager = () => {
+  let nonce = 0;
+  const createAsyncOperation = () => {
+    nonce++;
+    const currentNonce = nonce;
+    return {
+      isStale: () => nonce !== currentNonce
+    };
+  };
+  return {
+    createAsyncOperation
+  };
+};
+
+// src/video-iterator-manager.ts
+import { CanvasSink } from "mediabunny";
+import { Internals as Internals2 } from "remotion";
+
 // src/video/video-preview-iterator.ts
 var createVideoIterator = (timeToSeek, videoSink) => {
   let destroyed = false;
@@ -400,6 +652,88 @@ var createVideoIterator = (timeToSeek, videoSink) => {
   };
 };
 
+// src/video-iterator-manager.ts
+var videoIteratorManager = ({
+  delayPlaybackHandleIfNotPremounting,
+  canvas,
+  context,
+  drawDebugOverlay,
+  logLevel,
+  getOnVideoFrameCallback,
+  videoTrack
+}) => {
+  let videoIteratorsCreated = 0;
+  let videoFrameIterator = null;
+  let framesRendered = 0;
+  canvas.width = videoTrack.displayWidth;
+  canvas.height = videoTrack.displayHeight;
+  const canvasSink = new CanvasSink(videoTrack, {
+    poolSize: 2,
+    fit: "contain",
+    alpha: true
+  });
+  const drawFrame = (frame) => {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(frame.canvas, 0, 0);
+    framesRendered++;
+    drawDebugOverlay();
+    const callback = getOnVideoFrameCallback();
+    if (callback) {
+      callback(canvas);
+    }
+    Internals2.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
+  };
+  const startVideoIterator = async (timeToSeek, nonce) => {
+    videoFrameIterator?.destroy();
+    const iterator = createVideoIterator(timeToSeek, canvasSink);
+    videoIteratorsCreated++;
+    videoFrameIterator = iterator;
+    const delayHandle = delayPlaybackHandleIfNotPremounting();
+    const frameResult = await iterator.getNext();
+    delayHandle.unblock();
+    if (iterator.isDestroyed()) {
+      return;
+    }
+    if (nonce.isStale()) {
+      return;
+    }
+    if (videoFrameIterator.isDestroyed()) {
+      return;
+    }
+    if (!frameResult.value) {
+      return;
+    }
+    drawFrame(frameResult.value);
+  };
+  const seek = async ({ newTime, nonce }) => {
+    if (!videoFrameIterator) {
+      return;
+    }
+    const videoSatisfyResult = await videoFrameIterator.tryToSatisfySeek(newTime);
+    if (videoSatisfyResult.type === "satisfied") {
+      drawFrame(videoSatisfyResult.frame);
+      return;
+    }
+    if (nonce.isStale()) {
+      return;
+    }
+    startVideoIterator(newTime, nonce).catch(() => {});
+  };
+  return {
+    startVideoIterator,
+    getVideoIteratorsCreated: () => videoIteratorsCreated,
+    seek,
+    destroy: () => {
+      videoFrameIterator?.destroy();
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      videoFrameIterator = null;
+    },
+    getVideoFrameIterator: () => videoFrameIterator,
+    drawFrame,
+    getFramesRendered: () => framesRendered
+  };
+};
+
 // src/media-player.ts
 class MediaPlayer {
   canvas;
@@ -407,32 +741,26 @@ class MediaPlayer {
   src;
   logLevel;
   playbackRate;
+  globalPlaybackRate;
   audioStreamIndex;
-  canvasSink = null;
-  videoFrameIterator = null;
-  debugStats = {
-    videoIteratorsCreated: 0,
-    audioIteratorsCreated: 0,
-    framesRendered: 0
-  };
-  audioSink = null;
-  audioBufferIterator = null;
-  gainNode = null;
-  currentVolume = 1;
   sharedAudioContext;
+  audioIteratorManager = null;
+  videoIteratorManager = null;
   audioSyncAnchor = 0;
   playing = false;
-  muted = false;
   loop = false;
   fps;
   trimBefore;
   trimAfter;
-  initialized = false;
   totalDuration;
   debugOverlay = false;
-  onVideoFrameCallback;
+  nonceManager;
+  onVideoFrameCallback = null;
   initializationPromise = null;
   bufferState;
+  isPremounting;
+  isPostmounting;
+  seekPromiseChain = Promise.resolve();
   constructor({
     canvas,
     src,
@@ -442,16 +770,20 @@ class MediaPlayer {
     trimBefore,
     trimAfter,
     playbackRate,
+    globalPlaybackRate,
     audioStreamIndex,
     fps,
     debugOverlay,
-    bufferState
+    bufferState,
+    isPremounting,
+    isPostmounting
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
     this.logLevel = logLevel ?? window.remotion_logLevel;
     this.sharedAudioContext = sharedAudioContext;
     this.playbackRate = playbackRate;
+    this.globalPlaybackRate = globalPlaybackRate;
     this.loop = loop;
     this.trimBefore = trimBefore;
     this.trimAfter = trimAfter;
@@ -459,6 +791,13 @@ class MediaPlayer {
     this.fps = fps;
     this.debugOverlay = debugOverlay;
     this.bufferState = bufferState;
+    this.isPremounting = isPremounting;
+    this.isPostmounting = isPostmounting;
+    this.nonceManager = makeNonceManager();
+    this.input = new Input({
+      source: new UrlSource(this.src),
+      formats: ALL_FORMATS
+    });
     if (canvas) {
       const context = canvas.getContext("2d", {
         alpha: true,
@@ -472,15 +811,9 @@ class MediaPlayer {
       this.context = null;
     }
   }
-  input = null;
-  isReady() {
-    return this.initialized && Boolean(this.sharedAudioContext) && !this.input?.disposed;
-  }
-  hasAudio() {
-    return Boolean(this.audioSink && this.sharedAudioContext && this.gainNode);
-  }
+  input;
   isDisposalError() {
-    return this.input?.disposed === true;
+    return this.input.disposed === true;
   }
   initialize(startTimeUnresolved) {
     const promise = this._initialize(startTimeUnresolved);
@@ -489,17 +822,11 @@ class MediaPlayer {
   }
   async _initialize(startTimeUnresolved) {
     try {
-      const urlSource = new UrlSource(this.src);
-      const input = new Input({
-        source: urlSource,
-        formats: ALL_FORMATS
-      });
-      this.input = input;
-      if (input.disposed) {
+      if (this.input.disposed) {
         return { type: "disposed" };
       }
       try {
-        await input.getFormat();
+        await this.input.getFormat();
       } catch (error) {
         if (this.isDisposalError()) {
           return { type: "disposed" };
@@ -508,14 +835,17 @@ class MediaPlayer {
         if (isNetworkError(err)) {
           throw error;
         }
-        Internals2.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
+        Internals3.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
         return { type: "unknown-container-format" };
       }
       const [durationInSeconds, videoTrack, audioTracks] = await Promise.all([
-        input.computeDuration(),
-        input.getPrimaryVideoTrack(),
-        input.getAudioTracks()
+        this.input.computeDuration(),
+        this.input.getPrimaryVideoTrack(),
+        this.input.getAudioTracks()
       ]);
+      if (this.input.disposed) {
+        return { type: "disposed" };
+      }
       this.totalDuration = durationInSeconds;
       const audioTrack = audioTracks[this.audioStreamIndex] ?? null;
       if (!videoTrack && !audioTrack) {
@@ -526,18 +856,18 @@ class MediaPlayer {
         if (!canDecode) {
           return { type: "cannot-decode" };
         }
-        this.canvasSink = new CanvasSink(videoTrack, {
-          poolSize: 2,
-          fit: "contain",
-          alpha: true
+        if (this.input.disposed) {
+          return { type: "disposed" };
+        }
+        this.videoIteratorManager = videoIteratorManager({
+          videoTrack,
+          delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
+          context: this.context,
+          canvas: this.canvas,
+          getOnVideoFrameCallback: () => this.onVideoFrameCallback,
+          logLevel: this.logLevel,
+          drawDebugOverlay: this.drawDebugOverlay
         });
-        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 = getTimeInSeconds({
         unloopedTimeInSeconds: startTimeUnresolved,
@@ -551,53 +881,46 @@ class MediaPlayer {
         src: this.src
       });
       if (startTime === null) {
-        this.clearCanvas();
-        return { type: "success", durationInSeconds: this.totalDuration };
+        throw new Error(`should have asserted that the time is not null`);
       }
-      if (this.sharedAudioContext) {
-        this.setPlaybackTime(startTime);
+      this.setPlaybackTime(startTime, this.playbackRate * this.globalPlaybackRate);
+      if (audioTrack) {
+        this.audioIteratorManager = audioIteratorManager({
+          audioTrack,
+          delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
+          sharedAudioContext: this.sharedAudioContext
+        });
       }
-      this.initialized = true;
+      const nonce = this.nonceManager.createAsyncOperation();
       try {
-        this.startAudioIterator(startTime, this.currentSeekNonce);
-        await this.startVideoIterator(startTime, this.currentSeekNonce);
+        if (this.audioIteratorManager) {
+          this.audioIteratorManager.startAudioIterator({
+            nonce,
+            playbackRate: this.playbackRate * this.globalPlaybackRate,
+            startFromSecond: startTime,
+            getIsPlaying: () => this.playing,
+            scheduleAudioNode: this.scheduleAudioNode
+          });
+        }
+        await this.videoIteratorManager?.startVideoIterator(startTime, nonce);
       } catch (error) {
         if (this.isDisposalError()) {
           return { type: "disposed" };
         }
-        Internals2.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio and video iterators", error);
+        Internals3.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio and video iterators", error);
       }
       return { type: "success", durationInSeconds };
     } catch (error) {
       const err = error;
       if (isNetworkError(err)) {
-        Internals2.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
+        Internals3.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
         return { type: "network-error" };
       }
-      Internals2.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
+      Internals3.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
       throw error;
     }
   }
-  clearCanvas() {
-    if (this.context && this.canvas) {
-      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    }
-  }
-  currentSeekNonce = 0;
-  seekPromiseChain = Promise.resolve();
   async seekTo(time) {
-    this.currentSeekNonce++;
-    const nonce = this.currentSeekNonce;
-    await this.seekPromiseChain;
-    this.seekPromiseChain = this.seekToDoNotCallDirectly(time, nonce);
-    await this.seekPromiseChain;
-  }
-  async seekToDoNotCallDirectly(time, nonce) {
-    if (nonce !== this.currentSeekNonce) {
-      return;
-    }
-    if (!this.isReady())
-      return;
     const newTime = getTimeInSeconds({
       unloopedTimeInSeconds: time,
       playbackRate: this.playbackRate,
@@ -610,265 +933,189 @@ class MediaPlayer {
       src: this.src
     });
     if (newTime === null) {
-      this.videoFrameIterator?.destroy();
-      this.videoFrameIterator = null;
-      this.clearCanvas();
-      this.audioBufferIterator?.destroy();
-      this.audioBufferIterator = null;
+      throw new Error(`should have asserted that the time is not null`);
+    }
+    const nonce = this.nonceManager.createAsyncOperation();
+    await this.seekPromiseChain;
+    this.seekPromiseChain = this.seekToDoNotCallDirectly(newTime, nonce);
+    await this.seekPromiseChain;
+  }
+  async seekToDoNotCallDirectly(newTime, nonce) {
+    if (nonce.isStale()) {
       return;
     }
     const currentPlaybackTime = this.getPlaybackTime();
     if (currentPlaybackTime === newTime) {
       return;
     }
-    const newAudioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
+    const newAudioSyncAnchor = this.sharedAudioContext.currentTime - newTime / (this.playbackRate * this.globalPlaybackRate);
     const diff = Math.abs(newAudioSyncAnchor - this.audioSyncAnchor);
-    if (diff > 0.1) {
-      this.setPlaybackTime(newTime);
-    }
-    const videoSatisfyResult = await this.videoFrameIterator?.tryToSatisfySeek(newTime);
-    if (videoSatisfyResult?.type === "satisfied") {
-      this.drawFrame(videoSatisfyResult.frame);
-    } else if (videoSatisfyResult && this.currentSeekNonce === nonce) {
-      this.startVideoIterator(newTime, nonce);
-    }
-    const queuedPeriod = this.audioBufferIterator?.getQueuedPeriod();
-    const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, queuedPeriod);
-    const toBeScheduled = [];
-    if (!currentTimeIsAlreadyQueued) {
-      const audioSatisfyResult = await this.audioBufferIterator?.tryToSatisfySeek(newTime);
-      if (this.currentSeekNonce !== nonce) {
-        return;
-      }
-      if (!audioSatisfyResult) {
-        return;
-      }
-      if (audioSatisfyResult.type === "not-satisfied") {
-        await this.startAudioIterator(newTime, nonce);
-        return;
-      }
-      toBeScheduled.push(...audioSatisfyResult.buffers);
-    }
-    const nextTime = newTime + 1 / this.fps * this.playbackRate + 1 / this.fps * this.playbackRate;
-    const nextIsAlreadyQueued = isAlreadyQueued(nextTime, queuedPeriod);
-    if (!nextIsAlreadyQueued) {
-      const audioSatisfyResult = await this.audioBufferIterator?.tryToSatisfySeek(nextTime);
-      if (this.currentSeekNonce !== nonce) {
-        return;
-      }
-      if (!audioSatisfyResult) {
-        return;
-      }
-      if (audioSatisfyResult.type === "not-satisfied") {
-        await this.startAudioIterator(nextTime, nonce);
-        return;
-      }
-      toBeScheduled.push(...audioSatisfyResult.buffers);
-    }
-    for (const buffer of toBeScheduled) {
-      if (this.playing) {
-        this.scheduleAudioChunk(buffer.buffer, buffer.timestamp);
-      } else {
-        this.audioChunksForAfterResuming.push({
-          buffer: buffer.buffer,
-          timestamp: buffer.timestamp
-        });
-      }
+    if (diff > 0.04) {
+      this.setPlaybackTime(newTime, this.playbackRate * this.globalPlaybackRate);
     }
+    await this.videoIteratorManager?.seek({
+      newTime,
+      nonce
+    });
+    await this.audioIteratorManager?.seek({
+      newTime,
+      nonce,
+      fps: this.fps,
+      playbackRate: this.playbackRate * this.globalPlaybackRate,
+      getIsPlaying: () => this.playing,
+      scheduleAudioNode: this.scheduleAudioNode
+    });
   }
   async play(time) {
-    if (!this.isReady())
-      return;
-    this.setPlaybackTime(time);
+    const newTime = getTimeInSeconds({
+      unloopedTimeInSeconds: time,
+      playbackRate: this.playbackRate,
+      loop: this.loop,
+      trimBefore: this.trimBefore,
+      trimAfter: this.trimAfter,
+      mediaDurationInSeconds: this.totalDuration ?? null,
+      fps: this.fps,
+      ifNoMediaDuration: "infinity",
+      src: this.src
+    });
+    if (newTime === null) {
+      throw new Error(`should have asserted that the time is not null`);
+    }
+    this.setPlaybackTime(newTime, this.playbackRate * this.globalPlaybackRate);
     this.playing = true;
-    for (const chunk of this.audioChunksForAfterResuming) {
-      this.scheduleAudioChunk(chunk.buffer, chunk.timestamp);
+    if (this.audioIteratorManager) {
+      this.audioIteratorManager.resumeScheduledAudioChunks({
+        playbackRate: this.playbackRate * this.globalPlaybackRate,
+        scheduleAudioNode: this.scheduleAudioNode
+      });
     }
     if (this.sharedAudioContext.state === "suspended") {
       await this.sharedAudioContext.resume();
     }
-    this.audioChunksForAfterResuming.length = 0;
     this.drawDebugOverlay();
   }
+  delayPlaybackHandleIfNotPremounting = () => {
+    if (this.isPremounting || this.isPostmounting) {
+      return {
+        unblock: () => {}
+      };
+    }
+    return this.bufferState.delayPlayback();
+  };
   pause() {
     this.playing = false;
-    const toQueue = this.audioBufferIterator?.removeAndReturnAllQueuedAudioNodes();
-    if (toQueue) {
-      for (const chunk of toQueue) {
-        this.audioChunksForAfterResuming.push({
-          buffer: chunk.buffer,
-          timestamp: chunk.timestamp
-        });
-      }
-    }
+    this.audioIteratorManager?.pausePlayback();
     this.drawDebugOverlay();
   }
   setMuted(muted) {
-    this.muted = muted;
-    if (this.gainNode) {
-      this.gainNode.gain.value = muted ? 0 : this.currentVolume;
-    }
+    this.audioIteratorManager?.setMuted(muted);
   }
   setVolume(volume) {
-    if (!this.gainNode) {
+    if (!this.audioIteratorManager) {
       return;
     }
-    const appliedVolume = Math.max(0, volume);
-    this.currentVolume = appliedVolume;
-    if (!this.muted) {
-      this.gainNode.gain.value = appliedVolume;
-    }
+    this.audioIteratorManager.setVolume(volume);
+  }
+  setTrimBefore(trimBefore) {
+    this.trimBefore = trimBefore;
+  }
+  setTrimAfter(trimAfter) {
+    this.trimAfter = trimAfter;
   }
   setDebugOverlay(debugOverlay) {
     this.debugOverlay = debugOverlay;
   }
+  updateAfterPlaybackRateChange() {
+    if (!this.audioIteratorManager) {
+      return;
+    }
+    this.setPlaybackTime(this.getPlaybackTime(), this.playbackRate * this.globalPlaybackRate);
+    const iterator = this.audioIteratorManager.getAudioBufferIterator();
+    if (!iterator) {
+      return;
+    }
+    iterator.moveQueuedChunksToPauseQueue();
+    if (this.playing) {
+      this.audioIteratorManager.resumeScheduledAudioChunks({
+        playbackRate: this.playbackRate * this.globalPlaybackRate,
+        scheduleAudioNode: this.scheduleAudioNode
+      });
+    }
+  }
   setPlaybackRate(rate) {
     this.playbackRate = rate;
+    this.updateAfterPlaybackRateChange();
+  }
+  setGlobalPlaybackRate(rate) {
+    this.globalPlaybackRate = rate;
+    this.updateAfterPlaybackRateChange();
   }
   setFps(fps) {
     this.fps = fps;
   }
+  setIsPremounting(isPremounting) {
+    this.isPremounting = isPremounting;
+  }
+  setIsPostmounting(isPostmounting) {
+    this.isPostmounting = isPostmounting;
+  }
   setLoop(loop) {
     this.loop = loop;
   }
   async dispose() {
-    this.initialized = false;
     if (this.initializationPromise) {
       try {
         await this.initializationPromise;
       } catch {}
     }
-    this.input?.dispose();
-    this.videoFrameIterator?.destroy();
-    this.videoFrameIterator = null;
-    this.audioBufferIterator?.destroy();
-    this.audioBufferIterator = null;
+    this.nonceManager.createAsyncOperation();
+    this.videoIteratorManager?.destroy();
+    this.audioIteratorManager?.destroy();
+    this.input.dispose();
   }
-  getPlaybackTime() {
-    return this.sharedAudioContext.currentTime - this.audioSyncAnchor;
-  }
-  setPlaybackTime(time) {
-    this.audioSyncAnchor = this.sharedAudioContext.currentTime - time;
-  }
-  audioChunksForAfterResuming = [];
-  scheduleAudioChunk(buffer, mediaTimestamp) {
-    const targetTime = (mediaTimestamp - (this.trimBefore ?? 0) / this.fps) / this.playbackRate;
-    const delay = targetTime + this.audioSyncAnchor - this.sharedAudioContext.currentTime;
-    const node = this.sharedAudioContext.createBufferSource();
-    node.buffer = buffer;
-    node.playbackRate.value = this.playbackRate;
-    node.connect(this.gainNode);
+  scheduleAudioNode = (node, mediaTimestamp) => {
+    const currentTime = this.getPlaybackTime();
+    const delayWithoutPlaybackRate = mediaTimestamp - currentTime;
+    const delay = delayWithoutPlaybackRate / (this.playbackRate * this.globalPlaybackRate);
     if (delay >= 0) {
-      node.start(targetTime + this.audioSyncAnchor);
+      node.start(this.sharedAudioContext.currentTime + delay);
     } else {
       node.start(this.sharedAudioContext.currentTime, -delay);
     }
-    this.audioBufferIterator.addQueuedAudioNode(node, mediaTimestamp, buffer);
-    node.onended = () => {
-      return this.audioBufferIterator.removeQueuedAudioNode(node);
-    };
+  };
+  getPlaybackTime() {
+    return calculatePlaybackTime({
+      audioSyncAnchor: this.audioSyncAnchor,
+      currentTime: this.sharedAudioContext.currentTime,
+      playbackRate: this.playbackRate * this.globalPlaybackRate
+    });
+  }
+  setPlaybackTime(time, playbackRate) {
+    this.audioSyncAnchor = this.sharedAudioContext.currentTime - time / playbackRate;
   }
-  onVideoFrame(callback) {
+  setVideoFrameCallback(callback) {
     this.onVideoFrameCallback = callback;
-    if (this.initialized && callback && this.canvas) {
-      callback(this.canvas);
-    }
-    return () => {
-      if (this.onVideoFrameCallback === callback) {
-        this.onVideoFrameCallback = undefined;
-      }
-    };
   }
-  drawFrame = (frame) => {
-    if (!this.context) {
-      throw new Error("Context not initialized");
-    }
-    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    this.context.drawImage(frame.canvas, 0, 0);
-    this.debugStats.framesRendered++;
-    this.drawDebugOverlay();
-    if (this.onVideoFrameCallback && this.canvas) {
-      this.onVideoFrameCallback(this.canvas);
-    }
-    Internals2.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
-  };
-  startAudioIterator = async (startFromSecond, nonce) => {
-    if (!this.hasAudio())
-      return;
-    this.audioBufferIterator?.destroy();
-    this.audioChunksForAfterResuming = [];
-    const delayHandle = this.bufferState.delayPlayback();
-    const iterator = makeAudioIterator(this.audioSink, startFromSecond);
-    this.debugStats.audioIteratorsCreated++;
-    this.audioBufferIterator = iterator;
-    for (let i = 0;i < 3; i++) {
-      const result = await iterator.getNext();
-      if (iterator.isDestroyed()) {
-        delayHandle.unblock();
-        return;
-      }
-      if (nonce !== this.currentSeekNonce) {
-        delayHandle.unblock();
-        return;
-      }
-      if (!result.value) {
-        delayHandle.unblock();
-        return;
-      }
-      const { buffer, timestamp } = result.value;
-      this.audioChunksForAfterResuming.push({
-        buffer,
-        timestamp
-      });
-    }
-    delayHandle.unblock();
-  };
-  drawDebugOverlay() {
+  drawDebugOverlay = () => {
     if (!this.debugOverlay)
       return;
     if (this.context && this.canvas) {
       drawPreviewOverlay({
         context: this.context,
-        stats: this.debugStats,
         audioTime: this.sharedAudioContext.currentTime,
         audioContextState: this.sharedAudioContext.state,
         audioSyncAnchor: this.audioSyncAnchor,
-        audioIterator: this.audioBufferIterator,
-        audioChunksForAfterResuming: this.audioChunksForAfterResuming,
-        playing: this.playing
+        audioIteratorManager: this.audioIteratorManager,
+        playing: this.playing,
+        videoIteratorManager: this.videoIteratorManager
       });
     }
-  }
-  startVideoIterator = async (timeToSeek, nonce) => {
-    if (!this.canvasSink) {
-      return;
-    }
-    this.videoFrameIterator?.destroy();
-    const iterator = createVideoIterator(timeToSeek, this.canvasSink);
-    this.debugStats.videoIteratorsCreated++;
-    this.videoFrameIterator = iterator;
-    const delayHandle = this.bufferState.delayPlayback();
-    const frameResult = await iterator.getNext();
-    delayHandle.unblock();
-    if (iterator.isDestroyed()) {
-      return;
-    }
-    if (nonce !== this.currentSeekNonce) {
-      return;
-    }
-    if (this.videoFrameIterator.isDestroyed()) {
-      return;
-    }
-    if (!frameResult.value) {
-      return;
-    }
-    this.drawFrame(frameResult.value);
   };
 }
 
 // src/show-in-timeline.ts
 import { useMemo } from "react";
-import { Internals as Internals3, useVideoConfig } from "remotion";
+import { Internals as Internals4, useVideoConfig } from "remotion";
 var useLoopDisplay = ({
   loop,
   mediaDurationInSeconds,
@@ -881,7 +1128,7 @@ var useLoopDisplay = ({
     if (!loop || !mediaDurationInSeconds) {
       return;
     }
-    const durationInFrames = Internals3.calculateMediaDuration({
+    const durationInFrames = Internals4.calculateMediaDuration({
       mediaDurationInFrames: mediaDurationInSeconds * fps,
       playbackRate,
       trimAfter,
@@ -907,7 +1154,7 @@ var useLoopDisplay = ({
 
 // src/use-media-in-timeline.ts
 import { useContext, useEffect, useState } from "react";
-import { Internals as Internals4, useCurrentFrame } from "remotion";
+import { Internals as Internals5, useCurrentFrame } from "remotion";
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -923,9 +1170,9 @@ var useMediaInTimeline = ({
   trimBefore,
   trimAfter
 }) => {
-  const parentSequence = useContext(Internals4.SequenceContext);
-  const startsAt = Internals4.useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext(Internals4.SequenceManager);
+  const parentSequence = useContext(Internals5.SequenceContext);
+  const startsAt = Internals5.useMediaStartsAt();
+  const { registerSequence, unregisterSequence } = useContext(Internals5.SequenceManager);
   const [sequenceId] = useState(() => String(Math.random()));
   const [mediaId] = useState(() => String(Math.random()));
   const frame = useCurrentFrame();
@@ -937,7 +1184,7 @@ var useMediaInTimeline = ({
     rootId,
     isStudio,
     finalDisplayName
-  } = Internals4.useBasicMediaInTimeline({
+  } = Internals5.useBasicMediaInTimeline({
     volume,
     mediaVolume,
     mediaType,
@@ -1043,8 +1290,8 @@ var {
   warnAboutTooHighVolume,
   usePreload,
   SequenceContext
-} = Internals5;
-var NewAudioForPreview = ({
+} = Internals6;
+var AudioForPreviewAssertedShowing = ({
   src,
   playbackRate,
   logLevel,
@@ -1093,6 +1340,8 @@ var NewAudioForPreview = ({
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload(src);
   const parentSequence = useContext2(SequenceContext);
+  const isPremounting = Boolean(parentSequence?.premounting);
+  const isPostmounting = Boolean(parentSequence?.postmounting);
   const loopDisplay = useLoopDisplay({
     loop,
     mediaDurationInSeconds: videoConfig.durationInFrames,
@@ -1115,11 +1364,11 @@ var NewAudioForPreview = ({
     trimAfter,
     trimBefore
   });
-  const buffering = useContext2(Internals5.BufferingContextReact);
+  const buffering = useContext2(Internals6.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const isPlayerBuffering = Internals5.useIsPlayerBuffering(buffering);
+  const isPlayerBuffering = Internals6.useIsPlayerBuffering(buffering);
   useEffect2(() => {
     if (!sharedAudioContext)
       return;
@@ -1138,7 +1387,10 @@ var NewAudioForPreview = ({
         playbackRate,
         audioStreamIndex: audioStreamIndex ?? 0,
         debugOverlay: false,
-        bufferState: buffer
+        bufferState: buffer,
+        isPostmounting,
+        isPremounting,
+        globalPlaybackRate
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current).then((result) => {
@@ -1146,7 +1398,7 @@ var NewAudioForPreview = ({
           if (disallowFallbackToHtml5Audio) {
             throw new Error(`Unknown container format ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
           }
-          Internals5.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
+          Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
           setShouldFallbackToNativeAudio(true);
           return;
         }
@@ -1154,7 +1406,7 @@ var NewAudioForPreview = ({
           if (disallowFallbackToHtml5Audio) {
             throw new Error(`Network error fetching ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
           }
-          Internals5.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${preloadedSrc}, falling back to <Html5Audio>`);
+          Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${preloadedSrc}, falling back to <Html5Audio>`);
           setShouldFallbackToNativeAudio(true);
           return;
         }
@@ -1162,7 +1414,7 @@ var NewAudioForPreview = ({
           if (disallowFallbackToHtml5Audio) {
             throw new Error(`Cannot decode ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
           }
-          Internals5.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${preloadedSrc}, falling back to <Html5Audio>`);
+          Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${preloadedSrc}, falling back to <Html5Audio>`);
           setShouldFallbackToNativeAudio(true);
           return;
         }
@@ -1170,20 +1422,20 @@ var NewAudioForPreview = ({
           if (disallowFallbackToHtml5Audio) {
             throw new Error(`No video or audio tracks found for ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
           }
-          Internals5.Log.warn({ logLevel, tag: "@remotion/media" }, `No video or audio tracks found for ${preloadedSrc}, falling back to <Html5Audio>`);
+          Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, `No video or audio tracks found for ${preloadedSrc}, falling back to <Html5Audio>`);
           setShouldFallbackToNativeAudio(true);
           return;
         }
         if (result.type === "success") {
           setMediaPlayerReady(true);
-          Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] MediaPlayer initialized successfully`);
+          Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] MediaPlayer initialized successfully`);
         }
       }).catch((error) => {
-        Internals5.Log.error({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] Failed to initialize MediaPlayer", error);
+        Internals6.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] Failed to initialize MediaPlayer", error);
         setShouldFallbackToNativeAudio(true);
       });
     } catch (error) {
-      Internals5.Log.error({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] MediaPlayer initialization failed", error);
+      Internals6.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] MediaPlayer initialization failed", error);
       setShouldFallbackToNativeAudio(true);
     }
     return () => {
@@ -1192,7 +1444,7 @@ var NewAudioForPreview = ({
         delayHandleRef.current = null;
       }
       if (mediaPlayerRef.current) {
-        Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] Disposing MediaPlayer`);
+        Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -1211,7 +1463,10 @@ var NewAudioForPreview = ({
     videoConfig.fps,
     audioStreamIndex,
     disallowFallbackToHtml5Audio,
-    buffer
+    buffer,
+    isPremounting,
+    isPostmounting,
+    globalPlaybackRate
   ]);
   useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
@@ -1227,8 +1482,8 @@ var NewAudioForPreview = ({
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady)
       return;
-    audioPlayer.seekTo(currentTime);
-    Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+    audioPlayer.seekTo(currentTime).catch(() => {});
+    Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
   }, [currentTime, logLevel, mediaPlayerReady]);
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
   useEffect2(() => {
@@ -1244,14 +1499,20 @@ var NewAudioForPreview = ({
     }
     audioPlayer.setVolume(userPreferredVolume);
   }, [userPreferredVolume, mediaPlayerReady]);
-  const effectivePlaybackRate = useMemo2(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
   useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady) {
       return;
     }
-    audioPlayer.setPlaybackRate(effectivePlaybackRate);
-  }, [effectivePlaybackRate, mediaPlayerReady]);
+    audioPlayer.setPlaybackRate(playbackRate);
+  }, [playbackRate, mediaPlayerReady]);
+  useEffect2(() => {
+    const audioPlayer = mediaPlayerRef.current;
+    if (!audioPlayer || !mediaPlayerReady) {
+      return;
+    }
+    audioPlayer.setGlobalPlaybackRate(globalPlaybackRate);
+  }, [globalPlaybackRate, mediaPlayerReady]);
   useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady) {
@@ -1259,6 +1520,41 @@ var NewAudioForPreview = ({
     }
     audioPlayer.setFps(videoConfig.fps);
   }, [videoConfig.fps, mediaPlayerReady]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setTrimBefore(trimBefore);
+  }, [trimBefore, mediaPlayerReady]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setTrimAfter(trimAfter);
+  }, [trimAfter, mediaPlayerReady]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setLoop(loop);
+  }, [loop, mediaPlayerReady]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setIsPremounting(isPremounting);
+  }, [isPremounting, mediaPlayerReady]);
+  useEffect2(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setIsPostmounting(isPostmounting);
+  }, [isPostmounting, mediaPlayerReady]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
     return /* @__PURE__ */ jsx(RemotionAudio, {
       src,
@@ -1299,7 +1595,34 @@ var AudioForPreview = ({
   fallbackHtml5AudioProps
 }) => {
   const preloadedSrc = usePreload(src);
-  return /* @__PURE__ */ jsx(NewAudioForPreview, {
+  const frame = useCurrentFrame2();
+  const videoConfig = useVideoConfig2();
+  const currentTime = frame / videoConfig.fps;
+  const showShow = useMemo2(() => {
+    return getTimeInSeconds({
+      unloopedTimeInSeconds: currentTime,
+      playbackRate: playbackRate ?? 1,
+      loop: loop ?? false,
+      trimBefore,
+      trimAfter,
+      mediaDurationInSeconds: Infinity,
+      fps: videoConfig.fps,
+      ifNoMediaDuration: "infinity",
+      src
+    }) !== null;
+  }, [
+    currentTime,
+    loop,
+    playbackRate,
+    src,
+    trimAfter,
+    trimBefore,
+    videoConfig.fps
+  ]);
+  if (!showShow) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(AudioForPreviewAssertedShowing, {
     audioStreamIndex: audioStreamIndex ?? 0,
     src: preloadedSrc,
     playbackRate: playbackRate ?? 1,
@@ -1324,7 +1647,7 @@ import { useContext as useContext3, useLayoutEffect, useMemo as useMemo3, useSta
 import {
   cancelRender as cancelRender2,
   Html5Audio,
-  Internals as Internals12,
+  Internals as Internals13,
   random,
   useCurrentFrame as useCurrentFrame3,
   useDelayRender,
@@ -1455,13 +1778,13 @@ var frameForVolumeProp = ({
 };
 
 // src/caches.ts
-import { cancelRender, Internals as Internals10 } from "remotion";
+import { cancelRender, Internals as Internals11 } from "remotion";
 
 // src/audio-extraction/audio-manager.ts
-import { Internals as Internals7 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 
 // src/audio-extraction/audio-iterator.ts
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals7 } from "remotion";
 
 // src/audio-extraction/audio-cache.ts
 var makeAudioCache = () => {
@@ -1539,7 +1862,7 @@ var warnAboutMatroskaOnce = (src, logLevel) => {
     return;
   }
   warned[src] = true;
-  Internals6.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`);
+  Internals7.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 makeAudioIterator2 = ({
   audioSampleSink,
@@ -1607,7 +1930,7 @@ var makeAudioIterator2 = ({
     if (openTimestamps.length > 0) {
       const first = openTimestamps[0];
       const last = openTimestamps[openTimestamps.length - 1];
-      Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
+      Internals7.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
     }
   };
   const getCacheStats = () => {
@@ -1704,7 +2027,7 @@ var makeAudioManager = () => {
       if (seenKeys.has(key)) {
         iterator.prepareForDeletion();
         iterators.splice(iterators.indexOf(iterator), 1);
-        Internals7.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
+        Internals8.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
       }
       seenKeys.add(key);
     }
@@ -1786,7 +2109,7 @@ var makeAudioManager = () => {
 };
 
 // src/video-extraction/keyframe-manager.ts
-import { Internals as Internals9 } from "remotion";
+import { Internals as Internals10 } from "remotion";
 
 // src/browser-can-use-webgl2.ts
 var browserCanUseWebGl2 = null;
@@ -1827,7 +2150,7 @@ import {
 } from "mediabunny";
 
 // src/video-extraction/keyframe-bank.ts
-import { Internals as Internals8 } from "remotion";
+import { Internals as Internals9 } from "remotion";
 var makeKeyframeBank = ({
   startTimestampInSeconds,
   endTimestampInSeconds,
@@ -1835,7 +2158,7 @@ var makeKeyframeBank = ({
   logLevel: parentLogLevel,
   src
 }) => {
-  Internals8.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+  Internals9.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
   const frames = {};
   const frameTimestamps = [];
   let lastUsed = Date.now();
@@ -1862,7 +2185,7 @@ var makeKeyframeBank = ({
       }
     }
     if (deletedTimestamps.length > 0) {
-      Internals8.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)}`);
+      Internals9.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 hasDecodedEnoughForTimestamp = (timestamp) => {
@@ -1922,7 +2245,7 @@ var makeKeyframeBank = ({
     return await getFrameFromTimestamp(timestamp) !== null;
   };
   const prepareForDeletion = (logLevel) => {
-    Internals8.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion of keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+    Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion of keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
     sampleIterator.return().then((result) => {
       if (result.value) {
         result.value.close();
@@ -2115,10 +2438,10 @@ var makeKeyframeManager = () => {
         if (size === 0) {
           continue;
         }
-        Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
+        Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
       }
     }
-    Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
+    Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
   };
   const getCacheStats = async () => {
     let count = 0;
@@ -2167,7 +2490,7 @@ var makeKeyframeManager = () => {
     if (mostInThePastBank) {
       const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel);
       delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
-      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+      Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
     }
     return { finish: false };
   };
@@ -2179,7 +2502,7 @@ var makeKeyframeManager = () => {
       if (finish) {
         break;
       }
-      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, "Deleted oldest keyframe bank to stay under max cache size", (cacheStats.totalSize / 1024 / 1024).toFixed(1), "out of", (maxCacheSize / 1024 / 1024).toFixed(1));
+      Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, "Deleted oldest keyframe bank to stay under max cache size", (cacheStats.totalSize / 1024 / 1024).toFixed(1), "out of", (maxCacheSize / 1024 / 1024).toFixed(1));
       cacheStats = await getTotalCacheStats();
     }
   };
@@ -2198,7 +2521,7 @@ var makeKeyframeManager = () => {
       const { endTimestampInSeconds, startTimestampInSeconds } = bank;
       if (endTimestampInSeconds < threshold) {
         bank.prepareForDeletion(logLevel);
-        Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+        Internals10.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({
@@ -2242,7 +2565,7 @@ var makeKeyframeManager = () => {
     if (await (await existingBank).hasTimestampInSecond(timestamp)) {
       return existingBank;
     }
-    Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
+    Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
     await (await existingBank).prepareForDeletion(logLevel);
     delete sources[src][startTimestampInSeconds];
     const replacementKeybank = getFramesSinceKeyframe({
@@ -2331,20 +2654,20 @@ 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}`));
     }
-    Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
+    Internals11.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 (typeof window !== "undefined" && window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
     const value = window.remotion_initialMemoryAvailable / 2;
     if (value < 500 * 1024 * 1024) {
-      Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
+      Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
       return 500 * 1024 * 1024;
     }
     if (value > 20000 * 1024 * 1024) {
-      Internals10.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)`);
+      Internals11.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;
     }
-    Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
+    Internals11.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;
@@ -2431,12 +2754,12 @@ var convertAudioData = ({
 };
 
 // src/get-sink.ts
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 var sinkPromises = {};
 var getSink = (src, logLevel) => {
   let promise = sinkPromises[src];
   if (!promise) {
-    Internals11.Log.verbose({
+    Internals12.Log.verbose({
       logLevel,
       tag: "@remotion/media"
     }, `Sink for ${src} was not found, creating new sink`);
@@ -2929,10 +3252,10 @@ var AudioForRendering = ({
   trimBefore
 }) => {
   const frame = useCurrentFrame3();
-  const absoluteFrame = Internals12.useTimelinePosition();
-  const videoConfig = Internals12.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext3(Internals12.RenderAssetManager);
-  const startsAt = Internals12.useMediaStartsAt();
+  const absoluteFrame = Internals13.useTimelinePosition();
+  const videoConfig = Internals13.useUnsafeVideoConfig();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext3(Internals13.RenderAssetManager);
+  const startsAt = Internals13.useMediaStartsAt();
   const environment = useRemotionEnvironment();
   if (!videoConfig) {
     throw new Error("No video config found");
@@ -2943,7 +3266,7 @@ var AudioForRendering = ({
   const { fps } = videoConfig;
   const { delayRender, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState3(false);
-  const sequenceContext = useContext3(Internals12.SequenceContext);
+  const sequenceContext = useContext3(Internals13.SequenceContext);
   const id = useMemo3(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -2988,7 +3311,7 @@ var AudioForRendering = ({
         if (disallowFallbackToHtml5Audio) {
           cancelRender2(new Error(`Unknown container format ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
         }
-        Internals12.Log.warn({
+        Internals13.Log.warn({
           logLevel: logLevel ?? window.remotion_logLevel,
           tag: "@remotion/media"
         }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
@@ -2999,7 +3322,7 @@ var AudioForRendering = ({
         if (disallowFallbackToHtml5Audio) {
           cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
         }
-        Internals12.Log.warn({
+        Internals13.Log.warn({
           logLevel: logLevel ?? window.remotion_logLevel,
           tag: "@remotion/media"
         }, `Cannot decode ${src}, falling back to <Html5Audio>`);
@@ -3013,7 +3336,7 @@ var AudioForRendering = ({
         if (disallowFallbackToHtml5Audio) {
           cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
         }
-        Internals12.Log.warn({
+        Internals13.Log.warn({
           logLevel: logLevel ?? window.remotion_logLevel,
           tag: "@remotion/media"
         }, `Network error fetching ${src}, falling back to <Html5Audio>`);
@@ -3029,12 +3352,12 @@ var AudioForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals12.evaluateVolume({
+      const volume = Internals13.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals12.warnAboutTooHighVolume(volume);
+      Internals13.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -3107,7 +3430,7 @@ var AudioForRendering = ({
 
 // src/audio/audio.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-var { validateMediaProps } = Internals13;
+var { validateMediaProps } = Internals14;
 var Audio = (props) => {
   const { name, stack, showInTimeline, ...otherProps } = props;
   const environment = useRemotionEnvironment2();
@@ -3126,10 +3449,10 @@ var Audio = (props) => {
     stack: stack ?? null
   });
 };
-Internals13.addSequenceStackTraces(Audio);
+Internals14.addSequenceStackTraces(Audio);
 
 // src/video/video.tsx
-import { Internals as Internals16, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
+import { Internals as Internals17, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
 
 // src/video/video-for-preview.tsx
 import {
@@ -3140,7 +3463,13 @@ import {
   useRef as useRef2,
   useState as useState4
 } from "react";
-import { Html5Video, Internals as Internals14, useBufferState as useBufferState2, useCurrentFrame as useCurrentFrame4 } from "remotion";
+import {
+  Html5Video,
+  Internals as Internals15,
+  useBufferState as useBufferState2,
+  useCurrentFrame as useCurrentFrame4,
+  useVideoConfig as useVideoConfig3
+} from "remotion";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var {
   useUnsafeVideoConfig: useUnsafeVideoConfig2,
@@ -3154,8 +3483,8 @@ var {
   usePreload: usePreload2,
   SequenceContext: SequenceContext2,
   SequenceVisibilityToggleContext
-} = Internals14;
-var VideoForPreview = ({
+} = Internals15;
+var VideoForPreviewAssertedShowing = ({
   src: unpreloadedSrc,
   style,
   playbackRate,
@@ -3200,6 +3529,8 @@ var VideoForPreview = ({
   });
   warnAboutTooHighVolume2(userPreferredVolume);
   const parentSequence = useContext4(SequenceContext2);
+  const isPremounting = Boolean(parentSequence?.premounting);
+  const isPostmounting = Boolean(parentSequence?.postmounting);
   const loopDisplay = useLoopDisplay({
     loop,
     mediaDurationInSeconds,
@@ -3230,11 +3561,11 @@ var VideoForPreview = ({
   const currentTimeRef = useRef2(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
-  const buffering = useContext4(Internals14.BufferingContextReact);
+  const buffering = useContext4(Internals15.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const isPlayerBuffering = Internals14.useIsPlayerBuffering(buffering);
+  const isPlayerBuffering = Internals15.useIsPlayerBuffering(buffering);
   useEffect3(() => {
     if (!canvasRef.current)
       return;
@@ -3255,7 +3586,10 @@ var VideoForPreview = ({
         playbackRate,
         audioStreamIndex,
         debugOverlay,
-        bufferState: buffer
+        bufferState: buffer,
+        isPremounting,
+        isPostmounting,
+        globalPlaybackRate
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current).then((result) => {
@@ -3266,7 +3600,7 @@ var VideoForPreview = ({
           if (disallowFallbackToOffthreadVideo) {
             throw new Error(`Unknown container format ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
           }
-          Internals14.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`);
+          Internals15.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;
         }
@@ -3274,7 +3608,7 @@ var VideoForPreview = ({
           if (disallowFallbackToOffthreadVideo) {
             throw new Error(`Network error fetching ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
           }
-          Internals14.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${preloadedSrc}, falling back to <OffthreadVideo>`);
+          Internals15.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${preloadedSrc}, falling back to <OffthreadVideo>`);
           setShouldFallbackToNativeVideo(true);
           return;
         }
@@ -3282,7 +3616,7 @@ var VideoForPreview = ({
           if (disallowFallbackToOffthreadVideo) {
             throw new Error(`Cannot decode ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
           }
-          Internals14.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${preloadedSrc}, falling back to <OffthreadVideo>`);
+          Internals15.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${preloadedSrc}, falling back to <OffthreadVideo>`);
           setShouldFallbackToNativeVideo(true);
           return;
         }
@@ -3290,7 +3624,7 @@ var VideoForPreview = ({
           if (disallowFallbackToOffthreadVideo) {
             throw new Error(`No video or audio tracks found for ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
           }
-          Internals14.Log.warn({ logLevel, tag: "@remotion/media" }, `No video or audio tracks found for ${preloadedSrc}, falling back to <OffthreadVideo>`);
+          Internals15.Log.warn({ logLevel, tag: "@remotion/media" }, `No video or audio tracks found for ${preloadedSrc}, falling back to <OffthreadVideo>`);
           setShouldFallbackToNativeVideo(true);
           return;
         }
@@ -3299,16 +3633,16 @@ var VideoForPreview = ({
           setMediaDurationInSeconds(result.durationInSeconds);
         }
       }).catch((error) => {
-        Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", error);
+        Internals15.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", error);
         setShouldFallbackToNativeVideo(true);
       });
     } catch (error) {
-      Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", error);
+      Internals15.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", error);
       setShouldFallbackToNativeVideo(true);
     }
     return () => {
       if (mediaPlayerRef.current) {
-        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
+        Internals15.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -3327,10 +3661,13 @@ var VideoForPreview = ({
     disallowFallbackToOffthreadVideo,
     audioStreamIndex,
     debugOverlay,
-    buffer
+    buffer,
+    isPremounting,
+    isPostmounting,
+    globalPlaybackRate
   ]);
   const classNameValue = useMemo4(() => {
-    return [Internals14.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals14.truthy).join(" ");
+    return [Internals15.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals15.truthy).join(" ");
   }, [className]);
   useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
@@ -3346,8 +3683,8 @@ var VideoForPreview = ({
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady)
       return;
-    mediaPlayer.seekTo(currentTime);
-    Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+    mediaPlayer.seekTo(currentTime).catch(() => {});
+    Internals15.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
   }, [currentTime, logLevel, mediaPlayerReady]);
   const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
   useEffect3(() => {
@@ -3370,14 +3707,20 @@ var VideoForPreview = ({
     }
     mediaPlayer.setDebugOverlay(debugOverlay);
   }, [debugOverlay, mediaPlayerReady]);
-  const effectivePlaybackRate = useMemo4(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
   useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
-    mediaPlayer.setPlaybackRate(effectivePlaybackRate);
-  }, [effectivePlaybackRate, mediaPlayerReady]);
+    mediaPlayer.setPlaybackRate(playbackRate);
+  }, [playbackRate, mediaPlayerReady]);
+  useEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setGlobalPlaybackRate(globalPlaybackRate);
+  }, [globalPlaybackRate, mediaPlayerReady]);
   useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
@@ -3385,6 +3728,20 @@ var VideoForPreview = ({
     }
     mediaPlayer.setLoop(loop);
   }, [loop, mediaPlayerReady]);
+  useEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setIsPremounting(isPremounting);
+  }, [isPremounting, mediaPlayerReady]);
+  useEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setIsPostmounting(isPostmounting);
+  }, [isPostmounting, mediaPlayerReady]);
   useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
@@ -3394,14 +3751,25 @@ var VideoForPreview = ({
   }, [videoConfig.fps, mediaPlayerReady]);
   useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady || !onVideoFrame) {
+    if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
-    const unsubscribe = mediaPlayer.onVideoFrame(onVideoFrame);
-    return () => {
-      unsubscribe();
-    };
+    mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
   }, [onVideoFrame, mediaPlayerReady]);
+  useEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setTrimBefore(trimBefore);
+  }, [trimBefore, mediaPlayerReady]);
+  useEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setTrimAfter(trimAfter);
+  }, [trimAfter, mediaPlayerReady]);
   const actualStyle = useMemo4(() => {
     return {
       ...style,
@@ -3434,6 +3802,38 @@ var VideoForPreview = ({
     className: classNameValue
   });
 };
+var VideoForPreview = (props) => {
+  const frame = useCurrentFrame4();
+  const videoConfig = useVideoConfig3();
+  const currentTime = frame / videoConfig.fps;
+  const showShow = useMemo4(() => {
+    return getTimeInSeconds({
+      unloopedTimeInSeconds: currentTime,
+      playbackRate: props.playbackRate,
+      loop: props.loop,
+      trimBefore: props.trimBefore,
+      trimAfter: props.trimAfter,
+      mediaDurationInSeconds: Infinity,
+      fps: videoConfig.fps,
+      ifNoMediaDuration: "infinity",
+      src: props.src
+    }) !== null;
+  }, [
+    currentTime,
+    props.loop,
+    props.playbackRate,
+    props.src,
+    props.trimAfter,
+    props.trimBefore,
+    videoConfig.fps
+  ]);
+  if (!showShow) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4(VideoForPreviewAssertedShowing, {
+    ...props
+  });
+};
 
 // src/video/video-for-rendering.tsx
 import {
@@ -3445,13 +3845,13 @@ import {
 } from "react";
 import {
   cancelRender as cancelRender3,
-  Internals as Internals15,
+  Internals as Internals16,
   Loop,
   random as random2,
   useCurrentFrame as useCurrentFrame5,
   useDelayRender as useDelayRender2,
   useRemotionEnvironment as useRemotionEnvironment3,
-  useVideoConfig as useVideoConfig2
+  useVideoConfig as useVideoConfig4
 } from "remotion";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var VideoForRendering = ({
@@ -3480,11 +3880,11 @@ var VideoForRendering = ({
     throw new TypeError("No `src` was passed to <Video>.");
   }
   const frame = useCurrentFrame5();
-  const absoluteFrame = Internals15.useTimelinePosition();
-  const { fps } = useVideoConfig2();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext5(Internals15.RenderAssetManager);
-  const startsAt = Internals15.useMediaStartsAt();
-  const sequenceContext = useContext5(Internals15.SequenceContext);
+  const absoluteFrame = Internals16.useTimelinePosition();
+  const { fps } = useVideoConfig4();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext5(Internals16.RenderAssetManager);
+  const startsAt = Internals16.useMediaStartsAt();
+  const sequenceContext = useContext5(Internals16.SequenceContext);
   const id = useMemo5(() => `media-video-${random2(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -3495,8 +3895,8 @@ var VideoForRendering = ({
   const { delayRender, continueRender } = useDelayRender2();
   const canvasRef = useRef3(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
-  const audioEnabled = Internals15.useAudioEnabled();
-  const videoEnabled = Internals15.useVideoEnabled();
+  const audioEnabled = Internals16.useAudioEnabled();
+  const videoEnabled = Internals16.useVideoEnabled();
   useLayoutEffect3(() => {
     if (!canvasRef.current) {
       return;
@@ -3539,7 +3939,7 @@ var VideoForRendering = ({
           cancelRender3(new Error(`Unknown container format ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
         }
         if (window.remotion_isMainTab) {
-          Internals15.Log.info({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`);
+          Internals16.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;
@@ -3549,7 +3949,7 @@ var VideoForRendering = ({
           cancelRender3(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
         }
         if (window.remotion_isMainTab) {
-          Internals15.Log.info({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
+          Internals16.Log.info({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
         }
         setReplaceWithOffthreadVideo({
           durationInSeconds: result.durationInSeconds
@@ -3561,7 +3961,7 @@ var VideoForRendering = ({
           cancelRender3(new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
         }
         if (window.remotion_isMainTab) {
-          Internals15.Log.info({ logLevel, tag: "@remotion/media" }, `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`);
+          Internals16.Log.info({ logLevel, tag: "@remotion/media" }, `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`);
         }
         setReplaceWithOffthreadVideo({
           durationInSeconds: result.durationInSeconds
@@ -3573,7 +3973,7 @@ var VideoForRendering = ({
           cancelRender3(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
         }
         if (window.remotion_isMainTab) {
-          Internals15.Log.info({ logLevel, tag: "@remotion/media" }, `Network error fetching ${src}, falling back to <OffthreadVideo>`);
+          Internals16.Log.info({ logLevel, tag: "@remotion/media" }, `Network error fetching ${src}, falling back to <OffthreadVideo>`);
         }
         setReplaceWithOffthreadVideo({ durationInSeconds: null });
         return;
@@ -3612,12 +4012,12 @@ var VideoForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals15.evaluateVolume({
+      const volume = Internals16.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals15.warnAboutTooHighVolume(volume);
+      Internals16.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -3669,10 +4069,10 @@ var VideoForRendering = ({
     videoEnabled
   ]);
   const classNameValue = useMemo5(() => {
-    return [Internals15.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals15.truthy).join(" ");
+    return [Internals16.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals16.truthy).join(" ");
   }, [className]);
   if (replaceWithOffthreadVideo) {
-    const fallback = /* @__PURE__ */ jsx5(Internals15.InnerOffthreadVideo, {
+    const fallback = /* @__PURE__ */ jsx5(Internals16.InnerOffthreadVideo, {
       src,
       playbackRate: playbackRate ?? 1,
       muted: muted ?? false,
@@ -3712,7 +4112,7 @@ var VideoForRendering = ({
       }
       return /* @__PURE__ */ jsx5(Loop, {
         layout: "none",
-        durationInFrames: Internals15.calculateMediaDuration({
+        durationInFrames: Internals16.calculateMediaDuration({
           trimAfter: trimAfterValue,
           mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
           playbackRate,
@@ -3732,7 +4132,7 @@ var VideoForRendering = ({
 
 // src/video/video.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals16;
+var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals17;
 var InnerVideo = ({
   src,
   audioStreamIndex,
@@ -3869,7 +4269,7 @@ var Video = ({
     debugOverlay: debugOverlay ?? false
   });
 };
-Internals16.addSequenceStackTraces(Video);
+Internals17.addSequenceStackTraces(Video);
 // src/index.ts
 var experimental_Audio = Audio;
 var experimental_Video = Video;