React Installation Guide
Instructions to get your player installed and on-screen using React.
1. Select FrameworkSection titled 1. Select Framework
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 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 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.
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
<style> tags to your
and you’re ready to start building!
2. Select ProviderSection titled 2. Select Provider
You can use this provider to build an audio player. This provider uses the native
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.
3. Select StylingSection titled 3. Select Styling
The 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
4. Install PackagesSection titled 4. Install Packages
5. Import StylesSection titled 5. Import Styles
6. Import ComponentsSection titled 6. Import Components
7. Player MarkupSection titled 7. Player Markup
8. Poster (Optional)Section titled 8. Poster (Optional)
See the Poster component for how to display an image while video content is loading, or until the user hits play. If this is not included, the first frame of the video will be used instead.
9. Playsinline (Optional)Section titled 9. Playsinline (Optional)
playsinline property will indicate that video content should be played inline (on mobile only),
rather than launching the video in fullscreen mode on play. In addition, setting this property
will also ensure custom player UI is displayed on iPhone when playing
inline (hidden in fullscreen mode as native controls are forcefully displayed by the browser).
Important to note, we normalize the playing inline behaviour across all mobile browsers. If you
do not set
playsinline, the video will launch in fullscreen on play in all mobile browsers, not
just iOS Safari where the attribute is accepted.
10. Media Icons (Optional)Section titled 10. Media Icons (Optional)
You can skip this step since you're using the Default Layout.
This step is optional. Media Icons is a collection of icons we’ve designed at Vidstack to help with building audio and video player user interfaces. You can preview the entire collection in our media icons catalog.
- First, install the
- Import them like so:
- Finally, you can start using them like so:
11. ExamplesSection titled 11. Examples
You should be all set up by this point. We recommend exploring our 👉 examples to learn how to start building and customizing your player. You can also use the examples to make sure you’ve set everything up correctly.
12. Next StepsSection titled 12. Next Steps
From here you’re free to explore the library.
- Scan over the remaining docs pages to get a good overview of how the library works.
- Explore the API and Components references.
- Check out the Default Layout customization guide if you’re using it.
- See the Tailwind Plugin if you’re using Tailwind CSS.
Lastly, remember you’re not alone. You can reach out for help or to talk with other developers using Vidstack: