<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";
 
const OffthreadWhileRenderingRefForwardingFunction: React.ForwardRefRenderFunction<
  HTMLVideoElement,
  RemotionOffthreadVideoProps
> = (props, ref) => {
  const { imageFormat, ...otherProps } = props;
  const isPreview = !getRemotionEnvironment().isRendering;
 
  if (isPreview) {
    return <Video ref={ref} {...otherProps}></Video>;
  }
 
  return <OffthreadVideo {...props}></OffthreadVideo>;
};
 
export const OffthreadVideoWhileRendering = forwardRef(
  OffthreadWhileRenderingRefForwardingFunction
);

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