vime-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

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

Properties

PropertyAttributeDescriptionTypeDefault
controlsHeightcontrols-heightThe height of any lower control bar in pixels so that the captions can reposition when it's active.number0
hiddenhiddenWhether the captions should be visible or not.booleanfalse

Events

EventDescriptionType
vCuesChangeEmitted when the active cues change. A cue is active when currentTime >= cue.startTime && currentTime <= cue.endTime.CustomEvent<TextTrackCue[]>
vTrackChangeEmitted when the current track changes.CustomEvent<TextTrack โˆฃ undefined>

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

Graph

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

Built with StencilJS