Skip to main content
Version: 5.x

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.

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.

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