vime-volume-control

A control for adjusting the volume of the player and toggling the muted state.

Visual

Vime volume control component

Usage

<vime-player>
<!-- ... -->
<vime-ui>
<!-- ... -->
<vime-controls>
<!-- ... -->
<vime-volume-control></vime-volume-control>
</vime-controls>
</vime-ui>
</vime-player>

Properties

PropertyAttributeDescriptionTypeDefault
hideTooltiphide-tooltipWhether the tooltip should be hidden.booleanfalse
highVolumeIconhigh-volume-iconThe URL to an SVG element or fragment.string'#vime-volume-high'
lowVolumeIconlow-volume-iconThe URL to an SVG element or fragment.string'#vime-volume-low'
muteKeysmute-keysA pipe (/) separated string of JS keyboard keys, that when caught in a keydown event, will toggle the muted state of the player.string ∣ undefined'm'
mutedIconmuted-iconThe URL to an SVG element or fragment.string'#vime-volume-mute'
noKeyboardno-keyboardPrevents the volume being changed using the Up/Down arrow keys.booleanfalse
tooltipDirectiontooltip-directionThe direction in which the tooltip should grow."left" ∣ "right" ∣ undefinedundefined
tooltipPositiontooltip-positionWhether the tooltip is positioned above/below the control."bottom" ∣ "top"'top'

Dependencies

Used by

Depends on

Graph

graph TD;
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-default-controls --> vime-volume-control
style vime-volume-control fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS