介绍
NPlayer是一款功能强大、响应式、可定制的播放器，基于TypeScript和Sass编写。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",
// 启用或禁用海报，默认为true
posterEnable: 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获取用户输入的弹幕内容，拿到这个数据就可以进行前后台交互（进行网络请求，将弹幕存储到数据库中）
四、总结
通过本文了解了NPlayer播放器，并进行了简单的框架整合，实现了视频播放、弹幕功能，也进行一些基础配置，如果想要进行更高定制，可以自己查看官网探究探究，总之这款视频插件还是不错的
