@remotion/media 4.0.358 → 4.0.362

package/dist/audio/audio-for-rendering.js

@@ -81,6 +81,9 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 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) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));

package/dist/browser-can-use-webgl2.d.ts

@@ -0,0 +1 @@
+export declare const canBrowserUseWebGl2: () => boolean;

package/dist/browser-can-use-webgl2.js

@@ -0,0 +1,13 @@
+let browserCanUseWebGl2 = null;
+const browserCanUseWebGl2Uncached = () => {
+    const canvas = new OffscreenCanvas(1, 1);
+    const context = canvas.getContext('webgl2');
+    return context !== null;
+};
+export const canBrowserUseWebGl2 = () => {
+    if (browserCanUseWebGl2 !== null) {
+        return browserCanUseWebGl2;
+    }
+    browserCanUseWebGl2 = browserCanUseWebGl2Uncached();
+    return browserCanUseWebGl2;
+};

package/dist/caches.d.ts

@@ -7,7 +7,7 @@ export declare const keyframeManager: {
         videoSampleSink: import("mediabunny").VideoSampleSink;
         src: string;
         logLevel: LogLevel;
-    }) => Promise<import("./video-extraction/keyframe-bank").KeyframeBank | null>;
+    }) => Promise<import("./video-extraction/keyframe-bank").KeyframeBank | "has-alpha" | null>;
     getCacheStats: () => Promise<{
         count: number;
         totalSize: number;

package/dist/caches.js

@@ -28,9 +28,9 @@ const getUncachedMaxCacheSize = (logLevel) => {
     if (window.remotion_initialMemoryAvailable !== undefined &&
         window.remotion_initialMemoryAvailable !== null) {
         const value = window.remotion_initialMemoryAvailable / 2;
-        if (value < 240 * 1024 * 1024) {
-            Internals.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) {
+            Internals.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) {
             Internals.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)`);

package/dist/esm/index.mjs

@@ -226,11 +226,18 @@ function isNetworkError(error) {
 
 // src/video/timeout-utils.ts
 var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+class TimeoutError extends Error {
+  constructor(message = "Operation timed out") {
+    super(message);
+    this.name = "TimeoutError";
+  }
+}
 function withTimeout(promise, timeoutMs, errorMessage = "Operation timed out") {
   let timeoutId = null;
   const timeoutPromise = new Promise((_, reject) => {
     timeoutId = window.setTimeout(() => {
-      reject(new Error(errorMessage));
+      reject(new TimeoutError(errorMessage));
     }, timeoutMs);
   });
   return Promise.race([
@@ -280,6 +287,7 @@ class MediaPlayer {
   audioBufferHealth = 0;
   audioIteratorStarted = false;
   HEALTHY_BUFER_THRESHOLD_SECONDS = 1;
+  mediaEnded = false;
   onVideoFrameCallback;
   constructor({
     canvas,
@@ -361,7 +369,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;
@@ -439,6 +448,8 @@ class MediaPlayer {
       src: this.src
     });
     if (newTime === null) {
+      this.videoAsyncId++;
+      this.nextFrame = null;
       this.clearCanvas();
       await this.cleanAudioIteratorAndNodes();
       return;
@@ -448,6 +459,7 @@ class MediaPlayer {
     if (isSignificantSeek) {
       this.nextFrame = null;
       this.audioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
+      this.mediaEnded = false;
       if (this.audioSink) {
         await this.cleanAudioIteratorAndNodes();
       }
@@ -582,6 +594,7 @@ class MediaPlayer {
   }
   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) {
@@ -644,6 +657,7 @@ class MediaPlayer {
       while (true) {
         const newNextFrame = (await this.videoFrameIterator.next()).value ?? null;
         if (!newNextFrame) {
+          this.mediaEnded = true;
           break;
         }
         const playbackTime = this.getPlaybackTime();
@@ -714,12 +728,15 @@ class MediaPlayer {
         let result;
         try {
           result = await withTimeout(this.audioBufferIterator.next(), BUFFERING_TIMEOUT_MS, "Iterator timeout");
-        } catch {
-          this.setBufferingState(true);
+        } catch (error) {
+          if (error instanceof TimeoutError && !this.mediaEnded) {
+            this.setBufferingState(true);
+          }
           await sleep(10);
           continue;
         }
         if (result.done || !result.value) {
+          this.mediaEnded = true;
           break;
         }
         const { buffer, timestamp, duration } = result.value;
@@ -1527,6 +1544,21 @@ var makeAudioManager = () => {
 // src/video-extraction/keyframe-manager.ts
 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) => {
   if (timestamps.length === 0) {
@@ -1927,6 +1959,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;
     }
@@ -2038,9 +2074,9 @@ var getUncachedMaxCacheSize = (logLevel) => {
   }
   if (window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
     const value = window.remotion_initialMemoryAvailable / 2;
-    if (value < 240 * 1024 * 1024) {
-      Internals10.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) {
       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)`);
@@ -2302,6 +2338,12 @@ var extractFrameInternal = async ({
     src,
     logLevel
   });
+  if (keyframeBank === "has-alpha") {
+    return {
+      type: "cannot-decode-alpha",
+      durationInSeconds: await sink.getDuration()
+    };
+  }
   if (!keyframeBank) {
     return {
       type: "success",
@@ -2367,6 +2409,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();
@@ -2426,6 +2474,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",
@@ -2544,6 +2601,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);
@@ -2673,6 +2738,9 @@ var AudioForRendering = ({
         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.`));
@@ -3236,6 +3304,18 @@ var VideoForRendering = ({
         });
         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
+        });
+        return;
+      }
       if (result.type === "network-error") {
         if (disallowFallbackToOffthreadVideo) {
           cancelRender3(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
@@ -3253,7 +3333,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;
         }
@@ -3263,7 +3345,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);
         }
@@ -3344,7 +3428,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,

package/dist/extract-frame-and-audio.js

@@ -40,6 +40,12 @@ export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durat
         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();

package/dist/video/media-player.d.ts

@@ -45,6 +45,7 @@ export declare class MediaPlayer {
     private audioBufferHealth;
     private audioIteratorStarted;
     private readonly HEALTHY_BUFER_THRESHOLD_SECONDS;
+    private mediaEnded;
     private onVideoFrameCallback?;
     constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, audioStreamIndex, fps, }: {
         canvas: HTMLCanvasElement | null;

package/dist/video/media-player.js

@@ -2,7 +2,7 @@ import { ALL_FORMATS, AudioBufferSink, CanvasSink, Input, UrlSource, } from 'med
 import { Internals } from 'remotion';
 import { getTimeInSeconds } from '../get-time-in-seconds';
 import { isNetworkError } from '../is-network-error';
-import { sleep, withTimeout } from './timeout-utils';
+import { sleep, TimeoutError, withTimeout } from './timeout-utils';
 export const SEEK_THRESHOLD = 0.05;
 const AUDIO_BUFFER_TOLERANCE_THRESHOLD = 0.1;
 export class MediaPlayer {
@@ -30,6 +30,7 @@ export class MediaPlayer {
         this.audioBufferHealth = 0;
         this.audioIteratorStarted = false;
         this.HEALTHY_BUFER_THRESHOLD_SECONDS = 1;
+        this.mediaEnded = false;
         this.input = null;
         this.render = () => {
             if (this.isBuffering) {
@@ -100,6 +101,7 @@ export class MediaPlayer {
                 while (true) {
                     const newNextFrame = (await this.videoFrameIterator.next()).value ?? null;
                     if (!newNextFrame) {
+                        this.mediaEnded = true;
                         break;
                     }
                     const playbackTime = this.getPlaybackTime();
@@ -138,12 +140,16 @@ export class MediaPlayer {
                     try {
                         result = await withTimeout(this.audioBufferIterator.next(), BUFFERING_TIMEOUT_MS, 'Iterator timeout');
                     }
-                    catch {
-                        this.setBufferingState(true);
+                    catch (error) {
+                        if (error instanceof TimeoutError && !this.mediaEnded) {
+                            this.setBufferingState(true);
+                        }
                         await sleep(10);
                         continue;
                     }
+                    // media has ended
                     if (result.done || !result.value) {
+                        this.mediaEnded = true;
                         break;
                     }
                     const { buffer, timestamp, duration } = result.value;
@@ -258,6 +264,7 @@ export class MediaPlayer {
                 this.canvasSink = new CanvasSink(videoTrack, {
                     poolSize: 2,
                     fit: 'contain',
+                    alpha: true,
                 });
                 this.canvas.width = videoTrack.displayWidth;
                 this.canvas.height = videoTrack.displayHeight;
@@ -336,6 +343,9 @@ export class MediaPlayer {
             src: this.src,
         });
         if (newTime === null) {
+            // invalidate in-flight video operations
+            this.videoAsyncId++;
+            this.nextFrame = null;
             this.clearCanvas();
             await this.cleanAudioIteratorAndNodes();
             return;
@@ -346,6 +356,7 @@ export class MediaPlayer {
         if (isSignificantSeek) {
             this.nextFrame = null;
             this.audioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
+            this.mediaEnded = false;
             if (this.audioSink) {
                 await this.cleanAudioIteratorAndNodes();
             }
@@ -473,6 +484,7 @@ export class MediaPlayer {
     }
     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) {

package/dist/video/timeout-utils.d.ts

@@ -1,2 +1,5 @@
 export declare const sleep: (ms: number) => Promise<unknown>;
+export declare class TimeoutError extends Error {
+    constructor(message?: string);
+}
 export declare function withTimeout<T>(promise: Promise<T>, timeoutMs: number, errorMessage?: string): Promise<T>;

package/dist/video/timeout-utils.js

@@ -1,10 +1,16 @@
 /* eslint-disable no-promise-executor-return */
 export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+export class TimeoutError extends Error {
+    constructor(message = 'Operation timed out') {
+        super(message);
+        this.name = 'TimeoutError';
+    }
+}
 export function withTimeout(promise, timeoutMs, errorMessage = 'Operation timed out') {
     let timeoutId = null;
     const timeoutPromise = new Promise((_, reject) => {
         timeoutId = window.setTimeout(() => {
-            reject(new Error(errorMessage));
+            reject(new TimeoutError(errorMessage));
         }, timeoutMs);
     });
     return Promise.race([

package/dist/video/video-for-rendering.js

@@ -88,6 +88,18 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 });
                 return;
             }
+            if (result.type === 'cannot-decode-alpha') {
+                if (disallowFallbackToOffthreadVideo) {
+                    cancelRender(new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+                }
+                if (window.remotion_isMainTab) {
+                    Internals.Log.info({ logLevel, tag: '@remotion/media' }, `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`);
+                }
+                setReplaceWithOffthreadVideo({
+                    durationInSeconds: result.durationInSeconds,
+                });
+                return;
+            }
             if (result.type === 'network-error') {
                 if (disallowFallbackToOffthreadVideo) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
@@ -101,7 +113,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             const { frame: imageBitmap, audio, durationInSeconds: assetDurationInSeconds, } = result;
             if (imageBitmap) {
                 onVideoFrame?.(imageBitmap);
-                const context = canvasRef.current?.getContext('2d');
+                const context = canvasRef.current?.getContext('2d', {
+                    alpha: true,
+                });
                 if (!context) {
                     return;
                 }
@@ -121,7 +135,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 // In the case of https://discord.com/channels/809501355504959528/809501355504959531/1424400511070765086
                 // A video that only starts at time 0.033sec
                 // we shall not crash here but clear the canvas
-                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);
                 }
@@ -195,7 +211,7 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             .join(' ');
     }, [className]);
     if (replaceWithOffthreadVideo) {
-        const fallback = (_jsx(Internals.InnerOffthreadVideo, { src: src, playbackRate: playbackRate ?? 1, muted: muted ?? false, acceptableTimeShiftInSeconds: fallbackOffthreadVideoProps?.acceptableTimeShiftInSeconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', delayRenderRetries: delayRenderRetries ?? undefined, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined, style: style, allowAmplificationDuringRender: true, transparent: fallbackOffthreadVideoProps?.transparent ?? false, toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true, audioStreamIndex: audioStreamIndex ?? 0, name: name, className: className, onVideoFrame: onVideoFrame, volume: volumeProp, id: id, onError: fallbackOffthreadVideoProps?.onError, toneFrequency: fallbackOffthreadVideoProps?.toneFrequency ?? 1, 
+        const fallback = (_jsx(Internals.InnerOffthreadVideo, { src: src, playbackRate: playbackRate ?? 1, muted: muted ?? false, acceptableTimeShiftInSeconds: fallbackOffthreadVideoProps?.acceptableTimeShiftInSeconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', delayRenderRetries: delayRenderRetries ?? undefined, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined, style: style, allowAmplificationDuringRender: true, transparent: fallbackOffthreadVideoProps?.transparent ?? true, toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true, audioStreamIndex: audioStreamIndex ?? 0, name: name, className: className, onVideoFrame: onVideoFrame, volume: volumeProp, id: id, onError: fallbackOffthreadVideoProps?.onError, toneFrequency: fallbackOffthreadVideoProps?.toneFrequency ?? 1, 
             // these shouldn't matter during rendering / should not appear at all
             showInTimeline: false, crossOrigin: undefined, onAutoPlayError: () => undefined, pauseWhenBuffering: false, trimAfter: undefined, trimBefore: undefined, useWebAudioApi: false, startFrom: undefined, endAt: undefined, stack: stack, _remotionInternalNativeLoopPassed: false }));
         if (loop) {

package/dist/video-extraction/extract-frame-via-broadcast-channel.d.ts

@@ -8,6 +8,9 @@ export type ExtractFrameViaBroadcastChannelResult = {
 } | {
     type: 'cannot-decode';
     durationInSeconds: number | null;
+} | {
+    type: 'cannot-decode-alpha';
+    durationInSeconds: number | null;
 } | {
     type: 'network-error';
 } | {

package/dist/video-extraction/extract-frame-via-broadcast-channel.js

@@ -28,6 +28,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',
@@ -138,6 +147,14 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
                 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);

package/dist/video-extraction/extract-frame.d.ts

@@ -7,6 +7,9 @@ type ExtractFrameResult = {
 } | {
     type: 'cannot-decode';
     durationInSeconds: number | null;
+} | {
+    type: 'cannot-decode-alpha';
+    durationInSeconds: number | null;
 } | {
     type: 'unknown-container-format';
 };

package/dist/video-extraction/extract-frame.js

@@ -42,6 +42,12 @@ const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
         src,
         logLevel,
     });
+    if (keyframeBank === 'has-alpha') {
+        return {
+            type: 'cannot-decode-alpha',
+            durationInSeconds: await sink.getDuration(),
+        };
+    }
     if (!keyframeBank) {
         return {
             type: 'success',

package/dist/video-extraction/keyframe-manager.d.ts

@@ -8,7 +8,7 @@ export declare const makeKeyframeManager: () => {
         videoSampleSink: VideoSampleSink;
         src: string;
         logLevel: LogLevel;
-    }) => Promise<KeyframeBank | null>;
+    }) => Promise<KeyframeBank | "has-alpha" | null>;
     getCacheStats: () => Promise<{
         count: number;
         totalSize: number;

package/dist/video-extraction/keyframe-manager.js

@@ -1,4 +1,5 @@
 import { Internals } from 'remotion';
+import { canBrowserUseWebGl2 } from '../browser-can-use-webgl2';
 import { getMaxVideoCacheSize, getTotalCacheStats, SAFE_BACK_WINDOW_IN_SECONDS, } from '../caches';
 import { renderTimestampRange } from '../render-timestamp-range';
 import { getFramesSinceKeyframe } from './get-frames-since-keyframe';
@@ -104,6 +105,10 @@ export const makeKeyframeManager = () => {
         const startPacket = await packetSink.getKeyPacket(timestamp, {
             verifyKeyPackets: true,
         });
+        const hasAlpha = startPacket?.sideData.alpha;
+        if (hasAlpha && !canBrowserUseWebGl2()) {
+            return 'has-alpha';
+        }
         if (!startPacket) {
             // e.g. https://discord.com/channels/809501355504959528/809501355504959531/1424400511070765086
             // The video has an offset and the first frame is at time 0.033sec

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.358",
+	"version": "4.0.362",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -22,7 +22,7 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.23.0",
-		"remotion": "4.0.357",
+		"remotion": "4.0.362",
 		"webdriverio": "9.19.2"
 	},
 	"peerDependencies": {
@@ -30,7 +30,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.357",
+		"@remotion/eslint-config-internal": "4.0.362",
 		"@vitest/browser": "^3.2.4",
 		"eslint": "9.19.0",
 		"react": "19.0.0",