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

本是古典何须时尚 2022-05-13 23:18 369阅读 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