<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 {OffthreadVideo, RemotionOffthreadVideoProps, useRemotionEnvironment, Video} from 'remotion';
 
function OffthreadWhileRenderingRefForwardingFunction(props: RemotionOffthreadVideoProps, ref: React.Ref<HTMLVideoElement>) {
  const env = useRemotionEnvironment();
  const isPreview = !env.isRendering;
 
  if (isPreview) {
    const {imageFormat, ...otherProps} = props;
    return <Video ref={ref} {...otherProps} />;
  }
 
  return <OffthreadVideo {...props} />;
}
 
export const OffthreadVideoWhileRendering = forwardRef(OffthreadWhileRenderingRefForwardingFunction);