Controls

Controls are interactable elements inside the player that can be used to either "control" the player and media playback like a play/pause button, or to perform some arbitrary action in relation to the media like a share button. So far we've seen that Vime comes with a default set of controls as part of the default UI, but how do we go about customizing them? Let's start by seeing how we can pass options into the default controls and then we'll create our own...

info

See the DefaultControls component documentation for more information on what properties you can pass in.

HTML

player.html

<vm-player>

<!-- ... -->

<!-- We turn off the controls that come with the default UI. -->

<vm-default-ui no-controls>

<!-- We setup the default controls and pass in any options. -->

<vm-default-controls

hide-on-mouse-leave

active-duration="2000"

></vm-default-controls>

</vm-default-ui>

</vm-player>

React

Player.tsx

import React from 'react';

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

function Player() {

return (

<Player>

{/* ... */}

{/* We turn off the controls that come with the default UI. */}

<DefaultUi noControls>

{/* We setup the default controls and pass in any options. */}

<DefaultControls hideOnMouseLeave activeDuration={2000} />

</DefaultUi>

</Player>

);

}

Vue

Player.vue

<template>

<Player>

<!-- ... -->

<!-- We turn off the controls that come with the default UI. -->

<DefaultUi noControls>

<!-- We setup the default controls and pass in any options. -->

<DefaultControls hideOnMouseLeave :activeDuration="2000" />

</DefaultUi>

</Player>

</template>

<script>

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

export default {

components: {

Player,

DefaultUi,

DefaultControls,

},

};

</script>

Svelte

Player.svelte

<Player>

<!-- ... -->

<!-- We turn off the controls that come with the default UI. -->

<DefaultUi noControls>

<!-- We setup the default controls and pass in any options. -->

<DefaultControls hideOnMouseLeave activeDuration="{2000}" />

</DefaultUi>

</Player>

<script lang="ts">

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

</script>

Stencil

player.tsx

class Player {

// ...

render() {

return (

<vm-player>

{/* ... */}

{/* We turn off the controls that come with the default UI. */}

<vm-default-ui noControls>

{/* We setup the default controls and pass in any options. */}

<vm-default-controls hideOnMouseLeave activeDuration={2000} />

</vm-default-ui>

</vm-player>

);

}

}

Angular

player.html

<vm-player>

<!-- ... -->

<!-- We turn off the controls that come with the default UI. -->

<vm-default-ui no-controls>

<!-- We setup the default controls and pass in any options. -->

<vm-default-controls

hide-on-mouse-leave

[active-duration]="2000"

></vm-default-controls>

</vm-default-ui>

</vm-player>

Glorious! Here's the result 🥁 ...

tip

Start playing the video and move your mouse outside of the player, the controls should now dissapear straight away.

So that's neat but sometimes the default set of controls doesn't fit your use case and you need to create your own. You can create your own set of controls similarly to how we created a custom UI in which we utilized predefined Vime UI components, and created our own when needed. Since the controls are part of the UI, we can look through the components in the Components > UI section in the sidebar (on your left) and pick and use whatever we need. The predefined controls are available in the Components > UI > Controls section. Using some of those components let's extend the default UI with our own set of controls...

info

The example below is only using predefined Vime controls, see the Control component documentation for an example of how to create a custom control.

HTML

player.html

<vm-player>

<!-- ... -->

<!-- We turn off the controls that come with the default UI. -->

<vm-default-ui no-controls>

<vm-scrim></vm-scrim>

<vm-controls full-width pin="topLeft">

<vm-control-spacer></vm-control-spacer>

<vm-mute-control></vm-mute-control>

</vm-controls>

<vm-controls pin="center">

<vm-playback-control

hide-tooltip

style="--vm-control-scale: 1.7;"

></vm-playback-control>

</vm-controls>

<vm-controls full-width pin="bottomLeft">

<vm-control-spacer></vm-control-spacer>

<vm-time-progress></vm-time-progress>

</vm-controls>

</vm-default-ui>

</vm-player>

React

Player.tsx

import React from 'react';

import {

Player,

DefaultUi,

Scrim,

Controls,

ControlSpacer,

MuteControl,

PlaybackControl,

TimeProgress,

} from '@vime/react';

