Video, audio, and live player skins from Video.js, the open source web video player. Add a full skin or individual controls as editable React and Tailwind CSS source.
A state-aware button that starts and stops AirPlay playback.
A submenu for selecting an available audio track.
A delayed spinner displayed while media is waiting for data.
The shared styled button used by media controls.
A tooltip that wraps a control button and shows its label and keyboard shortcut.
A state-aware button that toggles captions and subtitles.
A captions button and popup for selecting a text track.
A submenu for selecting captions or turning them off.
A state-aware button that starts and stops Google Cast playback.
The player layout container shared by Skin compositions.
A complete on-demand audio skin with playback, seeking, volume, speed, and feedback controls.
A complete live audio skin with play, live-edge, volume, error, and keyboard feedback controls.
A complete live video skin with live-edge, captions, remote playback, feedback, and input controls.
A complete on-demand video skin with responsive controls, settings, feedback, and input controls.
An alert dialog that presents and dismisses playback errors.
A button that enters and exits fullscreen with state-aware icons.
Shows live-edge status and seeks playback back to the live point when activated.
A state-aware mute button used by the volume control.
A state-aware button that enters and exits picture-in-picture.
Shows the current speed and cycles through available playback rates.
A submenu for selecting the playback speed.
A three-state button that plays, pauses, or restarts media with matching icons.
The video poster and its presentation styling shared by Skin compositions.
A submenu for selecting the playback quality.
A selectable menu item with an active-state indicator.
A button that skips playback forward or backward with a direction-aware icon and value.
Visual feedback for forward and backward seek actions.
A settings button and popup for composing playback option submenus.
Shared styled parts for slider tracks, progress layers, and thumbs.
A polite live region that announces media state changes.
Visual feedback for captions, fullscreen, picture-in-picture, and playback actions.
A playback timeline for seeking, with current and buffered progress plus time and thumbnail previews.
The media title, displayed above the video while controls are visible.
Editable resets and token overrides used only by audio skins.
Editable shared media tokens, resets, preferences, and Tailwind compiler integration.
Private menu direction indicator shared by editable Video.js menu components.
Merges and resolves state-aware class names used by editable Video.js React components.
Editable resets and token overrides used only by video skins.
A mute toggle with a vertical slider for adjusting playback volume in a popover.
Visual feedback for mute and volume changes.
A horizontal or vertical slider for adjusting playback volume by dragging, using the keyboard, or scrolling.