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