# Video.js v10 — Html Documentation

## Getting started

Installation, project setup, and introductory guides.

- [Installation](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/how-to/installation.md): Install Video.js and build your first player with streaming support and accessible controls
- [Overview](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/concepts/overview.md): How Video.js players are structured — state, UI, and media
- [Build with AI](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/how-to/build-with-ai.md): How to give AI tools the context they need to build Video.js players alongside you
- [v10 Roadmap](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/concepts/v10-roadmap.md): Timeline and milestones for Video.js v10 rebuild and the future of v8
- [Browser Support](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/concepts/browser-support.md): Which browsers Video.js 10 supports and how it handles newer platform features

## Concepts

Understanding-oriented pages that explain how and why things work. Read these to build a mental model of the library.

- [Features](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/concepts/features.md): The state and actions each feature adds to the player
- [Skins](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/concepts/skins.md): Packaged player designs that include both UI components and their styles.
- [Presets](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/concepts/presets.md): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.
- [UI components](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/concepts/ui-components.md): How Video.js UI components work — one element per component, data attributes for state, and compound composition.
- [Accessibility](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/concepts/accessibility.md): How Video.js approaches accessible media playback, covering standards, ARIA, keyboard, captions, contrast, touch targets, and user preferences.

## How to

Task-oriented guides with step-by-step instructions to achieve a specific outcome by applying one or more concepts. Each guide may assume you already understand the relevant concepts.

- [Customize skins](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/how-to/customize-skins.md): Learn how to customize Video.js v10 skins by copying and modifying them

## Components

API Reference for UI components for building media player interfaces.

- [video-player](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/player-provider.md): The state boundary — creates a store and broadcasts it to all descendants.
- [media-container](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/player-container.md): The player's interaction surface — handles layout, fullscreen, media attachment, and user activity detection.
- [media-buffering-indicator](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/buffering-indicator.md): Loading indicator that displays when the video player is buffering or waiting for data
- [media-captions-button](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/captions-button.md): Accessible captions toggle button with availability detection and state reflection
- [media-controls](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/controls.md): Container component for composing and auto-hiding video player controls on user interaction
- [media-fullscreen-button](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/fullscreen-button.md): Accessible fullscreen toggle button with keyboard support and state reflection
- [media-mute-button](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/mute-button.md): Accessible mute/unmute button with keyboard support and volume state reflection
- [media-pip-button](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/pip-button.md): Accessible picture-in-picture toggle button with keyboard support and state reflection
- [media-play-button](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/play-button.md): Accessible play/pause button with keyboard support and customizable rendering
- [media-playback-rate-button](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/playback-rate-button.md): A button that cycles through playback speed rates
- [media-popover](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/popover.md): A popover component for displaying contextual content anchored to a trigger
- [media-poster](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/poster.md): Poster image component that displays a thumbnail until video playback starts
- [media-seek-button](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/seek-button.md): Accessible seek button for skipping forward or backward by a configurable number of seconds
- [media-slider](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/slider.md): A composable slider component with track, fill, thumb, preview, and value parts
- [media-thumbnail](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/thumbnail.md): Time-based thumbnail preview component for timeline scrubbing and hover previews
- [media-time](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/time.md): Time display components for showing current time, duration, and remaining time in a video player
- [media-time-slider](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/time-slider.md): A slider component for seeking through media playback time
- [media-tooltip](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/tooltip.md): A tooltip component for displaying contextual labels on hover and focus
- [media-volume-slider](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/volume-slider.md): A slider component for controlling media playback volume

## Controllers & Mixins

API Reference for controllers and mixins for HTML custom element integration.

- [createPlayer](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/html-create-player.md): Factory function that creates a player instance with typed store, mixins, and controller for HTML custom elements
- [PlayerController](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/player-controller.md): Reactive controller for accessing player store state in HTML custom elements
### Advanced

- [ContainerMixin](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/container-mixin.md): Mixin that consumes player context and registers the element as the media container
- [MediaAttachMixin](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/media-attach-mixin.md): Mixin for custom media elements to register themselves with the provider via context
- [playerContext](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/player-context.md): The default player context instance for consuming the player store in controllers
- [ProviderMixin](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/provider-mixin.md): Mixin that creates the player store and manages the full media attach lifecycle
- [SnapshotController](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/snapshot-controller.md): Reactive controller for subscribing to a State container in HTML custom elements
- [StoreController](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/store-controller.md): Reactive controller for subscribing to store state in HTML custom elements

## Features

API reference for feature modules that provide player capabilities and state.

- [createSelector](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/create-selector.md): Create a type-safe selector for a store slice's state
- [Buffer](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-buffer.md): Buffered and seekable time range state for the player store
- [Controls](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-controls.md): User activity and controls visibility state for the player store
- [Error](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-error.md): Media error state and actions for the player store
- [Fullscreen](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-fullscreen.md): Fullscreen state and actions for the player store
- [Picture-in-picture](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-pip.md): Picture-in-picture state and actions for the player store
- [Playback](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-playback.md): Play/pause state and actions for the player store
- [Playback rate](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-playback-rate.md): Playback speed state and actions for the player store
- [Source](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-source.md): Media source state and actions for the player store
- [Text tracks](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-text-tracks.md): Subtitles, captions, and chapter track state for the player store
- [Time](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-time.md): Playback position and duration state for the player store
- [Volume](https://deploy-preview-1264--vjs10-site.netlify.app/docs/framework/html/reference/feature-volume.md): Volume level and mute state for the player store


---

All documentation: https://deploy-preview-1264--vjs10-site.netlify.app/llms.txt