Skip to main content
Version: 4.x

vime-default-ui

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

Visuals#

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

Audio#

Vime default audio player

Desktop Video#

Vime default desktop video player

Mobile Video#

Vime default desktop mobile player

Usage#

<vime-player>  <!-- ... -->  <vime-default-ui></vime-default-ui></vime-player>

Properties#

PropertyAttributeDescriptionTypeDefault
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

Slots#

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

Dependencies#

Used by#

Depends on#

Graph#

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