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

来都来了 2018-08-29 10:26:07 ⋅ 72 阅读

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

首先看下效果图

预览效果截图

实现思路

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

局部代码变动

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,
        isHiddenVideofalse
      })
      // 开始播放
      this.videoContext.play();

      // 自动发送弹幕
      var danMus = [];
      var that = this;
      api.loadTalks({
        data: {
          subjectId: that.data.subject.subjectId,
          page1,
          rows60
        },
        successfunction (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实战联盟”公众号并留言(微商城源码,5个字会收到源码下载地址,一定要看源码里面的操作手册会少走很多弯路),也可以加入交流群和作者互撩哦~~~



全部评论: 0

    我有话说:

    程序实战-首页(上)

    你也可以用程序编写一个

    程序实战-首页(下)

    程序首页动态数据获取

    程序实战-支持播放视频

    之前的案例只支持图片的播放,经过粉丝的反馈说视频弄不出来,本节内容就教大家怎么做

    程序实战篇:实现评论效果

    我们在写程序的时候经常会遇到出层的效果而现有官网提供的跳转方法多数是不支持参数传递的。本文教大家做一个评论效果的程序......

    程序电商实战-首页(下)

    上一篇:程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序电商实战-首页(上)

    上一篇:程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序电商实战-商品详情(上)

    先看一下今天要实现程序商品详情页吧!

    程序实战篇:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序实战篇:如何解决https域名问题 ?

    开发自己的程序绕不开https问题,为了能在程序中调用我们自己的API服务请打开看一看吧!!!

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序电商实战-购物车(上)

    好久没更新程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序电商教程推出.......

    程序电商实战-入门篇

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为电商程序做一下准备前期准备工作~~

    程序实战篇:程序之页面数据传递

    我们在写程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    程序商城(九):授权并实现个人中心页面页面

    实现商城的授权并获取用户信息和个人中心页面布局