Skip to main content

<OffthreadVideo /> while rendering

The following component will only use <OffthreadVideo /> while rendering, but <Video /> in the Player. This is useful for attaching a ref to the <Video /> tag.

Experimental.useIsPlayer() is used to determine if the environment is a Player. Note that this is not an official Remotion API yet that is guaranteed to be stable across patch versions.

tsx
import { forwardRef } from "react";
import {
Experimental,
OffthreadVideo,
RemotionOffthreadVideoProps,
Video,
} from "remotion";
 
const OffthreadWhileRenderingRefForwardingFunction: React.ForwardRefRenderFunction<
HTMLVideoElement,
RemotionOffthreadVideoProps
> = (props, ref) => {
const { imageFormat, ...otherProps } = props;
const isPlayer = Experimental.useIsPlayer();
 
if (isPlayer) {
return <Video ref={ref} {...otherProps}></Video>;
}
 
return <OffthreadVideo {...props}></OffthreadVideo>;
};
 
export const OffthreadVideoWhileRendering = forwardRef(
OffthreadWhileRenderingRefForwardingFunction
);
tsx
import { forwardRef } from "react";
import {
Experimental,
OffthreadVideo,
RemotionOffthreadVideoProps,
Video,
} from "remotion";
 
const OffthreadWhileRenderingRefForwardingFunction: React.ForwardRefRenderFunction<
HTMLVideoElement,
RemotionOffthreadVideoProps
> = (props, ref) => {
const { imageFormat, ...otherProps } = props;
const isPlayer = Experimental.useIsPlayer();
 
if (isPlayer) {
return <Video ref={ref} {...otherProps}></Video>;
}
 
return <OffthreadVideo {...props}></OffthreadVideo>;
};
 
export const OffthreadVideoWhileRendering = forwardRef(
OffthreadWhileRenderingRefForwardingFunction
);