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

菜牙买菜

于 2024-08-26 17:24:35 发布

阅读量1.1k

点赞数 22

分类专栏：工具库文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_52102740/article/details/141569335

版权

工具库专栏收录该内容

1 篇文章 0 订阅

订阅专栏

介绍

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",
    // 启用或禁用海报，默认为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获取用户输入的弹幕内容，拿到这个数据就可以进行前后台交互（进行网络请求，将弹幕存储到数据库中）