微信小程序抖音实战-小视频弹幕

如果你去抖音只是为了看小视频就少了一大乐趣，评论区才是最有趣的地方，边看视频边看评论的弹幕是不是更有意思

IT实战联盟博客：http://blog.100boot.cn

首先看下效果图

预览效果截图

实现思路

把最新的评论以弹幕的方式展示出来，随机生成字体颜色

局部代码变动

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 : colorrgb.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})}},

还不赶紧去试试！！！留下你们的神评论，让更多的同学看到

完整源码请到官网https://100boot.cn的抖音案例下载

抖音系列

微信小程序抖音实战-抖音案例使用手册
微信小程序抖音实战-首页（上）
微信小程序抖音实战-首页（下）
微信小程序抖音实战-实现抖音评论效果
微信小程序营销之大转盘（二）
微信小程序抖音实战-支持播放小视频
微信小程序抖音实战-支持手机播放小视频

关注我们

IT实战联盟博客：http://blog.100boot.cn

如果需要源码和素材可以关注“IT实战联盟”公*众*号并留言（微商城源码，5个字会收到源码下载地址，一定要看源码里面的操作手册会少走很多弯路），也可以加入交流群和作者互撩哦~~~

微信小程序抖音实战-小视频弹幕相关推荐

微信小程序抖音效果
微信小程序抖音效果方法一:swiper-item 里放video 看见有人说这样不能放,有人说现在可以放了,我放了之后可以滑动,效果还行 wxml: <swiper vertical=&qu ...
微云二手车运营版公众号+小程序v1.1.20+微信小程序+抖音端源码安装教程
系统包括PC+公众号+小程序v1.1.20+微信小程序+抖音小程序前端,使用前先在后台初始化下数据.播播资源网技术小编看了下说明是带PC端功能,但后台没找到设置的地方,不过公众号+小程序+抖音也够用了 ...
点餐小程序|抖音公众号运营|模特礼仪|网红主播引流
点餐小程序|抖音公众号运营|模特礼仪|网红主播引流广州创赢网络传媒有限公司的服务项目包括:微信点餐小程序平台,微信代运营,抖音粉丝观看量,平面设计,H5页面制作,影视制作,网红主播,时装模特,司仪主 ...
【西瓜】抖音小程序抖音小程序源码包1.8(xigua_dy.94864)[西瓜抖音版小程序前端上传代码包最新原版]
抖音小程序源码可以使用抖音小程序工具导入发布小程序 ※小程序类应用受"抖音平台"影响,部分业务需提供企业资质才可上线使用功能介绍为西瓜同城提供抖音版小程序端,支持所有西瓜同城 ...
字节跳动小程序(抖音) uniapp PHP 支付宝SDK 开发支付功能
目录前提条件正文代码流程: 详细代码一.获取字节跳动订单二.获取支付宝alipay_url参数三.开始生成orderInfo 给前端吊起支付宝咯总结哈 keke 前提条件字节跳动: A ...
python恶搞小程序-抖音最火的整蛊表白小程序如何做出来的？教你用python做出
考虑一下利用Python制作一个整蛊.木马软件,我提供思路.(清楚到没学过编程的人也理解) 1.首先一个黑客做一个整蛊或者木马软件,一定不会让你能够关闭它. 2.里面经常会附带欺骗的方法. 3.最终实 ...
python做小程序-抖音最火的整蛊表白小程序如何做出来的？教你用python做出
考虑一下利用Python制作一个整蛊.木马软件,我提供思路.(清楚到没学过编程的人也理解) 1.首先一个黑客做一个整蛊或者木马软件,一定不会让你能够关闭它. 2.里面经常会附带欺骗的方法. 3.最终实 ...
python有趣小程序-抖音最火的整蛊表白小程序如何做出来的？教你用python做出
考虑一下利用Python制作一个整蛊.木马软件,我提供思路.(清楚到没学过编程的人也理解) 1.首先一个黑客做一个整蛊或者木马软件,一定不会让你能够关闭它. 2.里面经常会附带欺骗的方法. 3.最终实 ...
字节小程序/抖音小程序支付功能 tt.pay CD0025/CD0015
(CD0025)错误先检查官方要求必填参数是否都已带上,懒得一个一个检查也可以用下面的工具赋值内容进去会自动提示是否少了参数 sign 签名是否正确可用官方提供的校验工具验证(https://pay ...
抖音实战~首页视频~下拉刷新
文章目录 1. 配置下拉刷新 2. 下拉刷新监听 3. tab监听索引 4. 控制台监控 5. 父子组件调用 6. 效果图 1. 配置下拉刷新在pages.json配置文件中添加如下配置: &quo ...

微信小程序抖音实战-小视频弹幕

首先看下效果图

实现思路

局部代码变动

微信小程序抖音实战-小视频弹幕相关推荐

最新文章

热门文章