@remotion/player 4.0.520 → 4.0.522

package/dist/cjs/PlayerUI.js

@@ -399,10 +399,11 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const { handlePointerDown, handleDoubleClick } = (0, use_click_prevention_on_double_click_js_1.useClickPreventionOnDoubleClick)(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
     (0, react_1.useEffect)(() => {
         if (shouldAutoplay) {
-            play();
+            setHasPlayed(true);
+            player.playAsAutoPlay();
             setShouldAutoPlay(false);
         }
-    }, [play, shouldAutoplay]);
+    }, [player, shouldAutoplay]);
     const loadingMarkup = (0, react_1.useMemo)(() => {
         return renderLoading
             ? renderLoading({

package/dist/cjs/use-player-methods.d.ts

@@ -5,6 +5,7 @@ export type UsePlayerMethods = {
     frameForward: (frames: number) => void;
     emitter: PlayerEmitter;
     play: (e?: SyntheticEvent | PointerEvent) => void;
+    playAsAutoPlay: () => void;
     pause: () => void;
     pauseAndReturnToPlayStart: () => void;
     seek: (newFrame: number) => void;

package/dist/cjs/use-player-methods.js

@@ -17,6 +17,7 @@ const usePlayerMethods = () => {
     const emitter = (0, react_1.useContext)(emitter_context_js_1.PlayerEventEmitterContext);
     const playStart = (0, react_1.useRef)(0);
     const fallbackFrame = (0, react_1.useRef)(null);
+    const nextPlayIsAutoPlayAttempt = (0, react_1.useRef)(false);
     if (!emitter) {
         throw new TypeError('Expected Player event emitter context');
     }
@@ -52,6 +53,8 @@ const usePlayerMethods = () => {
     }, [config, emitter, frameRef, setTimelinePosition, video === null || video === void 0 ? void 0 : video.id]);
     const play = (0, react_1.useCallback)((e) => {
         var _a;
+        const isAutoPlayAttempt = nextPlayIsAutoPlayAttempt.current;
+        nextPlayIsAutoPlayAttempt.current = false;
         if (readIsPlaying()) {
             return;
         }
@@ -59,7 +62,12 @@ const usePlayerMethods = () => {
         if (getCurrentFrame() === lastFrameForPlayback) {
             seek(0);
         }
-        audioContext === null || audioContext === void 0 ? void 0 : audioContext.resume();
+        if (isAutoPlayAttempt) {
+            audioContext === null || audioContext === void 0 ? void 0 : audioContext.resumeAsAutoPlay();
+        }
+        else {
+            audioContext === null || audioContext === void 0 ? void 0 : audioContext.resume();
+        }
         /**
          * Play silent audio tags to warm them up for autoplay
          */
@@ -85,6 +93,10 @@ const usePlayerMethods = () => {
         seek,
         setPlaying,
     ]);
+    const playAsAutoPlay = (0, react_1.useCallback)(() => {
+        nextPlayIsAutoPlayAttempt.current = true;
+        play();
+    }, [play]);
     const pause = (0, react_1.useCallback)(() => {
         if (readIsPlaying()) {
             setPlaying(false);
@@ -174,6 +186,7 @@ const usePlayerMethods = () => {
             frameForward,
             emitter,
             play,
+            playAsAutoPlay,
             pause,
             seek,
             getCurrentFrame,
@@ -191,6 +204,7 @@ const usePlayerMethods = () => {
         pause,
         pauseAndReturnToPlayStart,
         play,
+        playAsAutoPlay,
         isBuffering,
         seek,
         toggle,

package/dist/esm/index.mjs

@@ -577,6 +577,7 @@ var usePlayerMethods = () => {
   const emitter = useContext2(PlayerEventEmitterContext);
   const playStart = useRef(0);
   const fallbackFrame = useRef(null);
+  const nextPlayIsAutoPlayAttempt = useRef(false);
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
@@ -602,6 +603,8 @@ var usePlayerMethods = () => {
     emitter.dispatchSeek(frameToSeekTo);
   }, [config, emitter, frameRef, setTimelinePosition, video?.id]);
   const play = useCallback((e) => {
+    const isAutoPlayAttempt = nextPlayIsAutoPlayAttempt.current;
+    nextPlayIsAutoPlayAttempt.current = false;
     if (readIsPlaying()) {
       return;
     }
@@ -609,7 +612,11 @@ var usePlayerMethods = () => {
     if (getCurrentFrame() === lastFrameForPlayback) {
       seek(0);
     }
-    audioContext?.resume();
+    if (isAutoPlayAttempt) {
+      audioContext?.resumeAsAutoPlay();
+    } else {
+      audioContext?.resume();
+    }
     if (audioTagsContext && audioTagsContext.numberOfAudioTags > 0 && e) {
       audioTagsContext.playAllAudios();
     }
@@ -628,6 +635,10 @@ var usePlayerMethods = () => {
     seek,
     setPlaying
   ]);
+  const playAsAutoPlay = useCallback(() => {
+    nextPlayIsAutoPlayAttempt.current = true;
+    play();
+  }, [play]);
   const pause = useCallback(() => {
     if (readIsPlaying()) {
       setPlaying(false);
@@ -710,6 +721,7 @@ var usePlayerMethods = () => {
       frameForward,
       emitter,
       play,
+      playAsAutoPlay,
       pause,
       seek,
       getCurrentFrame,
@@ -727,6 +739,7 @@ var usePlayerMethods = () => {
     pause,
     pauseAndReturnToPlayStart,
     play,
+    playAsAutoPlay,
     isBuffering,
     seek,
     toggle
@@ -2922,10 +2935,11 @@ var PlayerUI = ({
   const { handlePointerDown, handleDoubleClick } = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
   useEffect12(() => {
     if (shouldAutoplay) {
-      play();
+      setHasPlayed(true);
+      player.playAsAutoPlay();
       setShouldAutoPlay(false);
     }
-  }, [play, shouldAutoplay]);
+  }, [player, shouldAutoplay]);
   const loadingMarkup = useMemo12(() => {
     return renderLoading ? renderLoading({
       height: outerStyle.height,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.520",
+	"version": "4.0.522",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.520"
+		"remotion": "4.0.522"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -48,8 +48,8 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
-		"zod": "4.4.3",
-		"@remotion/eslint-config-internal": "4.0.520",
+		"zod": "4.5.4",
+		"@remotion/eslint-config-internal": "4.0.522",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},