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

HTML

player.html

<!-- Notice we turned off controls? We're supplying our own, so we hide the native ones. -->

<vm-player>

<vm-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"

/>

</vm-video>

<!-- We've replaced the `<vm-ui>` element. -->

<!-- We can also turn off any features we don't want via properties. -->

<vm-default-ui no-click-to-play>

<!-- We can place our own UI components here to extend the default UI. -->

</vm-default-ui>

</vm-player>

React

Player.tsx

import React from 'react';

import { Player, Video, DefaultUi } from '@vime/react';

function Player() {

return (

{/* Notice we turned off controls? We're supplying our own, so we hide the native ones. */}

<Player>

<Video crossOrigin="" 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"

/>

</Video>

{/* We've replaced the `<Ui />` component. */}

{/* We can turn off any features we don't want via properties. */}

<DefaultUi noClickToPlay>

{/* We can place our own UI components here to extend the default UI. */}

</DefaultUi>

</Player>

);

}

Vue

Player.vue

<template>

<!-- Notice we turned off controls? We're supplying our own, so we hide the native ones. -->

<Player>

<video crossorigin="" 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"

/>

</video>

<!-- We've replaced the `<Ui />` component. -->

<!-- We can turn off any features we don't want via properties. -->

<DefaultUi noClickToPlay>

<!-- We can place our own UI components here to extend the default UI. -->

</DefaultUi>

</Player>

</template>

<script>

import { Player, Video, DefaultUi } from '@vime/vue';

export default {

components: {

Player,

Video,

DefaultUi,

},

};

</script>

Svelte

Player.svelte

<!-- Notice we turned off controls? We're supplying our own, so we hide the native ones. -->

<Player>

<video crossorigin="" 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"

/>

</video>

<!-- We've replaced the `<Ui />` component. -->

<!-- We can turn off any features we don't want via properties. -->

<DefaultUi noClickToPlay>

<!-- We can place our own UI components here to extend the default UI. -->

</DefaultUi>

</Player>

<script lang="ts">

import { Player, Video, DefaultUi } from '@vime/svelte';

</script>

Stencil

player.tsx

class Player {

// ...

render() {

return (

{/* Notice we turned off controls? We're supplying our own, so we hide the native ones. */}

<vm-player>

<vm-video crossOrigin="" 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"

/>

</vm-video>

{/* We've replaced the `<vm-ui>` component. */}

{/* We can turn off any features we don't want via properties. */}

<vm-default-ui noClickToPlay>

{/* We can place our own UI components here to extend the default UI. */}

</vm-default-ui>

</vm-player>

);

}

}

Angular

player.html

<!-- Notice we turned off controls? We're supplying our own, so we hide the native ones. -->

<vm-player>

<vm-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"

/>

</vm-video>

<!-- We've replaced the `<vm-ui>` element. -->

<!-- We can also turn off any features we don't want via properties. -->

<vm-default-ui no-click-to-play>

<!-- We can place our own UI components here to extend the default UI. -->

</vm-default-ui>

</vm-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@^5/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...

HTML

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:

• Google Developers - Web Components
• MDN - Web Components
• CSS Tricks - Introduction to Web Components
• Robinwieruch - Web Component Tutorial for Beginners

player.html

<vm-player>

<vm-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"

/>

</vm-video>

<vm-ui>

<!-- Vime components. -->

<vm-click-to-play></vm-click-to-play>

<vm-spinner></vm-spinner>

<vm-poster></vm-poster>

<!-- Custom web component. -->

<tap-sides-to-seek></tap-sides-to-seek>

</vm-ui>

</vm-player>

React

info

You can view the custom TapSidesToSeek component here.

Player.tsx

import React from 'react';

import { Player, Video, Ui, ClickToPlay, Spinner, Poster } from '@vime/react';

import TapSidesToSeek from './TapSidesToSeek';

function Player() {

return (

<Player>

<Video crossOrigin="" 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"

/>

</Video>

<Ui>

{/* Vime components. */}

<ClickToPlay />

<Spinner />

<Poster />

{/* Custom component. */}

<TapSidesToSeek />

</Ui>

</Player>

);

}

Vue

info

You can view the custom TapSidesToSeek component here.

Player.vue

<template>

<!-- Notice we turned off controls? We're supplying our own, so we hide the native ones. -->

<Player>

<video crossorigin="" 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"

/>

</video>

<Ui>

<!-- Vime components. -->

<ClickToPlay />

<Spinner />

<Poster />

<!-- Custom component. -->

<TapSidesToSeek />

</Ui>

</Player>

</template>

<script>

import { Player, Video, Ui, ClickToPlay, Spinner, Poster } from '@vime/vue';

import TapSidesToSeek from './TapSidesToSeek.vue';

export default {

components: {

Player,

Video,

Ui,

ClickToPlay,

Spinner,

Poster,

TapSidesToSeek,

},

};

</script>

Svelte

info

You can view the custom TapSidesToSeek component here.

Player.svelte

<Player>

<Video crossorigin="" 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"

/>

</Video>

<Ui>

<!-- Vime components. -->

<ClickToPlay />

<Spinner />

<Poster />

<!-- Custom component. -->

<TapSidesToSeek />

</Ui>

</Player>

<script lang="ts">

import {

Player,

Video,

Ui,

ClickToPlay,

Spinner,

Poster,

} from '@vime/svelte';

import TapSidesToSeek from './TapSidesToSeek.svelte';

</script>

Stencil

info

You can view the custom <tap-sides-to-seek> component here.

player.tsx

class Player {

// ...

render() {

return (

<vm-player>

<vm-video crossOrigin="" 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"

/>

</vm-video>

<vm-ui>

{/* Vime components. */}

<vm-click-to-play />

<vm-spinner />

<vm-poster />

{/* Custom component. */}

<tap-sides-to-seek />

</vm-ui>

</vm-player>

);

}

}

Angular

info

You can view the custom <tap-sides-to-seek> component here.

player.html

<vm-player>

<vm-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"

/>

</vm-video>

<vm-ui>

<!-- Vime components. -->

<vm-click-to-play></vm-click-to-play>

<vm-spinner></vm-spinner>

<vm-poster></vm-poster>

<!-- Custom component. -->

<tap-sides-to-seek></tap-sides-to-seek>

</vm-ui>

</vm-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!