Version: 5.x

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#

Vime scrubber control component

Usage#

<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-controls>
<!-- ... -->
<vm-scrubber-control></vm-scrubber-control>
</vm-controls>
</vm-ui>
</vm-player>

Properties#

PropertyDescriptionTypeDefault
alwaysShowHoursWhether 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).booleanfalse
hideTooltipWhether the tooltip should not be displayed.booleanfalse
noKeyboardPrevents seeking forward/backward by using the Left/Right arrow keys.booleanfalse

CSS Custom Properties#

NameDescription
--vm-scrubber-buffered-bgThe background color of the section that indicates how much of the media has been buffered.
--vm-scrubber-loading-stripe-colorThe color of each candystripe displayed when media is buffering.
--vm-scrubber-loading-stripe-sizeThe size of each candystripe displayed when media is buffering.
--vm-scrubber-tooltip-spacingThe space between the tooltip and the scrubber.

Dependencies#

Used by#

Depends on#