<h1>Media Chrome - Advanced Video Usage Example</h1> <media-controller defaultsubtitles="" defaultduration="134"> <video slot="media" src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4" muted="" crossorigin="" playsinline="" preload="none"> <track label="thumbnails" default="" kind="metadata" src="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/storyboard.vtt"> <track label="English" kind="captions" srclang="en" src="./vtt/en-cc.vtt"> </video> <media-poster-image slot="poster" src="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.jpg" placeholdersrc="data:image/jpeg;base64,/9j/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAUADADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECBAP/xAAdEAEBAAEEAwAAAAAAAAAAAAAAARECAxITFCFR/8QAGQEAAwADAAAAAAAAAAAAAAAAAAEDAgQF/8QAGBEBAQEBAQAAAAAAAAAAAAAAAAETERL/2gAMAwEAAhEDEQA/ANeC4ldyI1b2EtIzzrrIqYZLvl5FGkGdbfQzGPvo76WsPxXLlfqbaA5va2iVJADgPELACsD/2Q=="></media-poster-image> <media-loading-indicator slot="centered-chrome" noautohide=""></media-loading-indicator> <media-control-bar> <media-play-button></media-play-button> <media-seek-backward-button seekoffset="30"></media-seek-backward-button> <media-seek-forward-button seekoffset="30"></media-seek-forward-button> <media-mute-button></media-mute-button> <media-volume-range></media-volume-range> <media-time-range></media-time-range> <media-time-display showduration="" remaining=""></media-time-display> <media-captions-button></media-captions-button> <media-playback-rate-button></media-playback-rate-button> <media-pip-button></media-pip-button> <media-fullscreen-button></media-fullscreen-button> <media-airplay-button></media-airplay-button> </media-control-bar> </media-controller>