Buttons
Caption Button
This component is used to toggle the visibility of the current captions text track.
Usage
The <media-caption-button>
component will toggle the mode
of the current captions text track when pressed by dispatching a media-text-track-change-request
event to the player. The mode will toggle between showing
and disabled
.
The aria-hidden='true'
attribute will be present on this element in the event no text tracks with a kind of captions
or subtitles
exists. The button's display
property will be set to none
, so it'll be removed from the layout; therefore, you should account for the button not being displayed in your design.
Key Shortcuts
Keyboard shortcuts can be specified either through the global key shortcuts config, or on the component like so:
👉 See the aria-keyshortcuts
docs for more information.
Custom Icons
Here's an example containing a custom enter and exit icon:
Tooltips
Tooltips can be provided like so:
Styling
You can override the default styles with CSS like so:
Focus
CSS Variables
See the toggle button CSS variables for simple customization of the default button and tooltip styles.
Tailwind
The following is a headless example using Tailwind:
Tooltips
The following extends the example above with tooltips:
Component API
Props
Name | Type |
---|---|
|
boolean
|
|
boolean
|
|
boolean
|
Events
Name | Type |
---|
Name | Description |
---|---|
|
Used to override the default caption on icon. |
|
Used to override the default caption off icon. |
CSS VarsLearn more about cssVars
Name | Type |
---|
CSS PartsLearn more about cssParts
Name | Description |
---|
Instance Props
Name | Type |
---|---|
|
readonly
boolean
|
Instance Methods
Name | Type |
---|