Skip to main content
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


<vime-player>  <!-- ... -->  <vime-default-ui></vime-default-ui></vime-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