muxinc/media-chrome

这是什么？

核心功能

• 01基于原生自定义元素构建，不依赖特定框架。
• 02兼容标准 video 和 audio 元素及多种第三方播放器。
• 03通过普通 HTML 标签增删播放控件。
• 04使用普通 CSS 进行样式定制。
• 05为核心元素提供 React 封装组件。

适用场景

• 为网站打造与整体设计风格一致的自定义视频播放器。
• 在使用多种播放器库的站点上统一播放控件。
• 在 Web 应用中为音频添加播放、拖动进度和倍速等控件。

快速上手

1. 1

   在 HTML 页面中通过模块脚本标签从 jsDelivr CDN 加载 Media Chrome

2. 2

   将 video 或 audio 元素包裹在 media-controller 中，并添加带有控件元素的 media-control-bar

使用前须知

• !README 建议新项目使用 Video.js，Media Chrome 与其一同维护。

收录于专题

标签

常见问题

media-chrome 是什么？

基于原生 Web Components 构建的可定制音视频播放器控件，兼容任意 JavaScript 框架。 Media Chrome 是一组原生自定义元素，用于构建音视频播放器控件，包括播放按钮、音量和进度条、全屏及画中画切换等。控件就是普通的 HTML 标签，增删只需修改标记，样式用常规 CSS 编写。

media-chrome 可以免费使用吗？用的什么许可证？

media-chrome 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

media-chrome 还在维护吗？

活跃维护中。media-chrome 最近一次提交是在 2026年10月23日。

media-chrome 适合用来做什么？

为网站打造与整体设计风格一致的自定义视频播放器。 在使用多种播放器库的站点上统一播放控件。 在 Web 应用中为音频添加播放、拖动进度和倍速等控件。

media-chrome 怎么安装和运行？

在 HTML 页面中通过模块脚本标签从 jsDelivr CDN 加载 Media Chrome 将 video 或 audio 元素包裹在 media-controller 中，并添加带有控件元素的 media-control-bar

在哪里获取 media-chrome？

源代码和安装说明在 GitHub 上：https://github.com/muxinc/media-chrome