Default set of controls for when you're in a hurry. The controls displayed depend on whether the media is audio/video/live, and whether the device is mobile/desktop. See vime-default-ui for visuals.


<!-- ... -->
<!-- ... -->
<vime-default-controls active-duration="2750"></vime-default-controls>


activeDurationactive-durationThe length in milliseconds that the controls are active for before fading out. Audio players are not effected by this prop.number2750
hideOnMouseLeavehide-on-mouse-leaveWhether the controls should hide when the mouse leaves the player. Audio players are not effected by this prop.booleanfalse
hideWhenPausedhide-when-pausedWhether the controls should show/hide when paused. Audio players are not effected by this prop.booleanfalse
waitForPlaybackStartwait-for-playback-startWhether the controls should wait for playback to start before being shown. Audio players are not effected by this prop.booleanfalse


Used by

Depends on


graph TD;
vime-default-controls --> vime-controls
vime-default-controls --> vime-playback-control
vime-default-controls --> vime-volume-control
vime-default-controls --> vime-current-time
vime-default-controls --> vime-control-spacer
vime-default-controls --> vime-scrubber-control
vime-default-controls --> vime-live-indicator
vime-default-controls --> vime-end-time
vime-default-controls --> vime-settings-control
vime-default-controls --> vime-control-group
vime-default-controls --> vime-fullscreen-control
vime-default-controls --> vime-scrim
vime-default-controls --> vime-caption-control
vime-default-controls --> vime-time-progress
vime-default-controls --> vime-pip-control
vime-playback-control --> vime-control
vime-playback-control --> vime-icon
vime-playback-control --> vime-tooltip
vime-volume-control --> vime-mute-control
vime-volume-control --> vime-slider
vime-mute-control --> vime-control
vime-mute-control --> vime-icon
vime-mute-control --> vime-tooltip
vime-current-time --> vime-time
vime-scrubber-control --> vime-slider
vime-scrubber-control --> vime-tooltip
vime-end-time --> vime-time
vime-settings-control --> vime-control
vime-settings-control --> vime-icon
vime-settings-control --> vime-tooltip
vime-fullscreen-control --> vime-control
vime-fullscreen-control --> vime-icon
vime-fullscreen-control --> vime-tooltip
vime-caption-control --> vime-control
vime-caption-control --> vime-icon
vime-caption-control --> vime-tooltip
vime-time-progress --> vime-current-time
vime-time-progress --> vime-end-time
vime-pip-control --> vime-control
vime-pip-control --> vime-icon
vime-pip-control --> vime-tooltip
vime-default-ui --> vime-default-controls
style vime-default-controls fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS