Player

screenshot of Player
react
svelte
vue

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

Overview:

Vidstack Player is a production-ready video or audio player that offers a robust, customizable, and accessible solution. It is positioned as the successor to Plyr 3.x and Vime 5.x. The player is designed to be versatile and can work with various JavaScript frameworks, making it easy to customize the player layout according to your needs.

Features:

  • Robust: Built to handle production-level video and audio playback needs.
  • Customizable: Allows you to tailor the player to suit your specific requirements.
  • Accessible: Ensures that the player can be used by all users, including those with disabilities.
  • Support for Multiple JavaScript Frameworks: Compatible with popular frameworks such as Angular, React, Svelte, Vue, Solid, and Web Components.
  • Pre-built Layouts: Offers ready-to-use layouts for quick implementation.
  • Community Support: Engage with other users and receive assistance through GitHub Discussions or the Discord Server.

JavaScript

npm install vidstack-player

Angular

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

web-components
Web Components

Web components provide a way to create reusable, encapsulated UI components using standard web technologies such as HTML, CSS, and JavaScript. They allow developers to create complex UI components that can be easily shared across multiple projects and frameworks. Web components are built using four main specifications: Custom Elements, Shadow DOM, HTML Templates, and ES Modules.