微信小程序抖音实战-小视频弹幕 本是古典 何须时尚 2022-05-13 23:18 393阅读 0赞 > 如果你去抖音只是为了看小视频就少了一大乐趣,评论区才是最有趣的地方,边看视频边看评论的弹幕是不是更有意思 IT实战联盟博客:[http://blog.100boot.cn][http_blog.100boot.cn] ### 首先看下效果图 ### ![7fd78362cdb018b9d526f22114de08f8.png][] 预览效果截图 ### 实现思路 ### 把最新的评论以弹幕的方式展示出来,随机生成字体颜色 ### 局部代码变动 ### 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 }) } }, 还不赶紧去试试 !!!留下你们的神评论,让更多的同学看到 > 完整源码请到官网https://100boot.cn的抖音案例下载 ![36f7b3a30339481246fa491e71163f84.png][] 抖音系列 * [微信小程序抖音实战-抖音案例使用手册][-] * [微信小程序抖音实战-首页(上)][- 1] * [微信小程序抖音实战-首页(下)][- 2] * [微信小程序抖音实战-实现抖音评论效果][- 3] * [微信小程序营销之大转盘(二)][Link 1] * [微信小程序抖音实战-支持播放小视频][- 4] * [微信小程序抖音实战-支持手机播放小视频][- 5] 关注我们 IT实战联盟博客:[http://blog.100boot.cn][http_blog.100boot.cn] > 如果需要源码和素材可以关注“IT实战联盟”公\*众\*号并留言(微商城源码,5个字会收到源码下载地址,一定要看源码里面的操作手册会少走很多弯路),也可以加入交流群和作者互撩哦~~~ [http_blog.100boot.cn]: http://blog.100boot.cn/ [7fd78362cdb018b9d526f22114de08f8.png]: /images/20220514/5d6b852bc88a454082e3334e9d48fd2e.png [36f7b3a30339481246fa491e71163f84.png]: /images/20220514/6334ade6732c4dae89195c918387dbff.png [-]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484519&idx=1&sn=d4ae23f8717b216ca07fa23b3efbbc62&chksm=fc4df626cb3a7f30a6d71e24938a7f976f6c92d54efbb88e8c7ace2ffa33d914679d481dd28b&scene=21#wechat_redirect [- 1]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484465&idx=1&sn=53481d7a25a180d5836abba7d338cb57&chksm=fc4df670cb3a7f6653ca40cbaa6802a4a91edfecd093fd132468e7d7ac914493bf1aa7c6f214&scene=21#wechat_redirect [- 2]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484565&idx=1&sn=4e9b3ea9373ad9887e79d98468410f32&chksm=fc4df6d4cb3a7fc24fd27257b1bf1bbb1241fb5dc8ce3905b01e9251b10b56da967444efcc84&scene=21#wechat_redirect [- 3]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484440&idx=2&sn=b06febe8c1acc632364f690fe67b3a1b&chksm=fc4df659cb3a7f4f820115ddb6767e5b2aa1497903d7876156f41b278466edf0e3c158e588a1&scene=21#wechat_redirect [Link 1]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484599&idx=1&sn=2af7dd2eecad1126ed6aaeb8d4356ffb&chksm=fc4df6f6cb3a7fe071006e682cfadf7e07dacb5b8dc06c3bdd9c361086fdda53d40cfde66646&scene=21#wechat_redirect [- 4]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484605&idx=1&sn=bd7f3b70316fe1dbdf967f30294bc4ab&chksm=fc4df6fccb3a7fea5c08b106eb12ec75ce5772cdf792ae64242bc3610ce7d5891e0496b79e21&scene=21#wechat_redirect [- 5]: http://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484801&idx=1&sn=04a49b768d1648cf7af12c2cfc3b1154&chksm=fc4df7c0cb3a7ed6c7b77d58b91b265f013fffa599b8da172debb46246b9fe44d08523cbaa19&scene=21#wechat_redirect
还没有评论,来说两句吧...