@remotion/media 4.0.357 → 4.0.361

package/dist/esm/index.mjs

@@ -1,15 +1,179 @@
 // src/audio/audio.tsx
-import { Internals as Internals11, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
+import { Internals as Internals13, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
 
 // src/audio/audio-for-preview.tsx
-import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useContext as useContext2, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 import {
-  Internals as Internals2,
+  Internals as Internals5,
   Audio as RemotionAudio,
   useBufferState,
-  useCurrentFrame
+  useCurrentFrame as useCurrentFrame2
 } from "remotion";
 
+// src/show-in-timeline.ts
+import { useMemo } from "react";
+import { Internals, useVideoConfig } from "remotion";
+var useLoopDisplay = ({
+  loop,
+  mediaDurationInSeconds,
+  playbackRate,
+  trimAfter,
+  trimBefore
+}) => {
+  const { durationInFrames: compDuration, fps } = useVideoConfig();
+  const loopDisplay = useMemo(() => {
+    if (!loop || !mediaDurationInSeconds) {
+      return;
+    }
+    const durationInFrames = Internals.calculateMediaDuration({
+      mediaDurationInFrames: mediaDurationInSeconds * fps,
+      playbackRate,
+      trimAfter,
+      trimBefore
+    });
+    const maxTimes = compDuration / durationInFrames;
+    return {
+      numberOfTimes: maxTimes,
+      startOffset: 0,
+      durationInFrames
+    };
+  }, [
+    compDuration,
+    fps,
+    loop,
+    mediaDurationInSeconds,
+    playbackRate,
+    trimAfter,
+    trimBefore
+  ]);
+  return loopDisplay;
+};
+
+// src/use-media-in-timeline.ts
+import { useContext, useEffect, useState } from "react";
+import { Internals as Internals2, useCurrentFrame } from "remotion";
+var useMediaInTimeline = ({
+  volume,
+  mediaVolume,
+  src,
+  mediaType,
+  playbackRate,
+  displayName,
+  stack,
+  showInTimeline,
+  premountDisplay,
+  postmountDisplay,
+  loopDisplay,
+  trimBefore,
+  trimAfter
+}) => {
+  const parentSequence = useContext(Internals2.SequenceContext);
+  const startsAt = Internals2.useMediaStartsAt();
+  const { registerSequence, unregisterSequence } = useContext(Internals2.SequenceManager);
+  const [sequenceId] = useState(() => String(Math.random()));
+  const [mediaId] = useState(() => String(Math.random()));
+  const frame = useCurrentFrame();
+  const {
+    volumes,
+    duration,
+    doesVolumeChange,
+    nonce,
+    rootId,
+    isStudio,
+    finalDisplayName
+  } = Internals2.useBasicMediaInTimeline({
+    volume,
+    mediaVolume,
+    mediaType,
+    src,
+    displayName,
+    trimBefore,
+    trimAfter,
+    playbackRate
+  });
+  useEffect(() => {
+    if (!src) {
+      throw new Error("No src passed");
+    }
+    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
+      return;
+    }
+    if (!showInTimeline) {
+      return;
+    }
+    const loopIteration = loopDisplay ? Math.floor(frame / loopDisplay.durationInFrames) : 0;
+    if (loopDisplay) {
+      registerSequence({
+        type: "sequence",
+        premountDisplay,
+        postmountDisplay,
+        parent: parentSequence?.id ?? null,
+        displayName: finalDisplayName,
+        rootId,
+        showInTimeline: true,
+        nonce,
+        loopDisplay,
+        stack,
+        from: 0,
+        duration,
+        id: sequenceId
+      });
+    }
+    registerSequence({
+      type: mediaType,
+      src,
+      id: mediaId,
+      duration: loopDisplay?.durationInFrames ?? duration,
+      from: loopDisplay ? loopIteration * loopDisplay.durationInFrames : 0,
+      parent: loopDisplay ? sequenceId : parentSequence?.id ?? null,
+      displayName: finalDisplayName,
+      rootId,
+      volume: volumes,
+      showInTimeline: true,
+      nonce,
+      startMediaFrom: 0 - startsAt,
+      doesVolumeChange,
+      loopDisplay: undefined,
+      playbackRate,
+      stack,
+      premountDisplay: null,
+      postmountDisplay: null
+    });
+    return () => {
+      if (loopDisplay) {
+        unregisterSequence(sequenceId);
+      }
+      unregisterSequence(mediaId);
+    };
+  }, [
+    doesVolumeChange,
+    duration,
+    finalDisplayName,
+    isStudio,
+    loopDisplay,
+    mediaId,
+    mediaType,
+    nonce,
+    parentSequence?.id,
+    playbackRate,
+    postmountDisplay,
+    premountDisplay,
+    registerSequence,
+    rootId,
+    sequenceId,
+    showInTimeline,
+    src,
+    stack,
+    startsAt,
+    unregisterSequence,
+    volumes,
+    frame
+  ]);
+  return {
+    id: mediaId
+  };
+};
+
 // src/video/media-player.ts
 import {
   ALL_FORMATS,
@@ -18,7 +182,39 @@ import {
   Input,
   UrlSource
 } from "mediabunny";
-import { Internals } from "remotion";
+import { Internals as Internals4 } from "remotion";
+
+// src/get-time-in-seconds.ts
+import { Internals as Internals3 } 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 ? Internals3.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) {
@@ -28,34 +224,6 @@ function isNetworkError(error) {
   return false;
 }
 
-// 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;
-};
-
 // src/video/timeout-utils.ts
 var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 function withTimeout(promise, timeoutMs, errorMessage = "Operation timed out") {
@@ -93,13 +261,15 @@ class MediaPlayer {
   audioBufferIterator = null;
   queuedAudioNodes = new Set;
   gainNode = null;
+  currentVolume = 1;
   sharedAudioContext;
   audioSyncAnchor = 0;
   playing = false;
   muted = false;
   loop = false;
-  trimBeforeSeconds;
-  trimAfterSeconds;
+  fps;
+  trimBefore;
+  trimAfter;
   animationFrameId = null;
   videoAsyncId = 0;
   audioAsyncId = 0;
@@ -117,10 +287,11 @@ class MediaPlayer {
     logLevel,
     sharedAudioContext,
     loop,
-    trimBeforeSeconds,
-    trimAfterSeconds,
+    trimBefore,
+    trimAfter,
     playbackRate,
-    audioStreamIndex
+    audioStreamIndex,
+    fps
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -128,12 +299,13 @@ class MediaPlayer {
     this.sharedAudioContext = sharedAudioContext;
     this.playbackRate = playbackRate;
     this.loop = loop;
-    this.trimBeforeSeconds = trimBeforeSeconds;
-    this.trimAfterSeconds = trimAfterSeconds;
+    this.trimBefore = trimBefore;
+    this.trimAfter = trimAfter;
     this.audioStreamIndex = audioStreamIndex ?? 0;
+    this.fps = fps;
     if (canvas) {
       const context = canvas.getContext("2d", {
-        alpha: false,
+        alpha: true,
         desynchronized: true
       });
       if (!context) {
@@ -169,15 +341,15 @@ class MediaPlayer {
         if (isNetworkError(err)) {
           throw error;
         }
-        Internals.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
+        Internals4.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([
+      const [durationInSeconds, videoTrack, audioTracks] = await Promise.all([
         input.computeDuration(),
         input.getPrimaryVideoTrack(),
         input.getAudioTracks()
       ]);
-      this.totalDuration = duration;
+      this.totalDuration = durationInSeconds;
       const audioTrack = audioTracks[this.audioStreamIndex] ?? null;
       if (!videoTrack && !audioTrack) {
         return { type: "no-tracks" };
@@ -189,7 +361,8 @@ class MediaPlayer {
         }
         this.canvasSink = new CanvasSink(videoTrack, {
           poolSize: 2,
-          fit: "contain"
+          fit: "contain",
+          alpha: true
         });
         this.canvas.width = videoTrack.displayWidth;
         this.canvas.height = videoTrack.displayHeight;
@@ -199,14 +372,21 @@ class MediaPlayer {
         this.gainNode = this.sharedAudioContext.createGain();
         this.gainNode.connect(this.sharedAudioContext.destination);
       }
-      const startTime = resolvePlaybackTime({
-        absolutePlaybackTimeInSeconds: startTimeUnresolved,
+      const startTime = getTimeInSeconds({
+        unloopedTimeInSeconds: startTimeUnresolved,
         playbackRate: this.playbackRate,
         loop: this.loop,
-        trimBeforeInSeconds: this.trimBeforeSeconds,
-        trimAfterInSeconds: this.trimAfterSeconds,
-        mediaDurationInSeconds: this.totalDuration
+        trimBefore: this.trimBefore,
+        trimAfter: this.trimAfter,
+        mediaDurationInSeconds: this.totalDuration,
+        fps: this.fps,
+        ifNoMediaDuration: "infinity",
+        src: this.src
       });
+      if (startTime === null) {
+        this.clearCanvas();
+        return { type: "success", durationInSeconds: this.totalDuration };
+      }
       if (this.sharedAudioContext) {
         this.audioSyncAnchor = this.sharedAudioContext.currentTime - startTime;
       }
@@ -216,17 +396,22 @@ class MediaPlayer {
         this.startVideoIterator(startTime)
       ]);
       this.startRenderLoop();
-      return { type: "success" };
+      return { type: "success", durationInSeconds };
     } 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);
+        Internals4.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);
+      Internals4.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);
+    }
+  }
   cleanupAudioQueue() {
     for (const node of this.queuedAudioNodes) {
       node.stop();
@@ -243,16 +428,24 @@ class MediaPlayer {
   async seekTo(time) {
     if (!this.isReady())
       return;
-    const newTime = resolvePlaybackTime({
-      absolutePlaybackTimeInSeconds: time,
+    const newTime = getTimeInSeconds({
+      unloopedTimeInSeconds: time,
       playbackRate: this.playbackRate,
       loop: this.loop,
-      trimBeforeInSeconds: this.trimBeforeSeconds,
-      trimAfterInSeconds: this.trimAfterSeconds,
-      mediaDurationInSeconds: this.totalDuration
+      trimBefore: this.trimBefore,
+      trimAfter: this.trimAfter,
+      mediaDurationInSeconds: this.totalDuration ?? null,
+      fps: this.fps,
+      ifNoMediaDuration: "infinity",
+      src: this.src
     });
+    if (newTime === null) {
+      this.clearCanvas();
+      await this.cleanAudioIteratorAndNodes();
+      return;
+    }
     const currentPlaybackTime = this.getPlaybackTime();
-    const isSignificantSeek = Math.abs(newTime - currentPlaybackTime) > SEEK_THRESHOLD;
+    const isSignificantSeek = currentPlaybackTime === null || Math.abs(newTime - currentPlaybackTime) > SEEK_THRESHOLD;
     if (isSignificantSeek) {
       this.nextFrame = null;
       this.audioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
@@ -286,8 +479,8 @@ class MediaPlayer {
   }
   setMuted(muted) {
     this.muted = muted;
-    if (muted) {
-      this.cleanupAudioQueue();
+    if (this.gainNode) {
+      this.gainNode.gain.value = muted ? 0 : this.currentVolume;
     }
   }
   setVolume(volume) {
@@ -295,11 +488,17 @@ class MediaPlayer {
       return;
     }
     const appliedVolume = Math.max(0, volume);
-    this.gainNode.gain.value = appliedVolume;
+    this.currentVolume = appliedVolume;
+    if (!this.muted) {
+      this.gainNode.gain.value = appliedVolume;
+    }
   }
   setPlaybackRate(rate) {
     this.playbackRate = rate;
   }
+  setFps(fps) {
+    this.fps = fps;
+  }
   setLoop(loop) {
     this.loop = loop;
   }
@@ -311,15 +510,7 @@ class MediaPlayer {
     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
-    });
+    return this.sharedAudioContext.currentTime - this.audioSyncAnchor;
   }
   scheduleAudioChunk(buffer, mediaTimestamp) {
     const targetTime = mediaTimestamp + this.audioSyncAnchor;
@@ -384,10 +575,15 @@ class MediaPlayer {
     }
   };
   shouldRenderFrame() {
-    return !this.isBuffering && this.canRenderVideo() && this.nextFrame !== null && this.nextFrame.timestamp <= this.getPlaybackTime();
+    const playbackTime = this.getPlaybackTime();
+    if (playbackTime === null) {
+      return false;
+    }
+    return !this.isBuffering && this.canRenderVideo() && this.nextFrame !== null && this.nextFrame.timestamp <= playbackTime;
   }
   drawCurrentFrame() {
     if (this.context && this.nextFrame) {
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
       this.context.drawImage(this.nextFrame.canvas, 0, 0);
     }
     if (this.onVideoFrameCallback && this.canvas) {
@@ -408,7 +604,7 @@ class MediaPlayer {
       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);
+      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio iterator", error);
     }
   };
   startVideoIterator = async (timeToSeek) => {
@@ -428,7 +624,7 @@ class MediaPlayer {
         return;
       }
       if (firstFrame && this.context) {
-        Internals.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew initial frame ${firstFrame.timestamp.toFixed(3)}s`);
+        Internals4.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);
@@ -436,10 +632,10 @@ class MediaPlayer {
       }
       this.nextFrame = secondFrame ?? null;
       if (secondFrame) {
-        Internals.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Buffered next frame ${secondFrame.timestamp.toFixed(3)}s`);
+        Internals4.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);
+      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start video iterator", error);
     }
   };
   updateNextFrame = async () => {
@@ -452,16 +648,20 @@ class MediaPlayer {
         if (!newNextFrame) {
           break;
         }
-        if (newNextFrame.timestamp <= this.getPlaybackTime()) {
+        const playbackTime = this.getPlaybackTime();
+        if (playbackTime === null) {
+          continue;
+        }
+        if (newNextFrame.timestamp <= playbackTime) {
           continue;
         } else {
           this.nextFrame = newNextFrame;
-          Internals.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Buffered next frame ${newNextFrame.timestamp.toFixed(3)}s`);
+          Internals4.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);
+      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to update next frame", error);
     }
   };
   bufferingStartedAtMs = null;
@@ -486,7 +686,7 @@ class MediaPlayer {
     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`);
+      Internals4.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Resuming from buffering after ${bufferingDuration}ms - buffer recovered`);
       this.setBufferingState(false);
     }
   }
@@ -497,7 +697,7 @@ class MediaPlayer {
     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`);
+      Internals4.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Force resuming from buffering after ${bufferingDuration}ms`);
       this.setBufferingState(false);
     }
   }
@@ -528,7 +728,7 @@ class MediaPlayer {
         totalBufferDuration += duration;
         this.audioBufferHealth = Math.max(0, totalBufferDuration / this.playbackRate);
         this.maybeResumeFromBuffering(totalBufferDuration / this.playbackRate);
-        if (this.playing && !this.muted) {
+        if (this.playing) {
           if (isFirstBuffer) {
             this.audioSyncAnchor = this.sharedAudioContext.currentTime - timestamp;
             isFirstBuffer = false;
@@ -538,10 +738,15 @@ class MediaPlayer {
           }
           this.scheduleAudioChunk(buffer, timestamp);
         }
-        if (timestamp - this.getPlaybackTime() >= 1) {
+        const playbackTime = this.getPlaybackTime();
+        if (playbackTime === null) {
+          continue;
+        }
+        if (timestamp - playbackTime >= 1) {
           await new Promise((resolve) => {
             const check = () => {
-              if (timestamp - this.getPlaybackTime() < 1) {
+              const currentPlaybackTime = this.getPlaybackTime();
+              if (currentPlaybackTime !== null && timestamp - currentPlaybackTime < 1) {
                 resolve();
               } else {
                 requestAnimationFrame(check);
@@ -552,7 +757,7 @@ class MediaPlayer {
         }
       }
     } catch (error) {
-      Internals.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to run audio iterator", error);
+      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to run audio iterator", error);
     }
   };
 }
@@ -569,9 +774,8 @@ var {
   evaluateVolume,
   warnAboutTooHighVolume,
   usePreload,
-  useMediaInTimeline,
   SequenceContext
-} = Internals2;
+} = Internals5;
 var NewAudioForPreview = ({
   src,
   playbackRate,
@@ -591,14 +795,14 @@ var NewAudioForPreview = ({
   fallbackHtml5AudioProps
 }) => {
   const videoConfig = useUnsafeVideoConfig();
-  const frame = useCurrentFrame();
+  const frame = useCurrentFrame2();
   const mediaPlayerRef = useRef(null);
-  const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
-  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState(false);
+  const [mediaPlayerReady, setMediaPlayerReady] = useState2(false);
+  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState2(false);
   const [playing] = Timeline.usePlayingState();
-  const timelineContext = useContext(Timeline.TimelineContext);
+  const timelineContext = useContext2(Timeline.TimelineContext);
   const globalPlaybackRate = timelineContext.playbackRate;
-  const sharedAudioContext = useContext(SharedAudioContext);
+  const sharedAudioContext = useContext2(SharedAudioContext);
   const buffer = useBufferState();
   const delayHandleRef = useRef(null);
   const [mediaMuted] = useMediaMutedState();
@@ -620,8 +824,14 @@ var NewAudioForPreview = ({
   const currentTimeRef = useRef(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload(src);
-  const [timelineId] = useState(() => String(Math.random()));
-  const parentSequence = useContext(SequenceContext);
+  const parentSequence = useContext2(SequenceContext);
+  const loopDisplay = useLoopDisplay({
+    loop,
+    mediaDurationInSeconds: videoConfig.durationInFrames,
+    playbackRate,
+    trimAfter,
+    trimBefore
+  });
   useMediaInTimeline({
     volume,
     mediaVolume,
@@ -629,13 +839,15 @@ var NewAudioForPreview = ({
     src,
     playbackRate,
     displayName: name ?? null,
-    id: timelineId,
     stack,
     showInTimeline,
     premountDisplay: parentSequence?.premountDisplay ?? null,
-    postmountDisplay: parentSequence?.postmountDisplay ?? null
+    postmountDisplay: parentSequence?.postmountDisplay ?? null,
+    loopDisplay,
+    trimAfter,
+    trimBefore
   });
-  useEffect(() => {
+  useEffect2(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -646,8 +858,9 @@ var NewAudioForPreview = ({
         logLevel,
         sharedAudioContext: sharedAudioContext.audioContext,
         loop,
-        trimAfterSeconds: trimAfter ? trimAfter / videoConfig.fps : undefined,
-        trimBeforeSeconds: trimBefore ? trimBefore / videoConfig.fps : undefined,
+        trimAfter,
+        trimBefore,
+        fps: videoConfig.fps,
         canvas: null,
         playbackRate,
         audioStreamIndex: audioStreamIndex ?? 0
@@ -658,7 +871,7 @@ var NewAudioForPreview = ({
           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>`);
+          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>`);
           setShouldFallbackToNativeAudio(true);
           return;
         }
@@ -666,7 +879,7 @@ var NewAudioForPreview = ({
           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>`);
+          Internals5.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${preloadedSrc}, falling back to <Html5Audio>`);
           setShouldFallbackToNativeAudio(true);
           return;
         }
@@ -674,7 +887,7 @@ var NewAudioForPreview = ({
           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>`);
+          Internals5.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${preloadedSrc}, falling back to <Html5Audio>`);
           setShouldFallbackToNativeAudio(true);
           return;
         }
@@ -682,20 +895,20 @@ var NewAudioForPreview = ({
           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>`);
+          Internals5.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);
-          Internals2.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] MediaPlayer initialized successfully`);
+          Internals5.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);
+        Internals5.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);
+      Internals5.Log.error({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] MediaPlayer initialization failed", error);
       setShouldFallbackToNativeAudio(true);
     }
     return () => {
@@ -704,7 +917,7 @@ var NewAudioForPreview = ({
         delayHandleRef.current = null;
       }
       if (mediaPlayerRef.current) {
-        Internals2.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] Disposing MediaPlayer`);
+        Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -724,62 +937,69 @@ var NewAudioForPreview = ({
     audioStreamIndex,
     disallowFallbackToHtml5Audio
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     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);
+        Internals5.Log.error({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] Failed to play", error);
       });
     } else {
       audioPlayer.pause();
     }
   }, [playing, logLevel, mediaPlayerReady]);
-  useEffect(() => {
+  useEffect2(() => {
     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`);
+    Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
   }, [currentTime, logLevel, mediaPlayerReady]);
-  useEffect(() => {
+  useEffect2(() => {
     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");
+        Internals5.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");
+        Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] MediaPlayer unbuffering - unblocking Remotion playback");
       }
     });
   }, [mediaPlayerReady, buffer, logLevel]);
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
-  useEffect(() => {
+  useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady)
       return;
     audioPlayer.setMuted(effectiveMuted);
   }, [effectiveMuted, mediaPlayerReady]);
-  useEffect(() => {
+  useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady) {
       return;
     }
     audioPlayer.setVolume(userPreferredVolume);
-  }, [userPreferredVolume, mediaPlayerReady, logLevel]);
-  const effectivePlaybackRate = useMemo(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
-  useEffect(() => {
+  }, [userPreferredVolume, mediaPlayerReady]);
+  const effectivePlaybackRate = useMemo2(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
+  useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady) {
       return;
     }
     audioPlayer.setPlaybackRate(effectivePlaybackRate);
-  }, [effectivePlaybackRate, mediaPlayerReady, logLevel]);
+  }, [effectivePlaybackRate, mediaPlayerReady]);
+  useEffect2(() => {
+    const audioPlayer = mediaPlayerRef.current;
+    if (!audioPlayer || !mediaPlayerReady) {
+      return;
+    }
+    audioPlayer.setFps(videoConfig.fps);
+  }, [videoConfig.fps, mediaPlayerReady]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
     return /* @__PURE__ */ jsx(RemotionAudio, {
       src,
@@ -841,13 +1061,13 @@ var AudioForPreview = ({
 };
 
 // src/audio/audio-for-rendering.tsx
-import { useContext as useContext2, useLayoutEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import { useContext as useContext3, useLayoutEffect, useMemo as useMemo3, useState as useState3 } from "react";
 import {
-  Audio,
   cancelRender as cancelRender2,
-  Internals as Internals10,
+  Html5Audio,
+  Internals as Internals12,
   random,
-  useCurrentFrame as useCurrentFrame2,
+  useCurrentFrame as useCurrentFrame3,
   useDelayRender,
   useRemotionEnvironment
 } from "remotion";
@@ -976,13 +1196,13 @@ var frameForVolumeProp = ({
 };
 
 // src/caches.ts
-import { cancelRender, Internals as Internals7 } from "remotion";
+import { cancelRender, Internals as Internals10 } from "remotion";
 
 // src/audio-extraction/audio-manager.ts
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals7 } from "remotion";
 
 // src/audio-extraction/audio-iterator.ts
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals6 } from "remotion";
 
 // src/audio-extraction/audio-cache.ts
 var makeAudioCache = () => {
@@ -1060,7 +1280,7 @@ var warnAboutMatroskaOnce = (src, logLevel) => {
     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`);
+  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`);
 };
 var makeAudioIterator = ({
   audioSampleSink,
@@ -1128,7 +1348,7 @@ var makeAudioIterator = ({
     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)}`);
+      Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
     }
   };
   const getCacheStats = () => {
@@ -1225,7 +1445,7 @@ var makeAudioManager = () => {
       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}`);
+        Internals7.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
       }
       seenKeys.add(key);
     }
@@ -1307,7 +1527,22 @@ var makeAudioManager = () => {
 };
 
 // src/video-extraction/keyframe-manager.ts
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals9 } from "remotion";
+
+// src/browser-can-use-webgl2.ts
+var browserCanUseWebGl2 = null;
+var browserCanUseWebGl2Uncached = () => {
+  const canvas = new OffscreenCanvas(1, 1);
+  const context = canvas.getContext("webgl2");
+  return context !== null;
+};
+var canBrowserUseWebGl2 = () => {
+  if (browserCanUseWebGl2 !== null) {
+    return browserCanUseWebGl2;
+  }
+  browserCanUseWebGl2 = browserCanUseWebGl2Uncached();
+  return browserCanUseWebGl2;
+};
 
 // src/render-timestamp-range.ts
 var renderTimestampRange = (timestamps) => {
@@ -1333,7 +1568,7 @@ import {
 } from "mediabunny";
 
 // src/video-extraction/keyframe-bank.ts
-import { Internals as Internals5 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 var roundTo4Digits = (timestamp) => {
   return Math.round(timestamp * 1000) / 1000;
 };
@@ -1343,7 +1578,7 @@ var makeKeyframeBank = ({
   sampleIterator,
   logLevel: parentLogLevel
 }) => {
-  Internals5.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+  Internals8.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
   const frames = {};
   const frameTimestamps = [];
   let lastUsed = Date.now();
@@ -1401,7 +1636,7 @@ var makeKeyframeBank = ({
     return await getFrameFromTimestamp(timestamp) !== null;
   };
   const prepareForDeletion = (logLevel) => {
-    Internals5.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion of keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+    Internals8.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();
@@ -1441,7 +1676,7 @@ var makeKeyframeBank = ({
       }
     }
     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)}`);
+      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)}`);
     }
   };
   const getOpenFrameCount = () => {
@@ -1617,10 +1852,10 @@ var makeKeyframeManager = () => {
         if (size === 0) {
           continue;
         }
-        Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
+        Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
       }
     }
-    Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
+    Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
   };
   const getCacheStats = async () => {
     let count = 0;
@@ -1661,7 +1896,7 @@ var makeKeyframeManager = () => {
     if (mostInThePastBank) {
       await mostInThePastBank.prepareForDeletion(logLevel);
       delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
-      Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+      Internals9.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) => {
@@ -1687,7 +1922,7 @@ var makeKeyframeManager = () => {
       const { endTimestampInSeconds, startTimestampInSeconds } = bank;
       if (endTimestampInSeconds < threshold) {
         await bank.prepareForDeletion(logLevel);
-        Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
+        Internals9.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({
@@ -1709,6 +1944,10 @@ var makeKeyframeManager = () => {
     const startPacket = await packetSink.getKeyPacket(timestamp, {
       verifyKeyPackets: true
     });
+    const hasAlpha = startPacket?.sideData.alpha;
+    if (hasAlpha && !canBrowserUseWebGl2()) {
+      return "has-alpha";
+    }
     if (!startPacket) {
       return null;
     }
@@ -1727,7 +1966,7 @@ var makeKeyframeManager = () => {
     if (await (await existingBank).hasTimestampInSecond(timestamp)) {
       return existingBank;
     }
-    Internals6.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
+    Internals9.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({
@@ -1815,20 +2054,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}`));
     }
