Chapter 333: Player - Best practices

Core Idea

The following pattern is not ideal because every time the time updates, the <Player> is being re-rendered:

Key Concepts

• Avoid re-renders of the <Player>
• Pass the user interaction event to play()
• Memoize the inputProps
• See also

Code Examples

// @allowUmdGlobalAccess
// @filename: ./remotion/MyVideo.tsx
export const MyVideo = () => <></>;

// @filename: index.tsx
const otherProps = {
  durationInFrames: 120,
  compositionWidth: 1920,
  compositionHeight: 1080,
  fps: 30,
} as const;

export const App: React.FC = () => {
  const playerRef = useRef<PlayerRef>(null);
  const [currentTime, setCurrentTime] = useState(0);

  useEffect(() => {
    playerRef.current?.addEventListener('timeupdate', (e) => {
      setCurrentTime(e.detail.frame);
    });
  }, []);

  return (
    <div>
      <Player ref={playerRef} component={MyVideo} {...otherProps} />
      <div>Current time: {currentTime}</div>
    </div>
  );
};

• What it demonstrates: Usage pattern for Player - Best practices from the official docs.

Key Takeaways

1. Understand avoid re-renders of the <player> when working with Player - Best practices.
2. Understand pass the user interaction event to play() when working with Player - Best practices.
3. Understand memoize the inputprops when working with Player - Best practices.
4. Understand see also when working with Player - Best practices.

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.