vm-default-ui

This component is a shorthand way to setup the entire default vime user interface, such as controls, settings, captions and so on.

Visuals

There are also alternative interfaces for live media, and the light player theme, but they're not shown here for the sake of brevity.

Audio

Desktop Video

Mobile Video

Usage

HTML

<vm-player>

<!-- ... -->

<vm-default-ui></vm-default-ui>

</vm-player>

React

import React from 'react';

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

function Example() {

return (

<Player>

{/* ... */}

<DefaultUi />

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<DefaultUi />

</Player>

</template>

<script>

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

export default {

components: {

Player,

DefaultUi,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<DefaultUi />

</Player>

<script lang="ts">

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

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-default-ui />

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-default-ui></vm-default-ui>

</vm-player>

Properties

Property	Description	Type	Default
noCaptions	Whether the custom captions UI should not be loaded.	boolean	false
noClickToPlay	Whether clicking the player should not toggle playback.	boolean	false
noControls	Whether the custom default controls should not be loaded.	boolean	false
noDblClickFullscreen	Whether double clicking the player should not toggle fullscreen mode.	boolean	false
noLoadingScreen	Whether the default loading screen should not be loaded.	boolean	false
noPoster	Whether the custom poster UI should not be loaded.	boolean	false
noSettings	Whether the custom default settings menu should not be loaded.	boolean	false
noSpinner	Whether the custom spinner UI should not be loaded.	boolean	false

Slots

Slot	Description
	Used to extend the default user interface with custom UI components.

Dependencies

Depends on

• vm-ui
• vm-click-to-play
• vm-dbl-click-fullscreen
• vm-captions
• vm-poster
• vm-spinner
• vm-loading-screen
• vm-default-controls
• vm-default-settings