Skip to main content
Version: 4.x

vime-controls

Responsible for positioning and laying out individual/groups of controls.

Visual#

Vime controls component

Usage#

<vime-player>
<!-- ... -->
<vime-ui>
<!-- ... -->
<vime-controls full-width active-duration="3200">
<!-- ... -->
</vime-controls>
</vime-ui>
</vime-player>

Properties#

PropertyAttributeDescriptionTypeDefault
activeDurationactive-durationThe length in milliseconds that the controls are active for before fading out. Audio players are not effected by this prop.number2750
alignalignSets the align-items flex property that aligns the individual controls on the cross-axis."center" ∣ "end" ∣ "start"'center'
directiondirectionSets the flex-direction property that manages the direction in which the controls are layed out."column" ∣ "row"'row'
fullHeightfull-heightWhether the controls container should be 100% height. This has no effect if the view is of type audio.booleanfalse
fullWidthfull-widthWhether the controls container should be 100% width. This has no effect if the view is of type audio.booleanfalse
hiddenhiddenWhether the controls are visible or not.booleanfalse
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
justifyjustifySets the justify-content flex property that aligns the individual controls on the main-axis."center" ∣ "end" ∣ "space-around" ∣ "space-between" ∣ "space-evenly" ∣ "start"'start'
pinpinPins the controls to the defined position inside the video player. This has no effect when the view is of type audio."bottomLeft" ∣ "bottomRight" ∣ "center" ∣ "topLeft" ∣ "topRight"'bottomLeft'
waitForPlaybackStartwait-for-playback-startWhether the controls should wait for playback to start before being shown. Audio players are not effected by this prop.booleanfalse

Slots#

SlotDescription
Used to pass in controls.

CSS Custom Properties#

NameDescription
--vm-controls-bgThe background color of the controls.
--vm-controls-paddingThe padding inside the controls.
--vm-controls-spacingThe space between controls.
--vm-controls-z-indexThe position in the UI z-axis stack inside the player.

Dependencies#

Used by#

Graph#

graph TD;
vime-default-controls --> vime-controls
style vime-controls fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS