Providers are responsible for loading players/media and controlling it. For example, the
YouTube provider sets up the YouTube player embed
and loads a video through it, which we can then control through the player component. Providers are the only
component the player interacts with directly through the
interface, which enables the player to speak in a common shared language with them. As properties
change on the player, they are updated by calling the corresponding method on the provider. For
example, if you do
player.currentTime = 50 then a
provider.setCurrentTime(50) call is required,
which the player will automatically do on the next render cycle. On the other end, the provider will
emit a "special" event called
vProviderChange for when the player needs to update its state. All
other components emit updates through the
vStateChange event, but providers use a special event
to avoid ending up in an infinite cycle where the player updates the provider, and the provider updates
the player until the death of our sun ☀️ and end of our solar system 🪐
Now that we got past some of the basic details on how it works and an existential crisis, let's set
one up! Let's assume we want to load and play a basic
mp4 video. If we look through the providers
Components > Providers section in the sidebar (on your left), we see there is a
Video provider which can help us do exactly what we need.
Glorious! Here's the result so far 🥁 ...
Now, this is as basic as it gets but it lays the foundation for us to start customizing the player to
our needs. If you need to support a different type of media, you can follow the same steps of checking
the available providers in the
Components section, picking whichever supports the required media
type, and following the usage guide to set it up.
One last thing before we move on, everything is typed and documented in Vime, so feel free to hover over properties/methods/events in your IDE to get some additional information about it.
🚂 Let's move onto customizing the user interface!