useContainer

useContainer returns the MediaContainer registered with the nearest Player. It returns null until the container mounts, or whenever that player has no registered container.

Import

import { useContainer } from "@videojs/react";

Usage

Call useContainer from a component rendered inside Player:

import { useContainer } from "@videojs/react";

export function ContainerStatus() {
  const container = useContainer();

  return <output>{container ? "Player container ready" : "Mounting container"}</output>;
}

Calling this hook outside Player throws because it reads through usePlayerContext. If a component can also work outside a player, use useOptionalContainer instead.

useContainer reads the registered container. useContainerAttach returns the setter used to register a custom container and is only needed when replacing the built-in Container.