前言
我们在bilibili
上浏览观看视频、刷剧的时候,有这样的一个功能——弹幕,百度搜了下,这样解释的:弹幕,指的是在网络上观看视频时弹出的评论性字幕。,有点类似我们在看实体书时,手拿笔在书上勾勾画画,顺便写写自己的读书笔记,想法啥的,只是现在将这个模式搬到了视频中,使用弹幕的方式来实现的。
图片来源于bilibili网站
下面我们来看看是如何实现的:
vue-baberrage
是一款基于Vue.js弹幕插件,其有如下特点:
- 容易使用 ¶只需几行代码,简单配置即可使用⁋
- 高性能 ¶过百条同屏弹幕依然能保持60FPS⁋
- 独立 ¶弹幕数据部分交还给使用者自己管理,可以配合Vuex使用⁋
效果图
下面我们来看看使用方式:
安装插件
npm install vue-baberrage --save
引入插件
在main.js:
中写如下代码:
import Vue from 'vue'
import { vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage)
在index.vue:
中写如下代码:
import {MESSAGE_TYPE} from "vue-baberrage";
使用插件
在vue:
中写如下代码:
<vue-baberrage
:barrageList="barrageList"
:boxHeight="boxHeight"
:isShow="barrageIsShow"
:lanesCount="lanesCount"
:loop="barrageLoop"
:messageHeight="messageHeight"
:throttleGap="throttleGap">
</vue-baberrage>
在js:
中写如下代码:
data() {
return {
barrageList: [],
barrageIsShow: true, //是否展示弹幕
barrageLoop: true, //是否循环播放
boxHeight: 170, //高度
messageHeight: 25, //消息高度
lanesCount: 4, //泳道数量
throttleGap: 5000, //消息间隔
}
}
mounted() {
this.addBarrageList();
},
methods: {
addToList() {
let list = [
{id: 1,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第一条弹幕',time: 3},
{id: 2,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第二条弹幕',time: 4},
{id: 3,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第三条弹幕',time: 3},
{id: 4,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第四条弹幕',time: 4},
{id: 5,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第五条弹幕',time: 5},
{id: 6,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第六条弹幕',time: 6},
{id: 7,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第七条弹幕',time: 7},
{id: 8,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第八条弹幕',time: 8},
{id: 9,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第九条弹幕',time: 9},
{id: 10,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第十条弹幕',time: 10}
];
list.forEach((v) => {
this.barrageList.push({
id: v.id, //弹幕ID
avatar: v.avatar, //头像
msg: v.msg, //弹幕消息
time: v.time, //屏幕展示时间
type: MESSAGE_TYPE.NORMAL, //类型
});
});
}
在css:
中写如下代码:
/*弹幕区域高度*/
/deep/ .baberrage-stage {
height: 170px;
}
/*弹幕消息框*/
/deep/ .baberrage-item .normal {
padding: 5px 10px;
}
/*头像*/
/deep/ .baberrage-item .normal .baberrage-avatar {
width: 25px;
height: 25px;
background-color: black;
}
/*文字*/
/deep/ .baberrage-item .normal .baberrage-msg {
font-size: 14px;
line-height: 25px;
}
至此,完事儿,就可以实现弹幕
的功能了。