Primitives

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

Sets data-visible while stalled. It writes to the DOM directly, with no renders.

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.

The large button over the video, shown before playback starts and after it ends.

Time left, written to the DOM directly like CurrentTime.

Provides the player to its parts. Never re-renders because of playback.

Jumps by a fixed amount. Disabled wherever seeking is, such as during an ad.

Renders what plugins contributed to name, in plugin order.

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.

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

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

MediaProps

TimeProps

TimelinePartProps