Guides

What the parts are, what each provider can answer, how captions are drawn, and what the optional stylesheet does.

Data-attribute contract

Styling a part · The media's aspect ratio · The style prop and a primitive's own geometry · Element types are fixed

Icons and layout

Icons are your job, not the library's · Layout is your job too

Capabilities matrix

commandsReady: when a command will actually land · buffered: not every provider reports, and not every provider that does sees the same thing · selectQuality: two providers can, one is asked and ignored · DASH is declined, not missing

Captions

Rendering modes · Declaring and selecting tracks · Accessibility model · Author responsibilities

Quality

The state, and what null means · Which providers publish a ladder · Selecting a quality · Player.QualityMenu · Accessibility · Out of scope

Playback rate

The state · Choosing a rate · Player.PlaybackRateMenu · Accessibility · Out of scope

Chapters

The state · Which providers publish chapters · Seeking to a chapter · Player.ChaptersMenu · Accessibility · Out of scope

Audio tracks

The state · Which providers publish audio tracks · Selecting an audio track · Player.AudioTrackMenu · Accessibility · Out of scope

Live

The state · Which providers can report it · seekToLiveEdge · Player.LiveIndicator · The control bar on a live source · Accessibility · Out of scope

Behaviour plugins

The example · Staging it · Out of scope

Theme

Headless usage · Themed usage · Overriding it · Tokens · Custom icons · Custom controls · With Tailwind · Reduced motion and forced colors

React video library comparison

React video library comparison: measured figures · React video library comparison: features · Comparing Playdeck against other React video libraries: method