1. Buttons
  2. Caption Button

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.

          
        
DANGER

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:

css
        media-caption-button {
  color: pink;
  transition: opacity 0.2s ease-in;
}

/* Apply styles when captions is on. */
media-caption-button[data-pressed] {
}

/* Apply styles when captions is _not_ on. */
media-caption-button:not([data-pressed]) {
}

/* Apply styles when captions is not supported. */
media-caption-button[aria-hidden='true'] {
}

/* Style default icons. */
media-caption-button svg[slot='on'] {
}
media-caption-button svg[slot='off'] {
}

      

Focus

css
        media-caption-button {
  /* box shadow */
  --media-focus-ring: 0 0 0 4px rgb(78 156 246);
}

/* Apply styles when focused via keyboard. */
media-caption-button[data-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

disabled

boolean

defaultAppearance

boolean

defaultPressed

boolean

Events

Name Type
Name Description

on

Used to override the default caption on icon.

off

Used to override the default caption off icon.

Name Type
Name Description

Instance Props

Name Type

pressed

readonly boolean

Instance Methods

Name Type