Getting Started
React Installation Guide
Instructions to get your player installed and on-screen using React.
1. Select Framework
Section titled 1. Select Framework2. Select Provider
Section titled 2. Select Provider3. Select Styling
Section titled 3. Select Styling4. Install Packages
Section titled 4. Install Packages5. Import Styles
Section titled 5. Import Styles6. Import Components
Section titled 6. Import Components7. Player Markup
Section titled 7. Player Markup8. 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)The 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
media-iconspackage:
- Import them like so:
- Finally, you can start using them like so:
11. Examples
Section titled 11. ExamplesYou 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 Steps
Section titled 12. Next StepsFrom 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: