Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vidstack/player

UI components and hooks for building video/audio players on the web. Robust, customizable, and accessible. Modern alternative to JW Player and Video.js.
https://github.com/vidstack/player

accessibility analytics audio hls html javascript media player react solid-js svelte typescript ui video vimeo vue web-components youtube

Last synced: 7 days ago
JSON representation

UI components and hooks for building video/audio players on the web. Robust, customizable, and accessible. Modern alternative to JW Player and Video.js.

Host: GitHub
URL: https://github.com/vidstack/player
Owner: vidstack
License: mit
Created: 2021-01-25T22:50:37.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2024-10-27T03:33:52.000Z (9 days ago)
Last Synced: 2024-10-28T00:48:21.751Z (8 days ago)
Topics: accessibility, analytics, audio, hls, html, javascript, media, player, react, solid-js, svelte, typescript, ui, video, vimeo, vue, web-components, youtube
Language: TypeScript
Homepage: https://vidstack.io
Size: 32.7 MB
Stars: 2,241
Watchers: 36
Forks: 131
Open Issues: 52
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome - vidstack/player - UI components and hooks for building video/audio players on the web. Robust, customizable, and accessible. Modern alternative to JW Player and Video.js. (TypeScript)
fucking-awesome-angular - Vidstack - A framework and collection of UI components for building and managing custom media players on the web. You can use this library to build your own player (see our examples), or use our production-ready Default Layout and customize it to match your brand and site. See this 🌎 [installation guide](www.vidstack.io/docs/player/getting-started/installation/angular?styling=default-layout&provider=video). (Table of contents / Third Party Components)
fucking-awesome-angular - Vidstack - A framework and collection of UI components for building and managing custom media players on the web. You can use this library to build your own player (see our examples), or use our production-ready Default Layout and customize it to match your brand and site. See this 🌎 [installation guide](www.vidstack.io/docs/player/getting-started/installation/angular?styling=default-layout&provider=video). (Table of contents / Third Party Components)
fucking-awesome-angular - Vidstack - A framework and collection of UI components for building and managing custom media players on the web. You can use this library to build your own player (see our examples), or use our production-ready Default Layout and customize it to match your brand and site. See this 🌎 [installation guide](www.vidstack.io/docs/player/getting-started/installation/angular?styling=default-layout&provider=video). (Table of contents / Third Party Components)
awesome-angular - Vidstack - A framework and collection of UI components for building and managing custom media players on the web. You can use this library to build your own player (see our examples), or use our production-ready Default Layout and customize it to match your brand and site. See this [installation guide](https://www.vidstack.io/docs/player/getting-started/installation/angular?styling=default-layout&provider=video). (Table of contents / Third Party Components)

README

        # Vidstack Player

[![package-badge]][package]

[![react-package-badge]][react-package]

[![discord-badge]][discord]

Build and ship a production-ready video or audio player! Robust, customizable, and accessible. The

successor to [Plyr][plyr] `3.x` and [Vime][vime] `5.x`.

## Quickstart

Our library works with any of the JavaScript frameworks listed below. You can decide to

build your own player layout using our components, or you can take advantage of our pre-built

layouts to get up and running quickly! See any of the following links to get started.

**Installation:**

- [JavaScript](https://www.vidstack.io/docs/player/getting-started/installation/javascript)

- [Angular](https://www.vidstack.io/docs/player/getting-started/installation/angular)

- [React](https://www.vidstack.io/docs/player/getting-started/installation/react)

- [Svelte](https://www.vidstack.io/docs/player/getting-started/installation/svelte)

- [Vue](https://www.vidstack.io/docs/player/getting-started/installation/vue)

- [Solid](https://www.vidstack.io/docs/player/getting-started/installation/solid)

- [Web Components](https://www.vidstack.io/docs/player/getting-started/installation/web-components)

- [CDN](https://www.vidstack.io/docs/player/getting-started/installation/cdn)

**Resources:**

- [Player Demo](https://www.vidstack.io/player/demo)

- [Media Files](https://github.com/vidstack/media-files)

- [Media Captions](https://github.com/vidstack/media-captions)

- [Media Icons](https://www.vidstack.io/media-icons)

- [Examples](https://github.com/vidstack/examples)

## Documentation

If you'd like to learn more about Vidstack Player, you can find our documentation on our website:

[Player Documentation][docs-player]

## Community

If you need help with anything related to Vidstack, or if you'd like to casually chit-chat with

other members:

- [See GitHub Discussions][discussions]

- [Join Discord Server][discord]

## Thanks ❤️

A special thanks to the following organizations who are kindly supporting Vidstack with sponsored

accounts:

- Testing with [BrowserStack](https://www.browserstack.com).

- Hosting with [Vercel](https://vercel.com).

- Streaming with [Mux](https://www.mux.com).

[vime]: https://github.com/vime-js/vime

[plyr]: https://github.com/sampotts/plyr

[docs-player]: https://www.vidstack.io/docs/player

[package]: https://www.npmjs.com/package/vidstack

[package-badge]: https://img.shields.io/npm/v/vidstack/next?style=flat-square&label=vidstack@next

[react-package]: https://www.npmjs.com/package/@vidstack/react

[react-package-badge]: https://img.shields.io/npm/v/@vidstack/react/next?style=flat-square&label=@vidstack/react@next

[discord]: https://discord.gg/QAjfh2gZE4

[discord-badge]: https://img.shields.io/discord/742612686679965696?color=%235865F2&label=%20&logo=discord&logoColor=white&style=flat-square

[discussions]: https://github.com/vidstack/player/discussions