media-chrome 視頻播放器 · PHP/Python/前端/Linux 等等學習筆記

[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 來設置控件的樣式 ![](https://github.com/muxinc/media-chrome/raw/main/docs/public/assets/media-chrome-video-player.jpeg) ## 示例 ``` <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> ```