Skip to main content
Version: 4.x

vime-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#

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

Properties#

PropertyAttributeDescriptionTypeDefault
alwaysShowHoursalways-show-hoursWhether 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
hideTooltiphide-tooltipWhether the tooltip should not be displayed.booleanfalse
noKeyboardno-keyboardPrevents 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.

Dependencies#

Used by#

Depends on#

Graph#

graph TD;
vime-scrubber-control --> vime-slider
vime-scrubber-control --> vime-tooltip
vime-default-controls --> vime-scrubber-control
style vime-scrubber-control fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS