Getting Started
JavaScript Installation Guide
Instructions to get your player installed and on-screen using JavaScript.
1. Select Framework
Section titled 1. Select Framework2. Select Provider
Section titled 2. Select Provider3. Select Styling
Section titled 3. Select Styling4. Install Method
Section titled 4. Install Method5. Check Support
Section titled 5. Check SupportEnsure the following browser support table is suitable for your application. We’ve built the library for the modern web; thus, we try to avoid bloated polyfills and outdated environments as much as possible. At the moment, we only support browsers that fully implement the Custom Elements V1 spec.
We support at minimum ~94.18% of users tracked on caniuse.
6. Import Styles
Section titled 6. Import Styles7. Create Player
Section titled 7. Create PlayerThe target config option is a target element which can be a CSS string selector or a HTMLElement.
The target can be any element but if it’s a <audio>, <video>, or <iframe> element it will be
replaced and enhanced (i.e., progressive enhancement).
Props can also be set on the target element using data attributes like so:
If you’re coming over from Plyr and want a softer migration path, you can consider using our Plyr constructor which has about ~95% of the same features and API:
See the Plyr GitHub repo for docs and usage. Do note, in general this API is more limited and doesn’t have easy access to all player features. We strongly recommend upgrading to the newer API above.
8. Next Steps
Section titled 8. Next Steps- For player props, methods, and events, see the Player API.
- See Loading for how to setup storage, text tracks, thumbnails, and more.
- See State Management for how to read and update player state.
- Explore the API and Components references.
- Check out the Default Layout or Plyr Layout pages if you’re using them.
Lastly, remember you’re not alone. You can reach out for help or to talk with other developers using Vidstack: