[TOC] > [github](https://github.com/muxinc/media-chrome) ## 概述 使用 Web 组件（原生自定义元素）完全定制媒体播放器控件。 * 与任何 javascript 框架兼容（React、Angular、Svelte 等） * 兼容`<video>`和`<audio>`元素以及[许多播放器](https://www.media-chrome.org/docs/en/media-element#compatible-media-elements)（YouTube、HLS.js 等） * 用于添加/删除控件的简单 HTML * 用简单的 CSS 来设置控件的样式  ## 示例 ``` <script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@4/+esm"></script> <media-controller> <video slot="media" src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4" crossorigin > <track label="thumbnails" default kind="metadata" src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt" /> </video> <media-control-bar> <media-play-button></media-play-button> <media-mute-button></media-mute-button> <media-volume-range></media-volume-range> <media-time-range></media-time-range> <media-pip-button></media-pip-button> <media-fullscreen-button></media-fullscreen-button> </media-control-bar> </media-controller> ```