React Video Kit

    Player

    The exports of react-video-kit/player.

    Read Ready-made player to see how to use these.

    Components

    VideoPlayer

    The complete player layout: every control, styled. Features come from plugins, and defaultPlugins() is a sensible set. Leaving it out keeps it out of the bundle.

    PropTypeDescription
    poster?stringAn image for the video element to show before playback starts.
    media?Omit<VideoHTMLAttributes<HTMLVideoElement>, "src" | "controls" | "poster">Props for the underlying video element.
    tracks?ReactNode<track> elements for the video.
    title?ReactNodeThe video's name, shown above the timeline with the controls.
    eyebrow?ReactNodeA short line above the title, such as a series or an episode.
    description?ReactNodeA sentence or two about the video, under the title while it's paused.
    errorMessages?Partial<Record<VideoErrorCode, ErrorMessage>>Replaces the error overlay's text for particular error codes.
    onError?((error: MediaErrorInfo) => void)Called with every error, fatal or not, for logging. It can change between renders.
    children?ReactNodeContent rendered inside the player's root element.
    src?SourceInput | nullThe video to play, which loads afresh when its value changes.
    plugins?readonly AnyPlugin[]Set once. Define the array outside the component or memoize it.
    load?LoadStrategyWhen the provider and its engine load. Set once. Defaults to eager.
    player?PlayerBring your own player instead of creating one.

    Functions

    defaultPlugins

    A sensible set for VideoPlayer: controls that hide, gestures, keys, and the usual menus.

    () => AnyPlugin[]

    Types

    VideoPlayerProps
    FieldTypeDescription
    poster?stringAn image for the video element to show before playback starts.
    media?Omit<VideoHTMLAttributes<HTMLVideoElement>, "src" | "controls" | "poster">Props for the underlying video element.
    tracks?ReactNode<track> elements for the video.
    title?ReactNodeThe video's name, shown above the timeline with the controls.
    eyebrow?ReactNodeA short line above the title, such as a series or an episode.
    description?ReactNodeA sentence or two about the video, under the title while it's paused.
    errorMessages?Partial<Record<VideoErrorCode, ErrorMessage>>Replaces the error overlay's text for particular error codes.
    onError?((error: MediaErrorInfo) => void)Called with every error, fatal or not, for logging. It can change between renders.
    children?ReactNodeContent rendered inside the player's root element.
    src?SourceInput | nullThe video to play, which loads afresh when its value changes.
    plugins?readonly AnyPlugin[]Set once. Define the array outside the component or memoize it.
    load?LoadStrategyWhen the provider and its engine load. Set once. Defaults to eager.
    player?PlayerBring your own player instead of creating one.