网站首页 > 技术文章 正文
今天给小伙伴们推荐2款超优质的Vue自定义弹幕制作组件Vue-Barrage。
1、VueBarrage
vue-barrage 基于vue2.x构建的弹幕组件。
功能特性
- 支持弹幕方向:滑动、顶部;
- 支持暂停/开始全局弹幕和弹幕划过暂停;
- 弹幕动画采用transform3d并开启css3硬件加速,弹幕基于按需加载和队列复用的模式;
快速使用
首先,复制 components 目录下 VBarrage文件夹 到自己的项目中。
<v-barrage
:arr="arr" // 传入的弹幕源数组
:isPause="isPause" // 控制是否暂停弹幕
:percent="100" // 弹幕的屏幕占比
</v-barrage>
// 弹幕对象
{
content: this.sendContent, // 弹幕内容
direction: this.direction, // 方向 default | top
isSelf: true, // 是否是自己发的弹幕
style: {
color: 'red' // 弹幕颜色
},
isJs: false // 是否解析html
}
# 示例地址
http://null_639_5368.gitee.io/vue-barrage/
# gitee仓库
https://gitee.com/null_639_5368/vue-barrage
2、Vue-BaBerrage
vue-baberrage 一款轻量级的Vue弹幕插件。
特性
- 易使用:只需几行代码,简单配置即可使用;
- 高性能:几百条同屏弹幕依然能保持高性能;
- 独立性:弹幕数据自行可控管理;
安装
$ npm i vue-baberrage -S
使用组件
<template>
<div id="app">
<vue-baberrage
:isShow= "barrageIsShow"
:barrageList = "barrageList"
:loop = "barrageLoop"
>
</vue-baberrage>
</div>
</template>
<script>
import { vueBaberrage } from 'vue-baberrage'
import { MESSAGE_TYPE } from 'vue-baberrage'
export default {
components: {
vueBaberrage
},
data() {
return {
msg: 'Hello vue-baberrage',
barrageIsShow: true,
currentId : 0,
barrageLoop: false,
barrageList: []
}
},
methods: {
addToList (){
this.barrageList.push({
id: ++this.currentId,
avatar: "./static/avatar.jpg",
msg: this.msg,
time: 5,
type: MESSAGE_TYPE.NORMAL
});
},
// ...
}
}
</script>
非常不错的一款弹幕组件,让你的页面视频元素瞬间提升一个档次。
# 文档地址
http://blog.chenhaotaishuaile.com/vue-baberrage/
# 仓库地址
https://github.com/superhos/vue-baberrage
好了,基于vue.js弹幕组件就分享到这里。希望对大家有所帮助哈!
- 上一篇: 我学习分布式mongodb,做了这些笔记
- 下一篇: 自学前端靠看视频可行吗?自学前端有什么误区?
猜你喜欢
- 2024-11-26 视频播放必备神器,解锁H5 Player的强大功能
- 2024-11-26 NAS下搭建具备web管理界面并自动上传视频的bilibili录播姬
- 2024-11-26 html5的面试中,大概率会问到的音频和视频的那些知识点
- 2024-11-26 老司机福利,迅雷X新版可以下载网页视频了
- 2024-11-26 随笔:前端音视频的那些名词
- 2024-11-26 基于flutter/dart仿抖音app实例
- 2024-11-26 今年找工作到底有多难,真的不好找工作吗 @抖音短视频
- 2024-11-26 基于flutter3.x跨端仿抖音app实战|flutter-douyin短视频直播
- 2024-11-26 Sketch 免费入门视频教程 - 设计/前端/产品都应该学的设计利器
- 2024-11-26 MiroTalk:基于 WebRTC 的免费 4K 实时视频会议框架
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)