-    Internals7.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
+    Internals10.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) {
-      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 < 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!)`);
+      return 500 * 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)`);
+      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)`);
       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`);
+    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`);
     return value;
   }
   return 1000 * 1000 * 1000;
@@ -1915,12 +2154,12 @@ var convertAudioData = ({
 };
 
 // src/get-sink.ts
-import { Internals as Internals8 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 var sinkPromises = {};
 var getSink = (src, logLevel) => {
   let promise = sinkPromises[src];
   if (!promise) {
-    Internals8.Log.verbose({
+    Internals11.Log.verbose({
       logLevel,
       tag: "@remotion/media"
     }, `Sink for ${src} was not found, creating new sink`);
@@ -1930,39 +2169,6 @@ var getSink = (src, logLevel) => {
   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 extractAudioInternal = async ({
   src,
@@ -1999,7 +2205,8 @@ var extractAudioInternal = async ({
     trimAfter,
     playbackRate,
     trimBefore,
-    fps
+    fps,
+    ifNoMediaDuration: "fail"
   });
   if (timeInSeconds === null) {
     return { data: null, durationInSeconds: mediaDurationInSeconds };
@@ -2099,7 +2306,8 @@ var extractFrameInternal = async ({
     trimAfter,
     playbackRate,
     trimBefore,
-    fps
+    fps,
+    ifNoMediaDuration: "fail"
   });
   if (timeInSeconds === null) {
     return {
@@ -2115,6 +2323,12 @@ var extractFrameInternal = async ({
     src,
     logLevel
   });
+  if (keyframeBank === "has-alpha") {
+    return {
+      type: "cannot-decode-alpha",
+      durationInSeconds: await sink.getDuration()
+    };
+  }
   if (!keyframeBank) {
     return {
       type: "success",
@@ -2180,6 +2394,12 @@ var extractFrameAndAudio = async ({
     if (frame?.type === "unknown-container-format") {
       return { type: "unknown-container-format" };
     }
+    if (frame?.type === "cannot-decode-alpha") {
+      return {
+        type: "cannot-decode-alpha",
+        durationInSeconds: frame.durationInSeconds
+      };
+    }
     if (audio === "unknown-container-format") {
       if (frame !== null) {
         frame?.frame?.close();
@@ -2239,6 +2459,15 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
           window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
           return;
         }
+        if (result.type === "cannot-decode-alpha") {
+          const cannotDecodeAlphaResponse = {
+            type: "response-cannot-decode-alpha",
+            id: data.id,
+            durationInSeconds: result.durationInSeconds
+          };
+          window.remotion_broadcastChannel.postMessage(cannotDecodeAlphaResponse);
+          return;
+        }
         if (result.type === "network-error") {
           const networkErrorResponse = {
             type: "response-network-error",
@@ -2357,6 +2586,14 @@ var extractFrameViaBroadcastChannel = ({
         window.remotion_broadcastChannel.removeEventListener("message", onMessage);
         return;
       }
+      if (data.type === "response-cannot-decode-alpha") {
+        resolve({
+          type: "cannot-decode-alpha",
+          durationInSeconds: data.durationInSeconds
+        });
+        window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
+      }
       throw new Error(`Invalid message: ${JSON.stringify(data)}`);
     };
     window.remotion_broadcastChannel.addEventListener("message", onMessage);
@@ -2414,11 +2651,11 @@ var AudioForRendering = ({
   trimAfter,
   trimBefore
 }) => {
-  const frame = useCurrentFrame2();
-  const absoluteFrame = Internals10.useTimelinePosition();
-  const videoConfig = Internals10.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext2(Internals10.RenderAssetManager);
-  const startsAt = Internals10.useMediaStartsAt();
+  const frame = useCurrentFrame3();
+  const absoluteFrame = Internals12.useTimelinePosition();
+  const videoConfig = Internals12.useUnsafeVideoConfig();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext3(Internals12.RenderAssetManager);
+  const startsAt = Internals12.useMediaStartsAt();
   const environment = useRemotionEnvironment();
   if (!videoConfig) {
     throw new Error("No video config found");
@@ -2428,9 +2665,9 @@ 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}`, [
+  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState3(false);
+  const sequenceContext = useContext3(Internals12.SequenceContext);
+  const id = useMemo3(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -2474,7 +2711,7 @@ var AudioForRendering = ({
         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>`);
+        Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
         setReplaceWithHtml5Audio(true);
         return;
       }
@@ -2482,15 +2719,18 @@ var AudioForRendering = ({
         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>`);
+        Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <Html5Audio>`);
         setReplaceWithHtml5Audio(true);
         return;
       }
+      if (result.type === "cannot-decode-alpha") {
+        throw new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToHtml5Audio' was set. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
+      }
       if (result.type === "network-error") {
         if (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>`);
+        Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${src}, falling back to <Html5Audio>`);
         setReplaceWithHtml5Audio(true);
         return;
       }
@@ -2503,12 +2743,12 @@ var AudioForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals10.evaluateVolume({
+      const volume = Internals12.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals10.warnAboutTooHighVolume(volume);
+      Internals12.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -2557,7 +2797,7 @@ var AudioForRendering = ({
     replaceWithHtml5Audio
   ]);
   if (replaceWithHtml5Audio) {
-    return /* @__PURE__ */ jsx2(Audio, {
+    return /* @__PURE__ */ jsx2(Html5Audio, {
       src,
       playbackRate,
       muted,
@@ -2581,8 +2821,8 @@ var AudioForRendering = ({
 
 // src/audio/audio.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-var { validateMediaProps } = Internals11;
-var Audio2 = (props) => {
+var { validateMediaProps } = Internals13;
+var Audio = (props) => {
   const { name, stack, showInTimeline, ...otherProps } = props;
   const environment = useRemotionEnvironment2();
   if (typeof props.src !== "string") {
@@ -2600,14 +2840,14 @@ var Audio2 = (props) => {
     stack: stack ?? null
   });
 };
-Internals11.addSequenceStackTraces(Audio2);
+Internals13.addSequenceStackTraces(Audio);
 
 // src/video/video.tsx
-import { Internals as Internals14, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
+import { Internals as Internals16, 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 { useContext as useContext4, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef2, useState as useState4 } from "react";
+import { Html5Video, Internals as Internals14, useBufferState as useBufferState2, useCurrentFrame as useCurrentFrame4 } from "remotion";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var {
   useUnsafeVideoConfig: useUnsafeVideoConfig2,
@@ -2619,11 +2859,11 @@ var {
   evaluateVolume: evaluateVolume2,
   warnAboutTooHighVolume: warnAboutTooHighVolume2,
   usePreload: usePreload2,
-  useMediaInTimeline: useMediaInTimeline2,
-  SequenceContext: SequenceContext2
-} = Internals12;
-var NewVideoForPreview = ({
-  src,
+  SequenceContext: SequenceContext2,
+  SequenceVisibilityToggleContext
+} = Internals14;
+var VideoForPreview = ({
+  src: unpreloadedSrc,
   style,
   playbackRate,
   logLevel,
@@ -2642,19 +2882,22 @@ var NewVideoForPreview = ({
   fallbackOffthreadVideoProps,
   audioStreamIndex
 }) => {
+  const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
   const videoConfig = useUnsafeVideoConfig2();
-  const frame = useCurrentFrame3();
+  const frame = useCurrentFrame4();
   const mediaPlayerRef = useRef2(null);
-  const [mediaPlayerReady, setMediaPlayerReady] = useState3(false);
-  const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState3(false);
+  const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
+  const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState4(false);
   const [playing] = Timeline2.usePlayingState();
-  const timelineContext = useContext3(Timeline2.TimelineContext);
+  const timelineContext = useContext4(Timeline2.TimelineContext);
   const globalPlaybackRate = timelineContext.playbackRate;
-  const sharedAudioContext = useContext3(SharedAudioContext2);
+  const sharedAudioContext = useContext4(SharedAudioContext2);
   const buffer = useBufferState2();
   const [mediaMuted] = useMediaMutedState2();
   const [mediaVolume] = useMediaVolumeState2();
+  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState4(null);
+  const { hidden } = useContext4(SequenceVisibilityToggleContext);
   const volumePropFrame = useFrameForVolumeProp2(loopVolumeCurveBehavior);
   const userPreferredVolume = evaluateVolume2({
     frame: volumePropFrame,
@@ -2662,21 +2905,30 @@ var NewVideoForPreview = ({
     mediaVolume
   });
   warnAboutTooHighVolume2(userPreferredVolume);
-  const [timelineId] = useState3(() => String(Math.random()));
-  const parentSequence = useContext3(SequenceContext2);
-  useMediaInTimeline2({
+  const parentSequence = useContext4(SequenceContext2);
+  const loopDisplay = useLoopDisplay({
+    loop,
+    mediaDurationInSeconds,
+    playbackRate,
+    trimAfter,
+    trimBefore
+  });
+  const { id: timelineId } = useMediaInTimeline({
     volume,
-    mediaVolume,
     mediaType: "video",
     src,
     playbackRate,
     displayName: name ?? null,
-    id: timelineId,
     stack,
     showInTimeline,
     premountDisplay: parentSequence?.premountDisplay ?? null,
-    postmountDisplay: parentSequence?.postmountDisplay ?? null
+    postmountDisplay: parentSequence?.postmountDisplay ?? null,
+    loopDisplay,
+    mediaVolume,
+    trimAfter,
+    trimBefore
   });
+  const isSequenceHidden = hidden[timelineId] ?? false;
   if (!videoConfig) {
     throw new Error("No video config found");
   }
@@ -2687,7 +2939,7 @@ var NewVideoForPreview = ({
   const currentTimeRef = useRef2(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!canvasRef.current)
       return;
     if (!sharedAudioContext)
@@ -2701,8 +2953,9 @@ var NewVideoForPreview = ({
         logLevel,
         sharedAudioContext: sharedAudioContext.audioContext,
         loop,
-        trimAfterSeconds: trimAfter ? trimAfter / videoConfig.fps : undefined,
-        trimBeforeSeconds: trimBefore ? trimBefore / videoConfig.fps : undefined,
+        trimAfter,
+        trimBefore,
+        fps: videoConfig.fps,
         playbackRate,
         audioStreamIndex
       });
@@ -2712,7 +2965,7 @@ var NewVideoForPreview = ({
           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>`);
+          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>`);
           setShouldFallbackToNativeVideo(true);
           return;
         }
@@ -2720,7 +2973,7 @@ var NewVideoForPreview = ({
           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>`);
