javascript - js建立弹幕时间轴

Question

这里说的时间轴并不是类似以下形式

而是类似bilibili或者acfun那种弹幕的时间轴
上面所说的两个例子都是用flash实现的
苦于我根本不懂flash,也没有学习的冲动
所以想有没有js实现
要显示弹幕倒没什么,但是时间轴要怎么办呢??
在哪些时间显示哪些个弹幕怎么控制好呢?
目前只能想到很蠢的方法,
在弹幕的数据结构中加上显示时间的标识
然后用setTimeOut方法
在每过一秒就遍历弹幕数组,把时间匹配的弹幕取出显示到屏幕上
但是这样在弹幕很多的情况下就有很多问题吧

有人可以指教下,支个招吗

Answer 1

首先可以说明一下，flash中的ActionScript 3.0和JavaScript一样，语法核心都是ECMAScript，所以比较近似，在一定程度上可以互通。

弹幕时间轴，我想到的一个可能有些改进的思路是，将弹幕解析分为2个阶段。 第1个阶段为弹幕初始化，此时对弹幕数组做遍历，将它们重新整理成一个Object。在这个Object中，时间点作为key，弹幕内容作为value。比如

var danmaku = {
    1: [
        "六周年！"，
        "前方持续高能"
    ],
    2: [
        "干杯！"
    ]
    // ...
};

然后第2个阶段，运行一个持续的工作（比如每1秒），根据视频当前播放到的时间点，直接通过key来取得该时间点上的弹幕，然后显示到屏幕上。Object的key查询，会比每一次都遍历数组要好一些。

B站给过一个Android开源弹幕引擎，不过毕竟不同语言，仅供参考：https://github.com/Bilibili/DanmakuFlameMaster