weizhenye / danmaku Goto Github PK

在video模式遇到一个情况， 在有一定数量预载弹幕时，陆续 emit 一定数量新的弹幕，有时会遇到以下报错，并造成所有弹幕卡住。

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at I.h (https://unpkg.com/[email protected]/dist/danmaku.min.js:1:1896)
at n (https://unpkg.com/[email protected]/dist/danmaku.min.js:1:5570)

创建了demo页面 https://codepen.io/freekami/pen/RyyPym
Load Danmaku按钮模拟预先加载已有弹幕，Send New按钮模拟新进入的弹幕。
原本遇到的情况是开始视频前先Load Danmaku，再在播放过程中通过点击Send New来模拟遇到的场景，可是没有成功重现。
后来偶然发现在播放过程中多点击几次Load Danmaku就能重现出这个报错了。
怀疑是和性能有关系？

报错来源是

/* eslint no-invalid-this: 0 */
var domEngine = function() {
  var dn = Date.now() / 1000;
  var ct = this._hasMedia ? this.media.currentTime : dn;
  var pbr = this._hasMedia ? this.media.playbackRate : 1;
  var cmt = null;
  var cmtt = 0;
  var i = 0;
  for (i = 0; i < this.runningList.length; i++) {
    cmt = this.runningList[i];
    cmtt = this._hasMedia ? cmt.time : cmt._utc;
    if (ct - cmtt > this.duration) {
      this.stage.removeChild(cmt.node);
      /* istanbul ignore else */
      if (!this._hasMedia) {
        cmt.node = null;
      }
      this.runningList.splice(i, 1);
    }
  }

你好，在查看代码的过程中有一个疑问，上面代码段中对runningList进行循环判断并删除指定元素，遍历中调用splice方法会导致runningList.length产生变化，可能导致后继的判断删除问题。

如下从最后一个元素开始判断则可以避免

for (i = runningList.length - 1; i >= 0; i--) {
    //......
    this.runningList.splice(i, 1);
}

请查看是否存在该问题?

RT
高分辨率下,弹幕会抖动 移动的不平滑,,,,尤其是多个弹幕并行的时候,
就会出现 A 在B在后,然后又是B在前A在后

直播模式：弹幕在上面，滚到页面底部一段时间，回去看第一行有些弹幕会重叠。
好像在1.3.1我有提过这个问题

const danmaku = new Danmaku({
    container: document.querySelector('.container')
})

for (let i = 0 ; i < 10; i++) {
    setInterval(() => {
        danmaku.emit({
            text: '弹幕并发量测试实时',
            style: {
                font: '20px sans-serif',
                textAlign: 'start',
                // 注意 bottom 是默认的
                textBaseline: 'bottom',
                direction: 'inherit',
                fillStyle: '#000',
                strokeStyle: '#000',
                lineWidth: 1.0,
            }
        })

    }, 200)
}

dom 和 canvas 都会出现这种情况

因为要引用这个库，而 greasefork 规定脚本里只能 require 它认为安全的 CDN 收录的库，不然不能提交。

所以我在 https://greasyfork.org/zh-CN/scripts/27239 这个脚本里直接复制了代码（我看到 MIT 协议写是可以复制代码的，但是如果觉得直接复制不妥的话我就会删掉）

环境：
-- Tarui
-- Vue
-- Webkit Macos

在开发环境下，两种模式的弹幕均正常。
在生产环境下，两种模式均出现了问题。
（1）Canvas模式：

<template>
  <div id="danmaku_window"></div>
</template>

<script>
import Danmaku from "danmaku";

export default {
  name: "RollingDanmu",
  data() {
    return {
      danmaku: null,
    }
  },
  mounted() {
    this.danmaku = new Danmaku({
      container: document.getElementById("danmaku_window"),
      engine: "canvas"
    })
  },
  methods: {
    emit: function (msg) {
      // 发射弹幕
      this.danmaku.emit({
        text: msg,
        style: {
          font: '17px sans-serif',
          fillStyle: '#fff',
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

#danmaku_window {
  width: 480px;
  height: 300px;
  background: green;
}
</style>

在上述代码的生产环境中，会导致出现canvas的height=0的情况。

（2）DOM模式：
DOM模式中也会出现类似的问题，所有弹幕的div的translateY均为0。且包装弹幕的div的高度也为0.

canvas改宽高后，ctx状态会重置到默认的了，scale会失效的，font也会。这两句需要改下位置或者再调下。scale, font

可能会造成弹幕和视频不同步的问题

ws会不断地推数据，然后前端就不会地调emit方法，看了一下源码，每次emit就是push到comments，然后就没有利用到fragment，因为每次emit过来只有一条。。。

没有想到方法，我本来是想在emit的时候push到一个临时的数组，用setTimeout去计时，比如等100ms后，应该会有插入几十条，我再把它push，就可以利用上fragment。但是不行，不知道哪里有问题。

视频暂停时，字幕能停下来吗？

实现类似公告的效果，让某些重要的弹幕永远对齐在顶部。

https://github.com/weizhenye/Danmaku/blob/master/src/internal/allocate.js#L34

if (cr.range - cr.height - crs[last].range >= requiredRange)

这行的判断思路是什么？ 保证cr通道的空间足够的同时，让cr和last之间的距离足够塞入requiredRange？
cr实际是要塞入区域的下一层通道？

你好！

我用的DOM方式，使用时发现弹幕内容比较长的时候反而速度更快，快到都看不清楚。
但如果降低初始化速度，弹幕内容短的又太慢了。
我尝试修改脚本中的计算公式，但延长了长弹幕的生存时间又导致了后来的弹幕将其覆盖。

敬请赐教，谢谢！

How do it?

看到文档里说，canvas引擎更高效，但是消耗内存更大。请问下更高效是指哪个方面？另外想咨询下这两种方案的具体内存及其他方案的对比大概是怎样的？谢谢~

移动效果感觉像是一帧一帧的在走似的

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
http://www.bilibili.com/video/av6525542/ 2分多的时候
使用的弹幕解析器是用的你的

每个弹幕的运动时间和运动距离一般都不会变 可以在runningList的cmt对象里面把位置和每次移动的距离弄进去 然后每次动画把位置减去每次移动的距离就行了 说不定能提升性能 也可以在cmt对象里面把存活时间缓存进去 总之就是把每次动画时做的运算减少。。。。

库很好用，谢谢作者，但是目前看到这个库只支持视频音频，可以改成支持任意元素吗？

拖动时，二分查找binsearch会报错
danmaku.js:324 Uncaught TypeError: Cannot read property 'time' of undefined

only create many div, without animation, and hide, need add css ?

火狐下面的表现是这样的 dom模式下因为设有字体行高 字不是置顶的 但是canvas模式下就不清楚为什么没了上边距

感谢制作这个很好用的库！
使用中遇到一个小问题，如果切到别的标签页一段时间再返回，离开期间的所有弹幕会一起显示出来。当前使用的是dom engine，以及最新版本的chrome。
加了一些console log发现，emit是有按照真实的时间触发，但是domEngine会在中间某个时间点停止并在切回标签页之后重新触发，然后一次跑完comments array的loop。
请问是否有办法处理这个问题呢？

补充：多研究了一下发现应该是requestAnimationFrame在切换标签的时候停止了。那么有没有办法跳过这部分已经错过的弹幕呢？

如题

http://i1.piimg.com/4851/43bf2f0d14e51c59.jpg 火狐下
http://i1.piimg.com/4851/b9e1d45fb0342f31.jpg 世界之窗7下
edge下倒是正常

In canvas mode, danmaku just stroke and fill the text, but in many scenes, there is a need to draw some other element, like image, rectangle, triangle...

Can we add a paint function in cmt which can custom the canvas draws like this:

danmaku.emit({
  width: 50,
  height: 50,
  paint: function (ctx) {
    ctx.drawImage(img, 0, 0)
  }
 })

and in commentCanvas.js:

  if (typeof cmt.paint === 'function') {
    cmt.paint(ctx);
  } else {
    if (style.strokeStyle) {
      ctx.strokeText(cmt.text, strokeWidth, baseline);
    }
    ctx.fillText(cmt.text, strokeWidth, baseline);
  }

虽然我设置textBaseline为middle后下边正常了 但是左右俩边还是缺了点边框

目前我是用的是canvas模式+直播，发现如果在某时刻接收的弹幕过多，会造成许多弹幕重合，有什么方法能让其不重合呢？

如果不支持，能否使用黑科技来支持（比如强制更改当前时间等等）

https://danmaku.js.org/ 这个站点中解析视频弹幕的 API，是否允许第三方使用？我也想做个 Canvas 弹幕，想拿到 bilibili 一些视频的弹幕，看到你这里有现成的 API🤩

建议加弹幕范围api，
全屏、半屏、1/3

现在 style 参数的类型为 CSSStyleDeclaration，但这一类型不允许缺少其中某些项，导致 typescript 类型错误。

如果两条弹幕时间相近，正好显示在一排，而前一条比较短的话，这两条弹幕就会从大概中间位置开始重叠。Demo: https://codepen.io/freekami/pen/xWvxWR
谢谢！

如果是实时的弹幕，你切换到其他tab，回来的时候感觉有一堆弹幕。

CSS Font 属性的规范里提到

font-style, font-variant 和 font-weight 必须在 font-size 之前

canvasStyle: {
    font: 'italic bold 25px sans-serif'
}

但是这样设置之后就会出现高度计算不正常的问题，导致字体被截断。

已经调到10，感觉没用

弹幕容器高度为播放器高度的50%
在全屏后再退出全屏有时会出现弹幕截断的问题，使用的DOM引擎(有调用resize)

JSON.parse(JSON.stringify(json)) 会造成render方法丢失。

暂停状态下全屏后，顶部弹幕错位

点击播放之后，普通弹幕突然移到最右边，新出现的顶部弹幕位置正确，原有的顶部弹幕仍旧错位