一款可以发送弹幕的播放器，快来看看

介绍

一、基础使用

二、播放器配置

三、实现弹幕功能

四、总结

介绍

NPlayer是一款功能强大、响应式、可定制的播放器，基于TypeScript和Sass编写。NPlayer支持高定制，你可以轻松定制图标、主题颜色等，还可以集成插件，实现更复杂的功能（弹幕播放、视频清晰度切换等）。

文档：Powerful danmaku video player | NPlayer

一、基础使用

NPlayer不仅支持vue2/3，还支持react，详看官方文档，本文以Vue3+TS整合为例子，带大家体验一下这款播放器。

下载依赖

pnpm i -S nplayer @nplayer/vue

在安装好依赖之后，还需要在main.ts中注册该插件

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import NPlayer from "@nplayer/vue";const app = createApp(App)
app.use(NPlayer)
app.mount('#app')

编写组件代码，只需要简单配置就可以实现播放功能，当然功能远远不至于止，请继续往下看，记得要在options中把视频播放链接替换自己的，用官网的加载不出来。

<script setup lang="ts">
import {PlayerOptions} from "nplayer";// 播放器实例
let player = null;
const setPlayer = (p) => {// 设置播放器实例player = p;
};
// 播放器配置
const options: PlayerOptions = {// 视频播放链接src: "",
};
</script><template><NPlayer :options="options" :set="setPlayer"/>
</template><style scoped></style>

这样就实现基础的播放功能

二、播放器配置

在实现完播放功能之后，我们可以根据自己的需求，对播放器进行进一步的配置，比如设置封面、快进时长、控制条配置等等。

以下是笔者自己整理的常用的一些配置，更详细可以看官网

参数	描述
src	视频地址
autoSeekTime	视频加载成功时自动跳转到的时间点（跳转后该参数会自动设为 0），你可以用这个参数实现记忆上次用户观看时间
controls	播放器底部控制条，该参数是二维数组，可以配置播放按钮、全屏等按钮的位置
settings	设置菜单配置，配置视频播放速度
contextMenus	配置视频右键菜单选项
contextMenuToggle	是否偶数次单击右键时显示浏览器默认右键菜单
plugins	插件列表，用户可以添加插件、自定义插件等
i18n	当前播放器语言，如 `en`、`zh`
shortcut	是否开启快捷键功能
seekStep	单次快进、快退的步长，快捷键中会使用到
volumeStep	单次增加、降低音量的步长，快捷键中会使用到
themeColor	主题色
posterBgColor	海报背景色
progressBg	进度条背景
progressDot	进度条上的点
volumeProgressBg	音量条背景
volumeBarLength	音量条长度
volumeVertical	垂直音量条
loadingEl	自定义视频 loading 元素
openEdgeInIE	是否在 Win10 的 IE 中自动打开 Edge
posterEnable	是否启用海报功能
poster	海报图片地址

部分配置示例

// 播放器配置
const options: PlayerOptions = {// 视频播放链接src: "",// 单次快进、快退的步长，以秒为单位seekStep: 5,// 垂直音量进度条方向：true为垂直，false为横向volumeVertical: true,// 音量进度条宽度volumeBarLength: "120px",// 启用或禁用海报，默认为trueposterEnable: true,// 视频封面poster: '',// 插件配置plugins: [{apply(player: Player) {// 播放器挂载player.on('Mounted', () => console.log('mounted'))// 播放器播放player.on('Play', () => console.log('play'))},},],// 播放器底部控制条配置controls: [['play', 'volume', 'time', 'spacer', 'danmaku-settings', 'airplay', 'settings', 'web-fullscreen', 'fullscreen'],],
};

三、实现弹幕功能

要实现NPlayer弹幕功能，需要安装插件@nplayer/danmaku，它可以保持大量弹幕而不卡顿，并且支持非常多的设置，比如弹幕防碰撞、弹幕速度、字体、速度、透明度、显示区域、发送弹幕等

pnpm i -S @nplayer/danmaku

准备弹幕列表，弹幕列表必须按照 time 从小到大排序。如果获取的弹幕是无序的，那么在传入之前需要自己进行排序处理一下。

还可以通过 danmaku 对象的 appendItems 和 resetItems 等方法，添加和重置弹幕。

先演示静态效果，新增items.ts文件，存储静态的弹幕列表

export default [{text: "口技 ",time: 0},{text: "傻袍子 ",time: 0,color: "#2196F3"},{text: "233真的是摔啊 ",time: 1,color: "#2196F3"},{text: "同时出土可以减少被吃的数量 ",time: 1,color: "#673AB7"},{text: "女孩子可以养一只 ",time: 1},{text: "真正的黑恶势力 ",time: 1,color: "#2196F3"},{text: "你 ",time: 1,color: "#673AB7"},{text: "开学前一天的我 ",time: 2,color: "#E91E63"},{text: "好灵活啊 ",time: 3},{text: "猞猁尾巴很短的 这个尾巴长 ",time: 4},{text: "碰到贝爷。。。 ",time: 4},{text: "啊啊啊啊啊啊啊啊啊啊啊 ",time: 4,color: "#673AB7"},{text: "非主流发型 ",time: 4},{text: "carcass。。 ",time: 5,color: "#E91E63"},{text: "好久沒見到老虎了啊…… ",time: 6,color: "#2196F3"},{text: "前面说黄鸡宠物的别跑 ",time: 6},{text: "哇 大猫 ",time: 6,color: "#2196F3"},{text: "鸳鸯戏水就是这么来的 ",time: 7},{text: "落叶这一幕，是梁思成与林徽因里面的！ ",time: 7},{text: "口技了得 ",time: 7},{text: "不追求难道要坐等灭绝吗。。。 ",time: 8},{text: "爪子毛茸茸的 ",time: 8,color: "#E91E63"},{text: "还弹起来了 ",time: 9},{text: "30厘米 ",time: 9},{text: "又被对面打野抓了 ",time: 10,color: "#673AB7"}
];

然后开始为播放器添加弹幕功能，控制条新增danmaku-settings，为了在控制台中显示弹幕控制按钮

// 引入弹幕插件
import Danmaku from "@nplayer/danmaku";
// 静态弹幕列表
import items from "./items.ts";// 弹幕插件配置
const danmakuPlugin = new Danmaku({// 弹幕列表items,// 是否显示发送弹幕的输入框autoInsert: true
})
// 弹幕插件事件
const danmakuEvent = {apply(player) {// 用户发送弹幕之前触发player.on('DanmakuSend', (opts) => {console.log(opts)})// 用户更新弹幕设置后触发player.on(player.danmaku.DANMAKU_UPDATE_OPTIONS, () => {console.log(player.danmaku.opts)})}
}const options: PlayerOptions = {//...// 插件配置plugins: [{apply(player: Player) {// 播放器挂载player.on('Mounted', () => console.log('mounted'))// 播放器播放player.on('Play', () => console.log('play'))},},danmakuPlugin,danmakuEvent],// 播放器底部控制条配置controls: [['play', 'volume', 'time', 'spacer', 'danmaku-settings', 'airplay', 'settings', 'web-fullscreen', 'fullscreen'],],
};

至此就实现了弹幕功能，如果想要发送弹幕，可以直接在底部控制台中输入内容，然后通过弹幕插件事件中的DanmakuSend获取用户输入的弹幕内容，拿到这个数据就可以进行前后台交互（进行网络请求，将弹幕存储到数据库中）