Components

Renders the single child with a part's behaviour, instead of the part's element.

A control button. data-control is what the skin styles.

A pill of related controls.

Holds the controls. Stays mounted while hidden, so Tab can reveal it.

Current position. Writes to the DOM directly, so playback causes no renders.

Explains a fatal error in the viewer's language, with a code to quote to support, in place of an endless spinner. It offers a retry unless the error rules that out.

The media element. The active provider owns its source, so this renders no src or <source> children. Pass <track> elements as children.

A menu that renders inside the player, so it keeps working in fullscreen. Submenus drill down in place rather than opening beside it.

A row that drills down to a panel of its own.

Icons stack in one grid cell, so the skin can cross-fade between states.

Time left, written to the DOM directly like CurrentTime.

The player root with the default skin. Import react-video-kit/styles.css for it.

A menu of whatever plugins contribute to the menu slot. Hidden when empty.

Renders what plugins contributed to name, in plugin order.

Current time and duration together.

The seek bar. A real range input provides focus, keyboard, and screen reader support, while the visible track takes pointer input over a larger hit area.

Follows the pointer with the time under it, staying inside the track.

The rail spans the track and moves as a whole, so percentages need no measuring.

The video's name, with an optional line above it and a description below.

The buttons in the centre of the picture: seek back, play, and seek forward.

Mute button and slider, with the slider opening as the pointer arrives.

Renders nothing where the platform owns volume, such as iOS.

A ring with an arrowhead, turning back or forward, and the seconds in the middle.

Eight ticks, fading around the circle. The skin turns it one tick at a time.

The speaker. The skin reads --rv-volume from the mute button, so each wave fades with the level, and the slash falls across the speaker when it's muted.

Runs write as playback advances, without rendering. Use this for anything that follows time: fills, thumbs, and text written straight to the DOM.

(write: (time: number) => void, resolution: () => number) => void

Core commands, or a plugin's commands when given its factory.

{ (): CoreCommands; <Factory extends AnyPluginFactory>(plugin: Factory): CommandsOf<Factory>; }

Time as React state, for text. Renders once per resolution seconds.

(resolution?: number) => number

A localized string from the i18n plugin when it's installed, else fallback.

(key: string, fallback: string) => string

() => Player

Calls listener with the time under the pointer, or null when there is none.

(listener: PreviewListener) => void

Subscribes to a plugin's state, typed from the plugin factory. Subscribes to kernel media state, re-rendering only when the result changes.

{ <Factory extends AnyPluginFactory, Value>(plugin: Factory, select: (state: StateOf<Factory>, media: MediaState) => Value, isEqual?: Equality<Value>): Value; <Value>(select: (media: MediaState) => Value, isEqual?: Equality<Value>): Value; }

Forwards a node to several refs.

<Value>(...refs: (Ref<Value> | undefined)[]) => (node: Value | null) => void

Compares one level deep, for selectors that build arrays or objects.

<Value>(a: Value, b: Value) => boolean

BufferingIndicatorProps

ControlGroupProps

ControlRowProps

ControlsProps

TimeProps

TimeProps

IconProps

MediaProps

TimeProps

TimeProps

TimelinePartProps

VolumeProps