DOCSEARCHbyAlgolia
Submit Docs

Video.js Documentation

website·Indexed 35 days ago

https://videojs.org/

Documentation for the Video.js HTML video player framework. Includes installation guides, integration with Svelte and TypeScript, and instructions for using CDNs, bundlers, and self-hosting. Covers player features such as accessibility, skins, presets, live streams, quality selectors, and picture-in-picture, as well as migration guides from Video.js 8, Mux Player, Plyr, and Media Chrome.

Tokens
698.3K
Snippets
3.5K
Records
5K
Agent score
57%

What's inside Video.js

  1. Overview of the Live feature state

    The Live feature tracks when playback is at the live edge and the type of live window provided by the stream.

    • liveEdgeStart: The playback time where the live edge begins. Playback is considered live when currentTime >= liveEdgeStart.
    • targetLiveWindow: Indicates the window type. 0 represents a sliding live window, Infinity represents a live event with playback history, and NaN indicates on-demand or unknown.

    Both values are NaN if the media does not provide live-edge information. To check for live playback, use !Number.isNaN(targetLiveWindow) rather than checking the duration property.

  2. Overview of the Metadata feature

    The Metadata feature resolves the current media's title and poster into two values (title and poster) that the UI can render. Resolution follows a two-tier priority system:

    1. The value explicitly set via player attributes/properties.
    2. The value reported by the media source.

    The first tier that contains a value wins. If neither has a value, the resolved value is an empty string. An empty string ('') is treated as a valid value and stops the chain; to fall back to the media-reported value, the attribute must be removed entirely.

  3. Overview of Text Tracks feature

    The Text Tracks feature manages subtitles, captions, chapters, and thumbnail tracks within the player store. A track with kind="chapters" can be used to divide the time slider into chapter ranges and label the current interaction position. When a thumbnail track is present, the feature tracks the media element's CORS mode via thumbnailTrackCrossOrigin to ensure sprite sheets are fetched correctly.

  4. Overview of Video.js React Presets

    Presets are pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases. Instead of assembling these pieces individually, developers can use a preset to quickly implement a player that matches their requirements (e.g., a background video player that needs layout but no controls).

  5. Overview of Video.js v10 Architecture for Migrators

    Video.js v10 is a complete rebuild and not a drop-in version bump. It replaces the single videojs() function and large options object with a composition of three primary pieces:

    1. The Player (<video-player>): The outer element that holds state. It does not draw anything itself but manages the state for internal components.
    2. The Media: The component that handles playback (e.g., a plain <video> tag for progressive files or specific media components for HLS, DASH, YouTube, etc.). This replaces the v8 'tech' concept.
    3. The Skin (<video-skin>): The UI layer containing controls, posters, captions, and settings. Skins are now trees of components rather than a class hierarchy to subclass.

    Key Changes:

    • No videojs() call, no data-setup attribute, and no class="video-js" required.
    • No global plugin registry.
    • Installation is now via scoped @videojs/* packages on npm (the video.js package remains v8).
    <video-player>
  <video-skin>
    <video src="/video.mp4"></video>
  </video-skin>
</video-player>

  6. Overview of media-slider anatomy

    The media-slider is composed of several specialized sub-components:

    • media-slider-buffer: Displays the buffered range on the track.
    • media-slider-fill: Displays the filled portion from the start to the current value.
    • media-slider-track: The visual track and interactive hit zone.
    • media-slider-thumb: The draggable handle used for setting values and keyboard interaction.

  7. Overview of Video.js advantages over native <video> tags

    While the native <video> tag suffices for simple clips, Video.js is recommended for professional players due to several critical gaps in native implementation:

    • Cross-browser Consistency: Native controls render differently across Chrome, Safari, and Firefox and cannot be deeply styled or rearranged.
    • Accessibility: Video.js provides built-in ARIA roles, labels, keyboard shortcuts, focus management, and screen reader announcements following WAI-ARIA Authoring Practices, whereas custom native implementations require manual handling of these complex requirements.
    • State Management: Video.js uses a centralized player store. In React, the usePlayer hook with a selector ensures components only re-render when specific state changes, avoiding the fragile event-wiring required by native elements.
    • Advanced Interactions: It provides composable building blocks for features that are complex to implement natively, such as adaptive bitrate streaming, quality selection, thumbnail previews, chapters, audio track switching, and DRM.

  8. Overview of Video.js HTML Presets

    Presets are pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases. Instead of assembling these pieces individually, developers can use a preset to quickly implement a player that matches their requirements (e.g., a background video player that autoplays and loops without controls).

  9. Overview of Video.js features and advantages

    Video.js is an open-source video player for React and HTML designed to overcome the limitations of the native <video> tag. Key advantages include:

    • Cross-browser Consistency: Provides a unified UI and behavior across Chrome, Safari, and Firefox, avoiding the inconsistent default browser controls.
    • Built-in Accessibility: Follows WAI-ARIA Authoring Practices, providing keyboard controls, focus management, and screen reader announcements by default.
    • Centralized Player State: Maintains playback state (e.g., playing, buffering) in a single player store. In React, the usePlayer hook with a selector ensures components only re-render when the specific state they track changes.
    • Advanced Media Support: Simplifies the implementation of adaptive bitrate streaming (HLS, DASH), quality selection, thumbnail previews, chapters, and DRM.
    • Provider Agnostic: Offers a consistent interface for different media sources, including direct files and services like YouTube, Vimeo, and Mux, allowing providers to be changed without rebuilding the UI.

  10. Overview of the Metadata feature

    The Metadata feature resolves the current media's title and poster into values that the UI can render. Resolution follows a two-tier priority system:

    1. User-set value: Values set via player attributes or properties.
    2. Media-reported value: Values provided by the media source itself.

    The first tier containing a value wins. If neither provides a value, the result is an empty string. An empty string explicitly set (e.g., content-title="") counts as a value and stops the resolution chain. Removing the attribute entirely allows the value to fall back to the media-reported tier.

  11. Overview of Video.js v10 for React

    Video.js v10 is an open-source video player for React and HTML, designed with lightweight, accessible components optimized for performance and streaming. It provides a composable architecture where players are structured around state, UI, media, and extensions.

  12. Overview of the hls-audio element

    The <hls-audio> element is an audio-only HLS player that plays only the audio rendition of an HLS stream. It is specifically designed for use cases like podcast players, background audio, or bandwidth-constrained environments where downloading video data is unnecessary, even if the source manifest is a mixed audio/video stream.