记录一些微信小程序弹幕的坑

最新推荐文章于 2025-09-23 18:03:02 发布

原创

最新推荐文章于 2025-09-23 18:03:02 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript

本文记录了在微信小程序中实现弹幕效果时遇到的两个问题：Barrage组件弹幕遗漏和Video时间戳精度问题。针对Barrage组件，通过调整tunnelMaxNum属性和避免内容为空的弹幕被移除来解决遗漏问题。对于Video的bindtimeupdate事件，由于不同设备时间戳精度差异导致弹幕发送延迟，改为过滤并逐条发送符合条件的弹幕。分享了解决这些问题的方法和思路。

1.Barrage 组件出现遗漏的问题

实现效果:
弹幕效果

使用Barrage组件时,发送的弹幕会出现遗漏的情况,类似该社区案例:地址
由于业务需求需要实现视频弹幕效果,调整了部分代码(根据自己猜想进行的调整,并不严谨,在此记录,仅供参考!):
但是调整考虑的方向有三点:
1.对象数据问题
2.动画效果问题
3.弹幕轨道问题

多次测试后发现:
1.barrage默认配置中 tunnelMaxNum属性为配置每个轨道的最大数组容量,每次发送一条弹幕时,会随机找一条空闲轨道(容量未满)来发送一条的弹幕,直至该轨道填满后不在支持发送,
2.发送的弹幕出现遗漏时,在下面代码中监听到弹幕对象bullet.content = “”,即内容为空的情况,因此不会发送弹幕

  Barrage.prototype.tunnelAnimate = function tunnelAnimate(tunnel) {
   
   
    var _this8 = this;
    if (tunnel.disabled || tunnel.sending || !this._isActive) return;
    var next = (tunnel.last + 1) % tunnel.maxNum;
    var bullet = tunnel.bullets[next];
    if (!bullet) return;
    //bullet.content 为空
    if (bullet.content || bullet.image.head || bullet.image.tail) {
   
   
      var _comp$setData;
      tunnel.sending = true;
      tunnel.last = next;
      var duration = this.duration;
      if (this.mode === 'overlap') {
   
   
        duration = this.distance * this.duration / (this.distance + bullet.width);
      }
      var passDistance = bullet.width + tunnel.safeGap;
      bullet.duration = duration;
      // 等上一条通过右边界
      bullet.passtime = Math.ceil(passDistance * bullet.duration * 1000 / this.distance);
      this.comp.setData((_comp$setData