vm-playback-control

A control for toggling the playback state (play/pause) of the current media.

Visual

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<!-- ... -->

<vm-playback-control></vm-playback-control>

</vm-controls>

</vm-ui>

</vm-player>

React

import React from 'react';

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

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<Controls>

<PlaybackControl />

</Controls>

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls>

<PlaybackControl />

</Controls>

</Ui>

</Player>

</template>

<script>

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

export default {

components: {

Player,

Ui,

Controls,

PlaybackControl,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls>

<PlaybackControl />

</Controls>

</Ui>

</Player>

<script lang="ts">

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

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-controls>

<vm-playback-control />

</vm-controls>

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<!-- ... -->

<vm-playback-control></vm-playback-control>

</vm-controls>

</vm-ui>

</vm-player>

Properties

Property	Description	Type	Default
hideTooltip	Whether the tooltip should not be displayed.	boolean	false
icons	The name of an icon library to use. Defaults to the library defined by the icons player property.	string ∣ undefined	undefined
keys	A slash (/) separated string of JS keyboard keys (KeyboardEvent.key), that when caught in a keydown event, will trigger a click event on the control.	string ∣ undefined	'k'
pauseIcon	The name of the pause icon to resolve from the icon library.	string	'pause'
playIcon	The name of the play icon to resolve from the icon library.	string	'play'
tooltipDirection	The direction in which the tooltip should grow.	"left" ∣ "right" ∣ undefined	undefined
tooltipPosition	Whether the tooltip is positioned above/below the control.	"bottom" ∣ "top"	'top'

Dependencies

Used by

• vm-default-controls

Depends on

• vm-control
• vm-icon
• vm-tooltip