<OffthreadVideo /> 在渲染时

以下组件在渲染时只会使用<OffthreadVideo />，但在播放器中会使用<Video />。 这对于将ref附加到<Video />标签非常有用。

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