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.

tsx
import {forwardRef} from 'react';
import {getRemotionEnvironment, OffthreadVideo, RemotionOffthreadVideoProps, Video} from 'remotion';
 
function OffthreadWhileRenderingRefForwardingFunction(props: RemotionOffthreadVideoProps, ref: React.Ref<HTMLVideoElement>) {
const isPreview = !getRemotionEnvironment().isRendering;
 
if (isPreview) {
const {imageFormat, ...otherProps} = props;
return <Video ref={ref} {...otherProps} />;
}
 
return <OffthreadVideo {...props} />;
}
 
export const OffthreadVideoWhileRendering = forwardRef(OffthreadWhileRenderingRefForwardingFunction);