前言：
而今姐妹们对“html播放器ui”大概比较讲究，同学们都想要知道一些“html播放器ui”的相关文章。那么小编同时在网络上搜集了一些有关“html播放器ui””的相关资讯，希望各位老铁们能喜欢，小伙伴们一起来学习一下吧！今天给小伙伴们分享一款超棒的实现B站蒙版弹幕前端组件BarrageUI。
barrage-ui 一款免费开源的适用于web端用户界面及播放器的轻量级弹幕组件。基于Canvas实现，无第三方依赖。
特性一切皆可“弹幕”化，可用于给网页上任何元素挂载弹幕评论；简单+自由，项目开源化，无第三方依赖，可自由进行项目开发；可定制+高扩展，可精确定义每一帧，快速实现B站蒙版弹幕效果；用途可给网页上的视频播放器、图片浏览器等元素装载弹幕动画可用于实现B站风格的“蒙版弹幕”效果安装
$ npm i barrage-ui -S快速使用
<!-- HTML --><div id="barrageID"> <video id="video" src="assets/demo.mp4" controls></video></div><!-- JS -->import Barrage from 'barrage-ui'import mockData from 'barrage-ui/example.json'; // 引入组件demo数据// 挂载弹幕const barrage = new Barrage({ container: document.getElementById('barrageID'), // 弹幕容器或ID data: mockData, // 弹幕数据 config: { // 配置项 duration: 20000, fontFamily: 'Microsoft Yahei', defaultColor: '#fff', },});// 新增一个弹幕barrage.add({ key: 'pim931a6pm1j90bia4j', time: 1200, text: '新增一条弹幕内容数据', fontSize: 32, color: '#ff0',});// 播放弹幕barrage.play();参数配置在 new Barrage({ ...options }) 创建弹幕实例时，需要传入的初始化参数。
其中，container 参数在初始化实例时必传，其他参数为可选。
弹幕数据字段
{ key: 'fctc651a9pm2j20bia8j', createdAt: '2019-01-13T13:34:47.126Z', time: 1200, text: '我膨胀了', fontFamily: 'SimSun', fontSize: 32, color: 'yellow', avatar: '/images/avatar.png', avatarSize: 32, avatarMarginRight: 8,}文档提供了丰富的API及演示例子。
非常不错的一款开源web端蒙版弹幕组件，需要的同学不可错过哈！
最后附上文档及项目地址链接。
# 文档地址 示例地址 仓库地址
好了，就分享到这里。如果大家有其它弹幕组件，欢迎一起交流讨论！
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
