vm-scrubber-control

A control that displays the progression of playback and the amount buffered on a horizontal timeline. The timeline is a slider (input[type="range"]) that can be used to change the current playback time.

If the player is buffering, the scrubber will display an animated candystripe in the porition of the timeline that has not buffered.

Visual

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<!-- ... -->

<vm-scrubber-control></vm-scrubber-control>

</vm-controls>

</vm-ui>

</vm-player>

React

import React from 'react';

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

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<Controls>

<ScrubberControl />

</Controls>

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls>

<ScrubberControl />

</Controls>

</Ui>

</Player>

</template>

<script>

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

export default {

components: {

Player,

Ui,

Controls,

ScrubberControl,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls>

<ScrubberControl />

</Controls>

</Ui>

</Player>

<script lang="ts">

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

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-controls>

<vm-scrubber-control />

</vm-controls>

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<!-- ... -->

<vm-scrubber-control></vm-scrubber-control>

</vm-controls>

</vm-ui>

</vm-player>

Properties

Property	Description	Type	Default
alwaysShowHours	Whether the timestamp in the tooltip should show the hours unit, even if the time is less than 1 hour (eg: 20:35 -> 00:20:35).	boolean	false
hideTooltip	Whether the tooltip should not be displayed.	boolean	false
noKeyboard	Prevents seeking forward/backward by using the Left/Right arrow keys.	boolean	false

CSS Custom Properties

Name	Description
--vm-scrubber-buffered-bg	The background color of the section that indicates how much of the media has been buffered.
--vm-scrubber-loading-stripe-color	The color of each candystripe displayed when media is buffering.
--vm-scrubber-loading-stripe-size	The size of each candystripe displayed when media is buffering.
--vm-scrubber-tooltip-spacing	The space between the tooltip and the scrubber.

Dependencies

Used by

• vm-default-controls

Depends on

• vm-slider
• vm-tooltip