<media-captions-button>

The <media-captions-button> component is used to toggle captions and subtitles on and off. When turning on captions and subtitles, captions tracks will be preferred over subtitles tracks, but either type will be used.

The contents of the <media-captions-button> will update based on the text track media state.

• When any captions or subtitles tracks are enabled, the component will display the contents of the on slot.
• When all captions and subtitles tracks are disabled, the component will display the contents of the off slot.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
    <track label="English" kind="captions" srclang="en" src='https://media-chrome.mux.dev/examples/vanilla/vtt/en-cc.vtt' />
  </video>
  <media-captions-button></media-captions-button>
</media-controller>

You can modify the contents of the <media-captions-button> component using slots. This is useful if you’d like to use your own custom captions button instead of the default one provided by media-chrome.

Here’s an example of how you can replace the default on and off icons with CC and CC. Media Controller also enables captions and subtitles using the defaultsubtitles attribute.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
    <track label="English" kind="captions" srclang="en" src='https://media-chrome.mux.dev/examples/vanilla/vtt/en-cc.vtt' />
  </video>
  <media-captions-button>
    <span slot="on"><b><u>CC</u></b></span>
    <span slot="off" style="font-weight: 400;">CC</span>
  </media-captions-button>
</media-controller>

Alternatively, if you would like to use a single element you could use the icon slot instead. This is useful for creating an animated icon that transitions between states. Here’s a basic example that uses CSS to control how it looks.

.my-icon {
  transition: all .5s;
  font-weight: 400;
  border-radius: 5px;
}

media-captions-button[aria-checked=true] .my-icon {
  font-weight: 700;
  text-decoration: underline;
  color: red;
}

The <media-captions-button> doesn’t expose any configuration attributes. However, it will be updated with Media UI Attributes any time the selected caption or subtitle changes.

You can use these attributes to style the button. For example, if there aren’t any subtitles, hide the button

media-captions-button:not([mediasubtitleslist]) {
  display: none;
}

Or make the background blue if a captions is showing.

media-captions-button[mediasubtitlesshowing] {
  --media-control-background: blue;
}

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.