Looking for the old docs? Go here

Getting Started

Angular Installation Guide

Instructions to get your player installed and on-screen using Angular.

Angular
React
Svelte
Vue
Solid
Web Components
CDN
Audio
Video
HLS
YouTube
Vimeo
Remotion
CSS
Default Theme
Default Layout
Plyr Layout
Tailwind CSS

Ensure 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.

INFO

We support at minimum ~94.18% of users tracked on caniuse.

terminal
  
    
  

Apply the custom elements schema like so:

ts
  
    
  
js
  
    
  

The following import will register all custom media elements (e.g., <media-player>) and import global TypeScript types:

js
  
    
  
jsx
  
    
  

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.

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.

  
    
  

This step is optional. VS Code (VSC) provides support for extending the known HTML entities through VSC Custom Data. Once set up, it enables autocomplete suggestions for custom player elements and on-hover information such as documentation and type data.

Screenshot of using VS Code custom data extension. The user has typed "media-" and autocomplete suggestions are showing for custom Vidstack elements.

  1. Create the VSC settings file at the root of your project directory:
terminal
  
    
  
  1. Add the custom HTML data file path to html.customData inside the newly created settings file:
.vscode/settings.json
  
    
  

You can skip this step since you're using the Default Layout.

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.

From here you’re free to explore the library.

Lastly, remember you’re not alone. You can reach out for help or to talk with other developers using Vidstack: