Getting Started
Installation
Instructions to get your player installed and on-screen.
1. Select Framework
Section titled 1. Select FrameworkWe don’t have a specific integration for Angular at the moment. However, you can enjoy all Vidstack Player features through our Web Component library as Angular has perfect support.
We don’t have a specific integration for Svelte at the moment. However, you can enjoy all Vidstack Player features through our Web Component library as Svelte has perfect support.
We also ship JSX types to make sure you have complete TypeScript support for props and events! In addition, we don’t use Shadow DOM so it will work with SSR-frameworks like SvelteKit.
We don’t have a specific integration for Vue at the moment. However, you can enjoy all Vidstack Player features through our Web Component library as Vue has perfect support.
We also ship JSX types to make sure you have complete TypeScript support for props and events! In addition, we don’t use Shadow DOM so it will work with SSR-frameworks like Nuxt.
We don’t have a specific integration for Solid at the moment. However, you can enjoy all Vidstack Player features through our Web Component library as Solid has perfect support.
We also ship JSX types to make sure you have complete TypeScript support for props and events! In addition, we don’t use Shadow DOM so it will work with SSR-frameworks like SolidStart.
Our Web Component library can be used anywhere with the simple drop of an import or CDN link as they’re natively supported by all browsers.
This option is best when writing plain HTML or using a JS library that supports them. Custom Elements have perfect support in most libraries.
Using the JSDelivr CDN is the simplest and fastest way to start using the player library via Web Components.
We provide a CDN bundle that includes all package dependencies, and it’s specially minified to get
the bundle size as small as possible. Add a few <script> and <style> tags to your <head> element
and you’re ready to start building!
2. Select Provider
Section titled 2. Select ProviderYou can use this provider to build an audio player. This provider uses the native <audio>
element to support audio codecs such as AAC, MP3, FLAC, etc.
Do note, the type of audio codec supported is completely dependent on the browser so use the prior link as reference to see what’s supported.
You can use this provider to build a video player. This provider uses the native
<video> element to support video codecs such as AV1, AVC (H.264), VP9, etc.
Do note, the type of video codec supported is completely dependent on the browser so use the prior link as reference to see what’s supported.
Embed video content into documents via the native video element. This provider enables streaming video using the HTTP Live Streaming (HLS) protocol.
HLS isn’t widely supported yet, but we use the popular hls.js library to ensure it works anywhere Media Source Extensions (MSE) are supported, which accounts for ~96.42% of users tracked on caniuse.
3. Select Styling
Section titled 3. Select StylingThe CSS option provides you with a minimal starting point and completely unstyled components. All components including the player itself provide styling hooks via data attributes and support animations.
This option is best when you want to build your player yourself from scratch using vanilla CSS.
The Default Theme is best when you want to build your own player but you don’t want to design each component from zero. Our default styles have been built to be extremely easy to customize! We provide the shell and base styles and you provide the content and customization.
The Default Layout is our production-ready UI. If you’re looking for something pre-designed and ready out of the box then this is the best option. You can easily customize the icons, branding, colors, and components to your liking.
The Tailwind option provides you with a minimal starting point and completely unstyled components. All components including the player itself provide styling hooks via data attributes and support animations.
Our optional plugin can help speed you up even more by providing you with easy to
use media variants such as media-paused:opacity-0.