如果你去抖音只是为了看小视频就少了一大乐趣，评论区才是最有趣的地方，边看视频边看评论的弹幕是不是更有意思
首先看下效果图
实现思路
把最新的评论以弹幕的方式展示出来，随机生成字体颜色
局部代码变动
1. 增加一个随机颜色生成算法
function getRandomColor() {
let rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
解读一下:
Math.random() * 256 用来获取一个 0 - 256 之间的一个随机数
那为什么要乘以256 呢，那是因为rgb的颜色最大是255
Math.floor 取整数，toString(16) 转为 十六进制的颜色码
color = color.length == 1 ? '0' + color : color 补零操作
2. 视频层开启弹幕
<video id="myVideo" src="{{videoSrc}}" binderror="videoErrorCallback" autoplay='{{true}}' controls='{{false}}' class='slide-image' loop='true' show-progress='false' show-play-btn='false' show-center-play-btn='true' show-fullscreen-btn='false' objectFit='fill' enable-danmu>
增加了一个 enable-danmu 属性
3. 播放视频增加自动发送弹幕
danmuTimer : null,// 弹幕定时器
previewSubject: function(){
var subject = this.data.subject;
if (subject.type == 'video'){
// 设置视频地址
this.setData({
videoSrc: subject.src,
isHiddenVideo: false
})
// 开始播放
this.videoContext.play();
// 自动发送弹幕
var danMus = [];
var that = this;
api.loadTalks({
data: {
subjectId: that.data.subject.subjectId,
page: 1,
rows: 60
},
success: function (page) {
danMus = page.content;
// 先播放最新的弹幕, 评论多的话，需要后台数据排序
danMus.reverse();
console.log("获取到 " + danMus.length + " 条评论", danMus)
that.danmuTimer = setInterval(function () {
var talk = danMus.pop();
if (talk){
console.log("发送弹幕: " + talk.content)
that.videoContext.sendDanmu({
text: talk.content, // 评论内容
color: getRandomColor() // 随机颜色
})
}else{
clearInterval(that.danmuTimer);
}
}, 1000)
}
});
}else{
wx.previewImage({
urls: [subject.coverUrl],
})
}
},
增加一个弹幕定时器变量，在关闭视频的时候使用
在开始播放的后面先请求后台获取评论数据，然后反转一下
为了pop的时候能出来最新的评论，定时每个1秒发送一个评论
当发送完所有评论后关闭定时器
4. 隐藏视频并关闭弹幕
hidePreview: function () {
var subject = this.data.subject;
if (subject.type == 'video') {
// 停止发送弹幕
clearInterval(this.danmuTimer);
// 暂停播放
this.videoContext.pause();
// 隐藏视频层
this.setData({
isHiddenVideo: true
})
}
},
还不赶紧去试试 ！！！留下你们的神评论，让更多的同学看到
原文发布时间为：2018-09-26
本文作者：IT实战联萌
本文来自云栖社区合作伙伴“编程微刊”，了解相关信息可以关注“编程微刊”。
