Chapter 336: Custom controls for the Player

Core Idea

You may want to implement custom controls for the <Player> component.

Key Concepts

• Custom inline controls
• Controls slot<AvailableFrom v="4.0.418" />
• Controls outside the Player
• Play / Pause button
• Time display
• Fullscreen button
• Seek bar
• Loop button

Code Examples

const MyVideo: React.FC = () => null;

const DownloadButton: React.FC<{
  playerRef: React.RefObject<PlayerRef | null>;
}> = ({playerRef}) => {
  const [frame, setFrame] = useState(0);

  useEffect(() => {
    const {current} = playerRef;
    if (!current) return;

    const onFrameUpdate = () => {
      setFrame(current.getCurrentFrame());
    };

    current.addEventListener('frameupdate', onFrameUpdate);
    return () => {
      current.removeEventListener('frameupdate', onFrameUpdate);
    };
  }, [playerRef]);

  return (
    <button
      type="button"
      onClick={() => console.log('Download at frame', frame)}
      style={{
        background: 'transparent',
        border: 'none',
        color: 'white',
        cursor: 'pointer',
      }}
    >
      Download
    </button>
  );
};

export const App: React.FC = () => {
  const playerRef = useRef<PlayerRef>(null);

  const renderCustomControls: RenderCustomControls = useCallback(() => {
    return <DownloadButton playerRef={playerRef} />;
  }, []);

  return (
    <Player
      ref={playerRef}
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
      renderCustomControls={renderCustomControls}
    />
  );
};

• What it demonstrates: Usage pattern for Custom controls for the Player from the official docs.

Key Takeaways

1. Understand custom inline controls when working with Custom controls for the Player.
2. Understand controls slot<availablefrom v="4.0.418" /> when working with Custom controls for the Player.
3. Understand controls outside the player when working with Custom controls for the Player.
4. Understand play / pause button when working with Custom controls for the Player.
5. Understand time display when working with Custom controls for the Player.

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.