Version: 5.x

vm-captions

Renders and displays VTT cues by hooking into the textTracks player property. This is a simple implementation that can only handle rendering one text track, and one cue for the given track at a time (even if many are active). The active track can be changed by setting the mode of any track in the list to showing.

Be aware that after you set the text track mode to showing, the component will automatically set it to hidden to avoid double captions. This also means that this component is not recommended to be used in combination with the native HTML5 player controls.

Visual#

Vime captions component

Usage#

<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-captions></vm-captions>
</vm-ui>
</vm-player>

Properties#

PropertyDescriptionTypeDefault
hiddenWhether the captions should be visible or not.booleanfalse

CSS Custom Properties#

NameDescription
--vm-captions-cue-bg-colorThe background color of active cues.
--vm-captions-cue-border-radiusThe border radius of active cues.
--vm-captions-cue-paddingThe padding around active cues.
--vm-captions-font-sizeFont size of captions when device screen size is <768px.
--vm-captions-font-size-largeFont size of captions when device screen size is >992px.
--vm-captions-font-size-mediumFont size of captions when device screen size is >768px.
--vm-captions-font-size-xlargeFont size of captions when device screen size is >1200px.
--vm-captions-text-colorThe color of the captions text.
--vm-captions-z-indexThe position in the UI z-axis stack inside the player.

Dependencies#

Used by#