function Player() {

return (

<Player>

{/* ... */}

{/* We turn off the controls that come with the default UI. */}

<DefaultUi noControls>

<Scrim />

<Controls fullWidth pin="topLeft">

<ControlSpacer />

<MuteControl />

</Controls>

<Controls pin="center">

<PlaybackControl hideTooltip style={{ '--vm-control-scale': 1.7 }} />

</Controls>

<Controls fullWidth pin="bottomLeft">

<ControlSpacer />

<TimeProgress />

</Controls>

</DefaultUi>

</Player>

);

}

Vue

Player.vue

<template>

<Player>

<!-- ... -->

<!-- We turn off the controls that come with the default UI. -->

<DefaultUi noControls>

<Scrim />

<Controls fullWidth pin="topLeft">

<ControlSpacer />

<MuteControl />

</Controls>

<Controls pin="center">

<PlaybackControl hideTooltip />

</Controls>

<Controls fullWidth pin="bottomLeft">

<ControlSpacer />

<TimeProgress />

</Controls>

</DefaultUi>

</Player>

</template>

<script>

import {

Player,

DefaultUi,

Scrim,

Controls,

ControlSpacer,

MuteControl,

PlaybackControl,

TimeProgress,

} from '@vime/vue';

export default {

components: {

Player,

DefaultUi,

Scrim,

Controls,

ControlSpacer,

MuteControl,

PlaybackControl,

TimeProgress,

},

};

</script>

<style>

vm-playback-control {

--vm-control-scale: 1.7;

}

</style>

Svelte

Player.svelte

<Player>

<!-- ... -->

<!-- We turn off the controls that come with the default UI. -->

<DefaultUi noControls>

<Scrim />

<Controls fullWidth pin="topLeft">

<ControlSpacer />

<MuteControl />

</Controls>

<Controls pin="center">

<PlaybackControl hideTooltip />

</Controls>

<Controls fullWidth pin="bottomLeft">

<ControlSpacer />

<TimeProgress />

</Controls>

</DefaultUi>

</Player>

<script lang="ts">

import {

Player,

DefaultUi,

Scrim,

Controls,

ControlSpacer,

MuteControl,

PlaybackControl,

TimeProgress,

} from '@vime/svelte';

</script>

<style>

:global(vm-playback-control) {

--vm-control-scale: 1.7;

}

</style>

Stencil

player.tsx

class Player {

// ...

render() {

return (

<vm-player>

{/* ... */}

{/* We turn off the controls that come with the default UI. */}

<vm-default-ui noControls>

<vm-scrim />

<vm-controls fullWidth pin="topLeft">

<vm-control-spacer />

<vm-mute-control />

</vm-controls>

<vm-controls pin="center">

<vm-playback-control

hideTooltip

style={{ '--vm-control-scale': '1.7' }}

/>

</vm-controls>

<vm-controls fullWidth pin="bottomLeft">

<vm-control-spacer />

<vm-time-progress />

</vm-controls>

</vm-default-ui>

</vm-player>

);

}

}

Angular

player.html

<vm-player>

<!-- ... -->

<!-- We turn off the controls that come with the default UI. -->

<vm-default-ui no-controls>

<vm-scrim></vm-scrim>

<vm-controls full-width pin="topLeft">

<vm-control-spacer></vm-control-spacer>

<vm-mute-control></vm-mute-control>

</vm-controls>

<vm-controls pin="center">

<vm-playback-control

hide-tooltip

style="--vm-control-scale: 1.7;"

></vm-playback-control>

</vm-controls>

<vm-controls full-width pin="bottomLeft">

<vm-control-spacer></vm-control-spacer>

<vm-time-progress></vm-time-progress>

</vm-controls>

</vm-default-ui>

</vm-player>

Glorious! Here's the result 🥁 ...

Of course the example hasn't been styled and needs more work but we'll leave that to you, and we'll learn more about it in the Styling guide. To summarize we've seen how to customize the default controls via properties, and how to extend the default UI with our own sets of controls. If we wanted to build our own UI from scratch, we could take the last example and place it inside Ui instead of DefaultUi, and we'd also need to add the Icons component to load the default icons. From here you should be able to easily put together your own controls. Also if you missed it, the Control component documentation re-creates the playback control, to demonstrate how you could create a completely custom control in your library/framework.

🚂  Let's move onto settings!