User Interface

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

player.html
<!-- Notice we turned off controls? We're supplying our own, so we hide the native ones. -->
<vime-player>
<vime-video cross-origin="true" poster="https://media.vimejs.com/poster.png">
<source
data-src="https://media.vimejs.com/720p.mp4"
type="video/mp4"
/>
<track
default
kind="subtitles"
src="https://media.vimejs.com/subs/english.vtt"
srclang="en"
label="English"
/>
</vime-video>
<!-- We've replaced the `<vime-ui>` element. -->
<!-- We can also turn off any features we don't want via properties. -->
<vime-default-ui no-click-to-play>
<!-- We can place our own UI components here to extend the default UI. -->
</vime-default-ui>
</vime-player>

Glorious! Here's the result so far πŸ₯ ...


tip

Remember to load the default player theme or you might see something you regret 😱

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vime/core@^4/themes/default.css" />

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 in the 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...

caution

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:

player.html
<vime-player>
<vime-video cross-origin="true" poster="https://media.vimejs.com/poster.png">
<source
data-src="https://media.vimejs.com/720p.mp4"
type="video/mp4"
/>
<track
default
kind="subtitles"
src="https://media.vimejs.com/subs/english.vtt"
srclang="en"
label="English"
/>
</vime-video>
<vime-ui>
<!-- Vime components. -->
<vime-click-to-play></vime-click-to-play>
<vime-spinner></vime-spinner>
<!-- Custom web component. -->
<tap-sides-to-seek></tap-sides-to-seek>
</vime-ui>
</vime-player>

Glorious! Here's the result πŸ₯ ...

tip

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!