Settings Menu

<script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-video/+esm"></script>

<h1>MediaSettingsMenu</h1>

<h2>Toggling menu-item children</h2>

<media-controller defaultsubtitles="">
  <mux-video slot="media" src="https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8" poster="https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13" stream-type="on-demand" preload="none" playsinline="" crossorigin=""></mux-video>
  <media-loading-indicator slot="centered-chrome" noautohide=""></media-loading-indicator>
  <media-settings-menu anchor="auto" hidden="">
    <media-settings-menu-item>
      Speed
      <media-playback-rate-menu slot="submenu" hidden="">
        <div slot="title">Speed</div>
      </media-playback-rate-menu>
    </media-settings-menu-item>
    <media-settings-menu-item>
      Quality
      <media-rendition-menu slot="submenu" hidden="">
        <div slot="title">Quality</div>
      </media-rendition-menu>
    </media-settings-menu-item>
    <media-settings-menu-item>
      Captions
      <media-captions-menu slot="submenu" hidden="">
        <div slot="title">Captions</div>
      </media-captions-menu>
    </media-settings-menu-item>
  </media-settings-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-mute-button></media-mute-button>
    <media-time-range></media-time-range>
    <media-time-display></media-time-display>
    <media-settings-menu-button></media-settings-menu-button>
    <media-pip-button></media-pip-button>
    <media-fullscreen-button></media-fullscreen-button>
  </media-control-bar>
</media-controller>

<h1>MediaChromeDialog</h1>

<h2>menu children</h2>

<media-controller defaultsubtitles="">
  <mux-video slot="media" src="https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8" poster="https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13" preload="metadata" muted="" crossorigin=""></mux-video>
  <media-loading-indicator slot="centered-chrome" noautohide=""></media-loading-indicator>
  <media-chrome-dialog id="settings" style="position: absolute; top: 5%;" hidden="">
    <media-captions-menu>
      <div slot="header">Captions</div>
    </media-captions-menu>
    <media-rendition-menu>
      <div slot="header">Quality</div>
    </media-rendition-menu>
    <media-playback-rate-menu>
      <div slot="header">Playback Speed</div>
    </media-playback-rate-menu>
  </media-chrome-dialog>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-mute-button></media-mute-button>
    <media-time-range></media-time-range>
    <media-time-display></media-time-display>
    <media-rendition-selectmenu></media-rendition-selectmenu>
    <!-- Link menu button and menu with invoketarget<->id -->
    <media-settings-menu-button invoketarget="settings"></media-settings-menu-button>
    <media-fullscreen-button></media-fullscreen-button>
  </media-control-bar>
</media-controller>
Open on CodeSandboxOpen Sandbox