vm-default-controls

Default set of controls for when you're in a hurry. The controls displayed depend on whether the media is audio/video/live, and whether the device is mobile/desktop. See vime-default-ui for visuals.

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-default-controls active-duration="2750"></vm-default-controls>

</vm-ui>

</vm-player>

React

import React from 'react';

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

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<DefaultControls activeDuration={3200} />

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<DefaultControls :activeDuration="3200" />

</Ui>

</Player>

</template>

<script>

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

export default {

components: {

Player,

Ui,

DefaultControls,

},

};

</script>

Svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<DefaultControls activeDuration={3200} />

</Ui>

</Player>

<script lang="ts">

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

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-default-controls activeDuration={3200} />

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-default-controls [active-duration]="2750"></vm-default-controls>

</vm-ui>

</vm-player>

Properties

Property	Description	Type	Default
activeDuration	The length in milliseconds that the controls are active for before fading out. Audio players are not effected by this prop.	number	2750
hideOnMouseLeave	Whether the controls should hide when the mouse leaves the player. Audio players are not effected by this prop.	boolean	false
hideWhenPaused	Whether the controls should show/hide when paused. Audio players are not effected by this prop.	boolean	false
waitForPlaybackStart	Whether the controls should wait for playback to start before being shown. Audio players are not effected by this prop.	boolean	false

Dependencies

Used by

• vm-default-ui

Depends on

• vm-controls
• vm-playback-control
• vm-volume-control
• vm-current-time
• vm-control-spacer
• vm-scrubber-control
• vm-live-indicator
• vm-end-time
• vm-settings-control
• vm-scrim
• vm-caption-control
• vm-fullscreen-control
• vm-control-group
• vm-time-progress
• vm-pip-control