<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
);