Version: 4.x


This component is a shorthand way to setup the entire default vime user interface, such as controls, settings, captions and so on.


There are also alternative interfaces for live media, and the light player theme, but they're not shown here for the sake of brevity.


Vime default audio player

Desktop Video#

Vime default desktop video player

Mobile Video#

Vime default desktop mobile player


<!-- ... -->


noCaptionsno-captionsWhether the custom captions UI should not be loaded.booleanfalse
noClickToPlayno-click-to-playWhether clicking the player should not toggle playback.booleanfalse
noControlsno-controlsWhether the custom default controls should not be loaded.booleanfalse
noDblClickFullscreenno-dbl-click-fullscreenWhether double clicking the player should not toggle fullscreen mode.booleanfalse
noIconsno-iconsWhether the default icons should not be loaded.booleanfalse
noPosterno-posterWhether the custom poster UI should not be loaded.booleanfalse
noSettingsno-settingsWhether the custom default settings menu should not be loaded.booleanfalse
noSkeletonno-skeletonWhether the skeleton loading animation should be shown while the player is loading.booleanfalse
noSpinnerno-spinnerWhether the custom spinner UI should not be loaded.booleanfalse


Used to extend the default user interface with custom UI components.


Used by#

Depends on#


graph TD;
vime-default-ui --> vime-ui
vime-default-ui --> vime-icons
vime-default-ui --> vime-skeleton
vime-default-ui --> vime-click-to-play
vime-default-ui --> vime-dbl-click-fullscreen
vime-default-ui --> vime-captions
vime-default-ui --> vime-poster
vime-default-ui --> vime-spinner
vime-default-ui --> vime-default-controls
vime-default-ui --> vime-default-settings
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-settings --> vime-menu-item
vime-default-settings --> vime-menu-radio
vime-default-settings --> vime-submenu
vime-default-settings --> vime-menu-radio-group
vime-default-settings --> vime-settings
vime-menu-item --> vime-icon
vime-menu-radio --> vime-menu-item
vime-submenu --> vime-menu-item
vime-submenu --> vime-menu
vime-settings --> vime-menu
vime-playground --> vime-default-ui
style vime-default-ui fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS