Skip to main content
Version: 4.x

Player

Everything starts with the player component, which wraps all providers, plugins (coming soon) and UI components together. It's responsible for holding the state of the player such as whether to autoplay or show controls, and the state of media playback such as the current time or duration. This is the primary component you will interact with similar to the audio and video HTML5 elements, and for simple needs you wont need to go much further than this.

Let's setup the "shell" of the player so we can start laying out the rest of it:

player.html
<vm-player>
<!-- Provider component is placed here. -->
<vm-ui>
<!-- UI components are placed here. -->
</vm-ui>
</vm-player>

All the player properties, methods, events and CSS properties are listed and demonstrated in the player component API document, so feel free to dig through and see what power lays ahead. There are also simple examples setup on our GitHub so you can get a feel of the player quickly:

๐Ÿš‚ ย Let's move onto setting up our provider!