+          Internals14.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${preloadedSrc}, falling back to <OffthreadVideo>`);
           setShouldFallbackToNativeVideo(true);
           return;
         }
@@ -2728,7 +2981,7 @@ var NewVideoForPreview = ({
           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>`);
+          Internals14.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${preloadedSrc}, falling back to <OffthreadVideo>`);
           setShouldFallbackToNativeVideo(true);
           return;
         }
@@ -2736,24 +2989,25 @@ var NewVideoForPreview = ({
           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>`);
+          Internals14.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);
+          setMediaDurationInSeconds(result.durationInSeconds);
         }
       }).catch((error) => {
-        Internals12.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] Failed to initialize MediaPlayer", error);
+        Internals14.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);
+      Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer initialization failed", error);
       setShouldFallbackToNativeVideo(true);
     }
     return () => {
       if (mediaPlayerRef.current) {
-        Internals12.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewVideoForPreview] Disposing MediaPlayer`);
+        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewVideoForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -2772,29 +3026,29 @@ var NewVideoForPreview = ({
     disallowFallbackToOffthreadVideo,
     audioStreamIndex
   ]);
-  const classNameValue = useMemo3(() => {
-    return [Internals12.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals12.truthy).join(" ");
+  const classNameValue = useMemo4(() => {
+    return [Internals14.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals14.truthy).join(" ");
   }, [className]);
-  useEffect2(() => {
+  useEffect3(() => {
     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);
+        Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] Failed to play", error);
       });
     } else {
       mediaPlayer.pause();
     }
   }, [playing, logLevel, mediaPlayerReady]);
-  useEffect2(() => {
+  useEffect3(() => {
     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`);
+    Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewVideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
   }, [currentTime, logLevel, mediaPlayerReady]);
-  useEffect2(() => {
+  useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady)
       return;
@@ -2802,11 +3056,11 @@ var NewVideoForPreview = ({
     const unsubscribe = mediaPlayer.onBufferingChange((newBufferingState) => {
       if (newBufferingState && !currentBlock) {
         currentBlock = buffer.delayPlayback();
-        Internals12.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer buffering - blocking Remotion playback");
+        Internals14.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");
+        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer unbuffering - unblocking Remotion playback");
       }
     });
     return () => {
@@ -2817,36 +3071,43 @@ var NewVideoForPreview = ({
       }
     };
   }, [mediaPlayerReady, buffer, logLevel]);
-  const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
-  useEffect2(() => {
+  const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
+  useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady)
       return;
     mediaPlayer.setMuted(effectiveMuted);
   }, [effectiveMuted, mediaPlayerReady]);
-  useEffect2(() => {
+  useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setVolume(userPreferredVolume);
-  }, [userPreferredVolume, mediaPlayerReady, logLevel]);
-  const effectivePlaybackRate = useMemo3(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
-  useEffect2(() => {
+  }, [userPreferredVolume, mediaPlayerReady]);
+  const effectivePlaybackRate = useMemo4(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
+  useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setPlaybackRate(effectivePlaybackRate);
-  }, [effectivePlaybackRate, mediaPlayerReady, logLevel]);
-  useEffect2(() => {
+  }, [effectivePlaybackRate, mediaPlayerReady]);
+  useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setLoop(loop);
   }, [loop, mediaPlayerReady]);
