remotion icon indicating copy to clipboard operation
remotion copied to clipboard

OffthreadVideo is positioned differently in rendered output than in browser Player

Open empz opened this issue 1 year ago • 0 comments

Remotion Version: 4.0.221

Preview Player in browser: Image

Rendered output: Image

Using the following component:

import { Loop, OffthreadVideo } from "remotion";

export const LoopedOffthreadVideo: React.FC<{
  durationInFrames: number;
  src: string;
  muted?: boolean;
}> = ({ durationInFrames, src }) => {
  if (durationInFrames <= 0) {
    throw new Error("durationInFrames must be greater than 0");
  }

  return (
    <Loop durationInFrames={durationInFrames}>
      <OffthreadVideo src={src} muted />
    </Loop>
  );
};

This component is just rendered inside the top-level AbsoluteFill:

<AbsoluteFill style={{ background: bgColor, cursor: "default", userSelect: "none" }}>
      <LoopedOffthreadVideo
          durationInFrames={bgVideoDurationInFrames}
          src={bgMediaUrl}
          muted={true}
        />

       // Other components
</AbsoluteFill>

empz avatar Oct 16 '24 08:10 empz