Advanced Video

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

<h1>Media Chrome - Advanced Video Usage Example</h1>

<media-controller id="mc" defaultsubtitles="" keyboardforwardseekoffset="15" keyboardbackwardseekoffset="5">
  <hls-video id="video" slot="media" src="https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8" stream-type="on-demand" preload="metadata" playsinline="" crossorigin="">
    <track default="" kind="metadata" label="thumbnails" src="https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/storyboard.vtt">
    <track default="" kind="chapters" src="https://media-chrome.mux.dev/examples/vanilla/vtt/elephantsdream/chapters.vtt">
  </hls-video>
  <img slot="poster" srcset="
      https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13&amp;width=640 640w,
      https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13&amp;width=960 960w,
      https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13&amp;width=1280 1280w,
      https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13 1920w
    " alt="Elephants Dream" decoding="async">
  <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-item>
      Audio
      <media-audio-track-menu slot="submenu" hidden="">
        <div slot="title">Audio</div>
      </media-audio-track-menu>
    </media-settings-menu-item>
  </media-settings-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-seek-backward-button seekoffset="5"></media-seek-backward-button>
    <media-seek-forward-button seekoffset="15"></media-seek-forward-button>
    <media-mute-button></media-mute-button>
    <media-time-display></media-time-display>
    <media-time-range></media-time-range>
    <media-duration-display></media-duration-display>
    <media-settings-menu-button></media-settings-menu-button>
    <media-pip-button></media-pip-button>
    <media-cast-button></media-cast-button>
    <media-airplay-button></media-airplay-button>
    <media-fullscreen-button></media-fullscreen-button>
  </media-control-bar>
</media-controller>
Open Sandbox