Getting Started
JavaScript Installation Guide
Instructions to get your player installed and on-screen using JavaScript.
1. Select Framework
Section titled 1. Select FrameworkWe don’t have a specific integration forSvelte at the moment. However, youcan enjoy all Vidstack Player features through ourWeb Component libraryasSvelte has perfect support.
We also ship JSX types to make sure you have complete TypeScript support for props and events! Inaddition, we don’t use Shadow DOM so it will work with SSR-frameworks like SvelteKit.
We don’t have a specific integration forVue at the moment. However, you can enjoy allVidstack Player features through ourWeb Component library asVue has perfect support.
We also ship JSX types to make sure you have complete TypeScript support for props and events! Inaddition, we don’t use Shadow DOM so it will work with SSR-frameworks like Nuxt.
We don’t have a specific integration forSolid at the moment. However, youcan enjoy all Vidstack Player features through ourWeb Component library asSolid has perfect support.
We also ship JSX types to make sure you have complete TypeScript support for props and events! Inaddition, we don’t use Shadow DOM so it will work with SSR-frameworks like SolidStart.
Using theJSDelivr CDN is the simplest and fastest way to start using the playerlibrary viaWeb Components.
We provide a CDN bundle that includes all package dependencies, and it’s specially minified to getthe bundle size as small as possible. Add a few<script> and<style> tags to your<head> elementand you’re ready to start building!
2. Select Provider
Section titled 2. Select ProviderEmbed video content into documents via the native video element. This provider enablesstreaming video using the HTTP Live Streaming (HLS) protocol.
HLS isn’t widely supported yet, but we use the popularhls.js library toensure it works anywhereMedia Source Extensions (MSE) orManaged Media Source(MMS) is supported.
Embed video content into documents via the native video element. This provider enablesstreaming video using the Dynamic Adaptive Streaming over HTTP (DASH) protocol.
DASH isn’t supported in any browser, but we use the populardash.js library toensure it works anywhereMedia Source Extensions (MSE) orManaged Media Source(MMS) is supported.
3. Select Styling
Section titled 3. Select StylingTheTailwind option provides you with a minimal starting point and completely unstyledcomponents. All components including the player itself provide styling hooks viadata attributes and support animations.
Ouroptional plugin can help speed you up even more by providing you with easy touse media variants such asmedia-paused:opacity-0.
4. 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 thelibrary for the modern web; thus, we try to avoid bloated polyfills and outdated environments asmuch as possible. At the moment, we only support browsers that fully implement theCustom 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 PlayerThetarget config option is a target element which can be a CSS string selector or aHTMLElement.The target can be any element but if it’s a<audio>,<video>, or<iframe> element it will bereplaced 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 fromPlyr and want a softer migration path, you can consider using ourPlyr 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 anddoesn’t have easy access to all player features. We strongly recommend upgrading to the newer APIabove.
8. Next Steps
Section titled 8. Next Steps- For player props, methods, and events, see thePlayer API.
- SeeLoading for how to setup storage, text tracks, thumbnails, and more.
- SeeState Management for how to read and update player state.
- Explore theAPI andComponents references.
- Check out theDefault Layout orPlyr 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 usingVidstack: