草莓播放器 · NPlayer：零依赖可定制

本篇介绍草莓播放器中的 NPlayer 方案。NPlayer 以「TypeScript 编写、无第三方框架依赖、高度可定制」为特点。

原出处

NPlayer 是由 wangjie 开发的一款无依赖的 HTML5 播放器，内核精悍、控件可高度定制。本项目在 NPlayer 官方仓库基础上，将 nplayer.min.js 及配套的 hls.min.js、flv.min.js 本地化到 nplayer/ 目录。

项目：NPlayer https://github.com/woopen/nplayer

修改说明

参数入口：读取 ?url=，缺失时给出提示；并校验 NPlayer / Player 类是否存在。
外部 video 元素：自行 createElement('video')，按格式用 Hls.js / Flv.js attach 填充，NPlayer 只做 UI 与控制——这是对「video 元素由外部接管」模式的实践。
格式路由：.m3u8 → Hls.js；.flv → flv.js；其余直接 video.src。
控件布局：二维数组精确定义控件——底部「播放/音量/时间/间隔/画中画/网页全屏/全屏」，第二行进度条，顶部设置；settings: ['speed'] 提供倍速。
自动播放：静音以满足浏览器策略，video.play() 并吞掉异常。

实现效果

无第三方框架依赖，内核轻量
完全可控的控件排布（播放、音量、时间、画中画、全屏、进度、设置）
支持 HLS、FLV、MP4/WebM
倍速设置、自适应全屏

演示说明

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

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

NPlayer 高度可定制，适合需要把播放器 UI 完全按需排布、追求极简依赖的场景。

部署教程

本教程依据 NPlayer 官方文档，介绍如何安装并部署一个 NPlayer 播放器页面。官方快速入门见 https://nplayer.js.org/docs/。

NPlayer 是用 TypeScript 和 Sass 编写的 HTML5 播放器，无任何第三方运行时依赖，可接入任意流媒体（HLS / DASH / FLV），并支持插件体系（如弹幕插件 @nplayer/danmaku）。

安装

通过 npm 安装：

1
npm i -S nplayer

也可以直接用 CDN 引入（推荐 unpkg）：

1
<script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>

初始化

以上面的方式引入后，通过官方 new Player() 创建实例，并将播放器挂载到指定元素：

1
2
3
4
5
6
7
import Player from "nplayer";

const player = new Player({
  src: "https://v-cdn.zjol.cn.com/280443.mp4"
});

player.mount(document.body);

src 直接传入视频地址即可播放。

用 `?url=` 传参播放的最简示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>NPlayer</title>
  <script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>
</head>
<body>
  <script>
    const url = new URLSearchParams(location.search).get("url");
    const player = new Player({ src: url || "https://v-cdn.zjol.cn.com/280443.mp4" });
    player.mount(document.body);
  </script>
</body>
</html>

访问时携带 ?url=视频地址 即可用指定地址播放；未传参则回退到默认示例视频。

接入 HLS / FLV

NPlayer 的 src 默认直接传视频地址。当播放 .m3u8（HLS）或 .flv（FLV）流时，官方通过 hls.js / flv.js（或自行处理）来填充 video 元素。具体接入方法可参考官方文档「examples」中的 HLS 用法。

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

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

需要下载哪些文件：播放 MP4 只需核心 nplayer.min.js 一个文件（官方构建产物 dist/index.min.js；原生 JS 目录下对应 UMD 文件）。CDN 镜像可直接获取：
- jsDelivr：https://cdn.jsdelivr.net/npm/nplayer@1.0.15/dist/index.min.js
放到网站目录：在站点根目录新建 np/ 文件夹，把 nplayer.min.js 放进去。

本地引用：

1
2
3
4
5
6
7
<script src="./np/nplayer.min.js"></script>
<script>
const player = new Player({
  src: new URLSearchParams(location.search).get('url'),
});
player.mount(document.body);
</script>

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

只播 MP4 无需额外依赖；需要 HLS / FLV 时才额外下载对应插件并注册（NPlayer 提供 HLS/FLV/DASH 插件，见官方文档）。

原出处