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

2024-08-26 20:12

本文主要是介绍一款可以发送弹幕的播放器,快来看看,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

介绍

一、基础使用

二、播放器配置

三、实现弹幕功能

四、总结


介绍

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

当前播放器语言,如 enzh

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 对象的 appendItemsresetItems 等方法,添加和重置弹幕。

先演示静态效果,新增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播放器,并进行了简单的框架整合,实现了视频播放、弹幕功能,也进行一些基础配置,如果想要进行更高定制,可以自己查看官网探究探究,总之这款视频插件还是不错的

这篇关于一款可以发送弹幕的播放器,快来看看的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109569

相关文章

如何使用C#串口通讯实现数据的发送和接收

《如何使用C#串口通讯实现数据的发送和接收》本文详细介绍了如何使用C#实现基于串口通讯的数据发送和接收,通过SerialPort类,我们可以轻松实现串口通讯,并结合事件机制实现数据的传递和处理,感兴趣... 目录1. 概述2. 关键技术点2.1 SerialPort类2.2 异步接收数据2.3 数据解析2.

Windows server服务器使用blat命令行发送邮件

《Windowsserver服务器使用blat命令行发送邮件》在linux平台的命令行下可以使用mail命令来发送邮件,windows平台没有内置的命令,但可以使用开源的blat,其官方主页为ht... 目录下载blatBAT命令行示例备注总结在linux平台的命令行下可以使用mail命令来发送邮件,Win

使用Java发送邮件到QQ邮箱的完整指南

《使用Java发送邮件到QQ邮箱的完整指南》在现代软件开发中,邮件发送功能是一个常见的需求,无论是用户注册验证、密码重置,还是系统通知,邮件都是一种重要的通信方式,本文将详细介绍如何使用Java编写程... 目录引言1. 准备工作1.1 获取QQ邮箱的SMTP授权码1.2 添加JavaMail依赖2. 实现

Qt实现发送HTTP请求的示例详解

《Qt实现发送HTTP请求的示例详解》这篇文章主要为大家详细介绍了如何通过Qt实现发送HTTP请求,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、添加network模块2、包含改头文件3、创建网络访问管理器4、创建接口5、创建网络请求对象6、创建一个回复对

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf

Python手搓邮件发送客户端

《Python手搓邮件发送客户端》这篇文章主要为大家详细介绍了如何使用Python手搓邮件发送客户端,支持发送邮件,附件,定时发送以及个性化邮件正文,感兴趣的可以了解下... 目录1. 简介2.主要功能2.1.邮件发送功能2.2.个性签名功能2.3.定时发送功能2. 4.附件管理2.5.配置加载功能2.6.

解决Cron定时任务中Pytest脚本无法发送邮件的问题

《解决Cron定时任务中Pytest脚本无法发送邮件的问题》文章探讨解决在Cron定时任务中运行Pytest脚本时邮件发送失败的问题,先优化环境变量,再检查Pytest邮件配置,接着配置文件确保SMT... 目录引言1. 环境变量优化:确保Cron任务可以正确执行解决方案:1.1. 创建一个脚本1.2. 修

Django中使用SMTP实现邮件发送功能

《Django中使用SMTP实现邮件发送功能》在Django中使用SMTP发送邮件是一个常见的需求,通常用于发送用户注册确认邮件、密码重置邮件等,下面我们来看看如何在Django中配置S... 目录1. 配置 Django 项目以使用 SMTP2. 创建 Django 应用3. 添加应用到项目设置4. 创建

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

Android中如何实现adb向应用发送特定指令并接收返回

1 ADB发送命令给应用 1.1 发送自定义广播给系统或应用 adb shell am broadcast 是 Android Debug Bridge (ADB) 中用于向 Android 系统发送广播的命令。通过这个命令,开发者可以发送自定义广播给系统或应用,触发应用中的广播接收器(BroadcastReceiver)。广播机制是 Android 的一种组件通信方式,应用可以监听广播来执行