DOCSEARCHbyAlgolia
Submit Docs

Vidstack Player Documentation

website·Indexed 38 days ago

https://www.vidstack.io

Documentation for Vidstack, a media player library featuring installation guides for React, Vue, Svelte, Angular, Solid, and Web Components. Includes API references, architecture overviews, state management, event handling, and a comprehensive set of UI components such as sliders and menus for media playback control.

Tokens
74.2K
Snippets
357
Records
771
Agent score
71%

What's inside Vidstack

  1. Overview of the HLS Provider

    The HLS provider enables streaming media using the HTTP Live Streaming (HLS) protocol within the native <video> element. It prefers using hls.js over the native engine when supported to ensure a consistent experience across vendors. It requires Media Source Extensions (MSE) or Managed Media Source (MMS) support.

  2. Overview of the Vidstack DASH provider

    The DASH provider allows embedding streamable video content using the Dynamic Adaptive Streaming over HTTP (DASH) protocol within a native <video> element. Since DASH is not natively supported by browsers, this provider utilizes the dash.js library. It is compatible with any environment supporting Media Source Extensions (MSE) or Managed Media Source (MMS).

  3. Overview of Vidstack Player

    Vidstack Player is a framework and collection of UI components used to build and manage custom media players on the web. It provides a minimal core that is tree-shakeable (approximately 54kB gzip) and supports both a headless approach for building completely custom UIs and a production-ready Default Layout for faster implementation. The library is designed for scalability and is SSR-friendly across multiple frameworks.

  4. Overview of the DASH provider

    The DASH provider enables streaming media using the Dynamic Adaptive Streaming over HTTP (DASH) protocol. It uses the dash.js library to provide support for DASH, as it is not natively supported in browsers. It is compatible with any environment that supports Media Source Extensions (MSE) or Managed Media Source (MMS).

  5. Overview of Google Cast provider for remote playback

    The Google Cast provider enables remote playback of media on devices such as TVs using the Google Cast framework. The provider is automatically lazy-loaded when a user selects a cast receiver. It integrates with the Remote Playback API to request and track playback changes.

  6. Overview of Vidstack Player features and capabilities

    Vidstack Player is a modern, MIT-licensed media player library designed for high performance and customizability. Key technical features include:

    • TypeScript Support: Full type safety for the player, core features, component props, state, events, and hooks.
    • Reactivity: Built with Signals for tracking and subscribing to media state. Provides hooks like useMediaState and useMediaStore for React.
    • Customizable UI: Offers a production-ready default layout customizable via props and over 150 CSS variables, as well as declarative components for building fully custom UIs.
    • Modern Standards: Uses ESM bundles, supports ReadableStream for large captions, and targets modern browsers.
    • Performance: Optimized for small bundle size (approx. 173kB / 53.4kB gzipped) with support for tree-shaking and lazy-loading of providers and captions.
    • Broad Support: Compatible with multiple JS frameworks, Browser/SSR environments, and various styling options.

  7. Overview of Vidstack Player features and technical capabilities

    Vidstack Player is a modern media player library designed for high customizability and performance. Key technical features include:

    • TypeScript Support: Full type-safety for the player, core features, component props, state, events, and hooks.
    • Reactivity: Built with Signals for internal and external media state tracking. Provides hooks like useMediaState and useMediaStore for React.
    • Customizable UI: Offers a production-ready default layout with over 150+ CSS variables for styling and a wide range of declarative components for custom UI builds.
    • Modern Standards: Uses ESM bundles, supports ReadableStream for large captions, and targets modern browsers.
    • Rich Event System: Includes comprehensive out-of-the-box events with origin triggers.
    • Broad Support: Compatible with multiple JS frameworks, Browser/SSR environments, and various styling options.

  8. Overview of Vidstack Media Player Framework

    Vidstack provides a set of UI components and hooks for building media players on the web. It is designed to be robust, customizable, and accessible, with first-class TypeScript support and compatibility across multiple JavaScript frameworks including React, Vue, Svelte, Solid, and Angular. It supports server-side rendering (SSR) and provides auto-setup plugins for bundlers like Vite, SvelteKit, and Nuxt.

  9. Overview of the HLS Provider

    The HLS provider enables streaming media using the HTTP Live Streaming (HLS) protocol within the native <video> element. It prefers using hls.js over the native engine when supported to ensure a consistent experience across vendors. It requires Media Source Extensions (MSE) or Managed Media Source (MMS) support.

  10. Overview of Vidstack Player

    Vidstack Player is a framework and collection of UI components used to build and manage custom media players on the web. It provides a minimal core that is tree-shakeable (approximately 54kB gzip) and supports both a fully customizable headless approach and a production-ready Default Layout. It is designed for scalability and is compatible with various frameworks including React (Next.js 13 and RSC ready), Vue, Svelte, and Solid via Web Components.

  11. Use the Menu component to display floating panels

    The Menu component is used to display content or options within a floating panel. It is typically used for settings, options, or navigation overlays within the player interface.

  12. Manage audio tracks in Vidstack player

    Audio tracks are supported by the HLS and Dash providers. They cannot be added programmatically. The player provides a read-only audioTracks property which returns an AudioTrackList containing AudioTrack objects. This list is live and updates dynamically as tracks are added or removed.