草莓播放器 · MuiPlayer：轻量全面

本篇介绍草莓播放器中的 MuiPlayer 方案。MuiPlayer 原生内置 HLS/FLV 解析，无需额外引库，非常轻量全面。

原出处

MuiPlayer 是一款 HTML5 视频播放器，特点是内置了 HLS、FLV 的解析能力，开箱即用。本项目在 MuiPlayer 官方仓库基础上，将 mui-player.min.js、mui-player.min.css 及 PC 桌面端扩展插件本地化到 mui/ 目录。

项目：MuiPlayer https://github.com/muiplayer/muiplayer
桌面端插件：mui-player-desktop-plugin（提供音量滑条 + 倍速设置组）

修改说明

参数入口：读取 ?url=，缺失时展示居中错误提示。
UI 精简：
- pageHead: false 非全屏时隐藏顶部操作栏（去掉左上角返回按钮）
- 覆盖 CSS 隐藏 .mui-player-back-button 返回按钮
- 调整 .mui-player-progress 等进度条 margin，使底部控件与进度条对齐
桌面端扩展：初始化前引入 mui-player-desktop-plugin.min.js，通过 plugins 注入，提供额外的音量调节滑条与播放速度（倍速）设置组。
配置：urlParser: 'default' 自动识别格式，playsinline、静音自动播放，非直播模式 live: false。
错误处理：拦截 error 事件显示失败提示与控制台输出。

实现效果

内置 HLS / FLV 支持，免额外依赖
音量滑条 + 多档位倍速设置（桌面端插件）
精简后的无返回按钮全屏 UI，控件对齐
自适应、自动播放

演示说明

🎬 在线演示（下方为该播放器内嵌实时播放，可点击右下角全屏）：

https://play.123366.xyz/mui/?url=视频地址

MuiPlayer 一条引入即可兼顾 m3u8/flv，适合希望「一个库搞定一切」的简洁场景。

部署教程

以下内容参考 MuiPlayer 官方文档编写，覆盖接入、初始化与部署方式。

官网与文档

官网 / 文档站：https://muiplayer.js.org/
GitHub 仓库：https://github.com/muiplayer/muiplayer

安装

npm 方式

1
npm i mui-player

CDN 方式（mui-player，当前最新版本 1.8.1）

在页面 <head> 中引入样式，在 <body> 末尾引入脚本：

1
2
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/mui-player@1.8.1/dist/mui-player.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mui-player@1.8.1/dist/mui-player.min.js"></script>

HTML 容器

MuiPlayer 通过 ID 定位容器，页面中放置一个 <div>：

1
<div id="mui-player"></div>

初始化

使用 MuiPlayer 官方 API 创建播放器实例：

1
2
3
4
const mp = new MuiPlayer({
    container: '#mui-player',
    src: 'demo.mp4',
});

其中 container 指向容器选择器，src 为视频资源地址。

通过 `?url=` 传参播放

页面读取 URL 中的 url 参数作为播放地址，未传时展示居中错误提示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="mui-player"></div>
<script>
    const params = new URLSearchParams(location.search);
    const url = params.get('url');

    if (!url) {
        // 展示居中错误提示
        document.getElementById('mui-player').innerHTML =
            '<p style="text-align:center">请通过 ?url= 传入视频地址</p>';
    } else {
        const mp = new MuiPlayer({
            container: '#mui-player',
            src: url,
            urlParser: 'default',
            playsinline: true,
            autoplay: true,
            muted: true,
            live: false,
        });
    }
</script>

内置 HLS / FLV 支持

MuiPlayer 原生内置 HLS、FLV 解析能力，src 直接传入 m3u8 / flv / mp4 地址均可开箱即用，无需额外引入 hls.js / flv.js。

桌面端扩展插件

PC 端可安装 mui-player-desktop-plugin，该插件提供音量调节滑条与播放速度（倍速）设置组。引入插件脚本并通过 plugins 注入即可启用：

1
2
3
4
5
new MuiPlayer({
    container: '#mui-player',
    src: 'demo.mp4',
    plugins: [new MuiPlayerDesktopPlugin()],
});

下载文件、部署到自己网站

上面的 CDN 用于快速体验；若要把 MuiPlayer 下载文件并在自己的网站部署：

需要下载哪些文件：播放 MP4 只需核心 mui-player.min.js + 配套样式 mui-player.min.css 两个官方文件。CDN 镜像可直接获取：
- jsDelivr：https://cdn.jsdelivr.net/npm/mui-player@1.8.1/dist/mui-player.min.js
- jsDelivr：https://cdn.jsdelivr.net/npm/mui-player@1.8.1/dist/mui-player.min.css
放到网站目录：在站点根目录新建 mui/ 文件夹，把两个文件放进去。

本地引用：

1
2
3
4
5
6
7
8
9
<link rel="stylesheet" href="./mui/mui-player.min.css">
<script src="./mui/mui-player.min.js"></script>
<div id="player"></div>
<script>
new MuiPlayer({
  container: '#player',
  src: new URLSearchParams(location.search).get('url'),
});
</script>

用 ?url= 播放：整站上传到任意静态托管（Nginx、EdgeOne Pages、GitHub Pages 等），无需后端：
```
https://你的域名/mui/?url=视频地址
```

只播 MP4 无需额外依赖；需要 HLS / FLV 时才安装/引用官方 MuiPlayer-rebroadcast-plugin（含 HLS/FLV 转码能力）或打通流插件，见官方文档。

原出处