UI components are visually displayed elements inside the media player that may be interactable such as a playback control or slider, or they may be simple visual feedback such as the length of the media (duration). It can be quite time consuming and challenging to setup an entire interface for a video player, so let's start by using the default UI given to us out of the box...
Glorious! Here's the result so far 🥁 ...
Remember to load the default player theme or you might see something you regret 😱
Just like that we've setup an interface for audio/video/live media that looks good on both mobile/desktop and is ARIA friendly... not bad 😎
What if we want to put together our own UI? We can easily achieve this by mixing together predefined
components by Vime and creating our own. Let's say we only wanted to be able to click the player to toggle
playback, and to able to tap the sides to seek forward/backward. If we look through the components
Components > UI section in the sidebar (on your left), we see there is a
ClickToPlay component which solves our first requirement, but
nothing seems to match our second requirement. This calls for a custom component, so let's see
how we can go about putting this together...
The following HTML example is not complete, feel free to contribute by helping us complete it 🙂
Here's some links for you to learn about web components:
Glorious! Here's the result 🥁 ...
Click the player anywhere in the center region to toggle playback, and click to the sides to seek forwards and backwards.
So far we've seen how to setup our player and provider, load the default Vime interface and how to put together our own. It's important to keep in mind, that the examples so far have been kept simple on purpose, as they are focused mainly on getting you up and running... what you create and how far you take it is up to you.
🚂 Let's move onto controls!