Media Chrome

The <media-cast-button> component allows users to open the Cast menu to select a Chromecast-enabled device or stop casting once a session has started.

Requirements:

• Requires a <castable-video> element or a custom media element that implements the CastableMedia interface (e.g., <mux-video>).
• Google Cast support is only available in Chromium-based browsers.

Behavior:

• When not casting, the enter slot is displayed.
• When currently casting, the exit slot is displayed.

<media-controller>
  <castable-video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></castable-video>
  <media-cast-button></media-cast-button>
</media-controller>

You can replace the default icons in <media-fullscreen-button> using specific slots:

• enter slot: Content displayed when the media is not fullscreen.
• exit slot: Content displayed when the media is fullscreen.
• icon slot: A single element used to represent both states (useful for animated icons or single-element transitions).

To use enter and exit slots, provide separate elements for each.

<media-fullscreen-button>
  <span slot="enter">Enter</span>
  <span slot="exit">Exit</span>
</media-fullscreen-button>

The <media-play-button> component toggles playback of media content. It automatically updates its displayed content based on the media playback state.

• When media is playing, it displays the contents of the pause slot.
• When media is paused, it displays the contents of the play slot.

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-play-button></media-play-button>
</media-controller>

While <media-volume-range> does not expose configuration attributes, it automatically applies Media UI Attributes when the volume state changes. You can use these attributes as CSS selectors to apply conditional styling.

Common use cases:

• Hiding the component when volume is unavailable using [mediavolumeunavailable].
• Changing styles when the media is muted using [mediamuted].

/* Hide the volume range if volume is unavailable */
media-volume-range[mediavolumeunavailable] {
  display: none;
}

/* Set background to red if the media is muted */
media-volume-range[mediamuted] {
  --media-control-background: red;
}

The <media-pip-button> component toggles picture-in-picture (PiP) mode for media. It automatically updates its displayed content based on the current PiP state.

Note that PiP support varies by browser; if the browser does not support PiP, the button may not function.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-pip-button></media-pip-button>
</media-controller>

To use themes in Media Chrome, you must import both the core library and the specific theme element module.

import "media-chrome";
import "media-chrome/media-theme-element";