-  useEffect2(() => {
+  useEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setFps(videoConfig.fps);
+  }, [videoConfig.fps, mediaPlayerReady]);
+  useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady || !onVideoFrame) {
       return;
@@ -2856,10 +3117,16 @@ var NewVideoForPreview = ({
       unsubscribe();
     };
   }, [onVideoFrame, mediaPlayerReady]);
+  const actualStyle = useMemo4(() => {
+    return {
+      ...style,
+      opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
+    };
+  }, [isSequenceHidden, style]);
   if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
-    return /* @__PURE__ */ jsx4(Video, {
+    return /* @__PURE__ */ jsx4(Html5Video, {
       src,
-      style,
+      style: actualStyle,
       className,
       muted,
       volume,
@@ -2878,74 +3145,32 @@ var NewVideoForPreview = ({
     ref: canvasRef,
     width: videoConfig.width,
     height: videoConfig.height,
-    style,
+    style: actualStyle,
     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-for-rendering.tsx
 import {
-  useContext as useContext4,
+  useContext as useContext5,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo4,
+  useMemo as useMemo5,
   useRef as useRef3,
-  useState as useState4
+  useState as useState5
 } from "react";
 import {
   cancelRender as cancelRender3,
-  Internals as Internals13,
+  Internals as Internals15,
   Loop,
   random as random2,
-  useCurrentFrame as useCurrentFrame4,
+  useCurrentFrame as useCurrentFrame5,
   useDelayRender as useDelayRender2,
   useRemotionEnvironment as useRemotionEnvironment3,
-  useVideoConfig
+  useVideoConfig as useVideoConfig2
 } from "remotion";
 
-// ../core/src/calculate-loop.ts
-var calculateLoopDuration = ({
+// ../core/src/calculate-media-duration.ts
+var calculateMediaDuration = ({
   trimAfter,
   mediaDurationInFrames,
   playbackRate,
@@ -2989,13 +3214,13 @@ var VideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
   }
-  const frame = useCurrentFrame4();
-  const absoluteFrame = Internals13.useTimelinePosition();
-  const { fps } = useVideoConfig();
-  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}`, [
+  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 id = useMemo5(() => `media-video-${random2(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -3004,7 +3229,7 @@ var VideoForRendering = ({
   const environment = useRemotionEnvironment3();
   const { delayRender, continueRender } = useDelayRender2();
   const canvasRef = useRef3(null);
-  const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState4(false);
+  const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
   useLayoutEffect2(() => {
     if (!canvasRef.current) {
       return;
@@ -3047,7 +3272,7 @@ var VideoForRendering = ({
           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>`);
+          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>`);
         }
         setReplaceWithOffthreadVideo({ durationInSeconds: null });
         return;
@@ -3057,7 +3282,19 @@ var VideoForRendering = ({
           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>`);
+          Internals15.Log.info({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
+        }
+        setReplaceWithOffthreadVideo({
+          durationInSeconds: result.durationInSeconds
+        });
+        return;
+      }
+      if (result.type === "cannot-decode-alpha") {
+        if (disallowFallbackToOffthreadVideo) {
+          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>`);
         }
         setReplaceWithOffthreadVideo({
           durationInSeconds: result.durationInSeconds
@@ -3069,7 +3306,7 @@ var VideoForRendering = ({
           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>`);
+          Internals15.Log.info({ logLevel, tag: "@remotion/media" }, `Network error fetching ${src}, falling back to <OffthreadVideo>`);
         }
         setReplaceWithOffthreadVideo({ durationInSeconds: null });
         return;
@@ -3081,7 +3318,9 @@ var VideoForRendering = ({
       } = result;
       if (imageBitmap) {
         onVideoFrame?.(imageBitmap);
-        const context = canvasRef.current?.getContext("2d");
+        const context = canvasRef.current?.getContext("2d", {
+          alpha: true
+        });
         if (!context) {
           return;
         }
@@ -3091,7 +3330,9 @@ var VideoForRendering = ({
         context.drawImage(imageBitmap, 0, 0);
         imageBitmap.close();
       } else if (window.remotion_videoEnabled) {
-        const context = canvasRef.current?.getContext("2d");
+        const context = canvasRef.current?.getContext("2d", {
+          alpha: true
+        });
         if (context) {
           context.clearRect(0, 0, context.canvas.width, context.canvas.height);
         }
@@ -3104,12 +3345,12 @@ var VideoForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals13.evaluateVolume({
+      const volume = Internals15.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals13.warnAboutTooHighVolume(volume);
+      Internals15.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -3158,11 +3399,11 @@ var VideoForRendering = ({
     trimAfterValue,
     trimBeforeValue
   ]);
-  const classNameValue = useMemo4(() => {
-    return [Internals13.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals13.truthy).join(" ");
+  const classNameValue = useMemo5(() => {
+    return [Internals15.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals15.truthy).join(" ");
   }, [className]);
   if (replaceWithOffthreadVideo) {
-    const fallback = /* @__PURE__ */ jsx5(Internals13.InnerOffthreadVideo, {
+    const fallback = /* @__PURE__ */ jsx5(Internals15.InnerOffthreadVideo, {
       src,
       playbackRate: playbackRate ?? 1,
       muted: muted ?? false,
@@ -3172,7 +3413,7 @@ var VideoForRendering = ({
       delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
       style,
       allowAmplificationDuringRender: true,
-      transparent: fallbackOffthreadVideoProps?.transparent ?? false,
+      transparent: fallbackOffthreadVideoProps?.transparent ?? true,
       toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true,
       audioStreamIndex: audioStreamIndex ?? 0,
       name,
@@ -3202,7 +3443,7 @@ var VideoForRendering = ({
       }
       return /* @__PURE__ */ jsx5(Loop, {
         layout: "none",
-        durationInFrames: calculateLoopDuration({
+        durationInFrames: calculateMediaDuration({
           trimAfter: trimAfterValue,
           mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
           playbackRate,
@@ -3222,7 +3463,7 @@ var VideoForRendering = ({
 
 // src/video/video.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals14;
+var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals16;
 var InnerVideo = ({
   src,
   audioStreamIndex,
@@ -3308,7 +3549,7 @@ var InnerVideo = ({
     fallbackOffthreadVideoProps
   });
 };
-var Video2 = ({
+var Video = ({
   src,
   audioStreamIndex,
   className,
@@ -3355,14 +3596,14 @@ var Video2 = ({
     stack
   });
 };
-Internals14.addSequenceStackTraces(Video2);
+Internals16.addSequenceStackTraces(Video);
 // src/index.ts
-var experimental_Audio = Audio2;
-var experimental_Video = Video2;
+var experimental_Audio = Audio;
+var experimental_Video = Video;
 export {
   experimental_Video,
   experimental_Audio,
-  Video2 as Video,
+  Video,
   AudioForPreview,
-  Audio2 as Audio
+  Audio
 };