一种页面弹幕的实现方式

在青果直播中，需求方要求实现两种不同模式的弹幕方式，在非热门直播中循环播放历史的评论，在热门直播中实时显示当前的评论。在开发过程中，初期的设计是flash播放器中的弹幕，这种方式的优点嵌入在flash播放器包中，性能较好，能兼容到低版本的浏览器，是早期开发播放器弹幕常用的方式，然而其缺点是需要as开发人员，开发和维护的成本较高，与播放器的功能相耦合，web和wap端不能复用。

后来我们设计了一套页面的弹幕方式，其中抽离出来的弹幕引擎可以支持web端的flash播放器和wap的h5播放器，提高了弹幕引擎的复用性。同时把外层的弹幕组件封装为弹幕模块，与评论、聊天、和播放模块能相互组合，通过模块间的通信实现两端的复用。同时提高弹幕组件的维护性，降低与播放器的耦合程度，简单的设计结构如下图a

a

这种页面弹幕的设计思想是在遵循需求基础上，提取出来弹幕的共性。区域大小，轨道数，速度，样式，其他属性，这部分的共用属性控制在弹幕引擎中实现。具体的弹幕业务逻辑在弹幕组件中实现，下面分别介绍这两部分的内容：

1、弹幕引擎额设计

弹幕引擎的核心就是一个在定时跑的定时器

this.$timer.timer({
            delay: 100,
            repeat: options.sumTime,
            autostart: false,
            callback: function (index) {}
)

   在callback方法中具体实现了一条弹幕实例化和运动的过程，有以下函数组成：

•   计时前置；
•   更新播放器面积参数；
•   防止重复；
•   更新行数；
•   字幕运行区域保护；
•   实例弹幕（样式+属性）
•   弹幕滚动；

   引擎提供外部接口：

•   danmuInit();
•   danmuStart();
•   danmuStop();
•   danmuPause();
•   danmuResume ()

  …

    2、弹幕组件的设计：

      具体可以根据业务和需求的不同，调用以上引擎的方法，这里弹幕组件就以实现青果直播中的两种需求实时弹幕和循环弹幕来介绍实现：

   首先介绍下这里有四个列表的概念：initialMessageList，newMessageList，baseMessageList，showList

•        initialMessageList 服务端获取的数据
•        baseMessageList 原始列表，与initialMessageList的不同是，在循环完一轮时其值为initialMessageList.concat(newMessageList)
•        newMessageList 新弹幕列表
•        showList 显示列表

      baseMessageList和newMessageList作为生产者列表，是提供弹幕的两个来源，一个是服务器端取过来的存量数据，另一个是用户产生的新数据， showList始终作为消费者，滑动index显示要发送给弹幕引擎的数据。在轮播模式和普通模式不同：

      （1）轮播模式下：如下图b所示，循环取baseMessageList的记录加入到showList，调用showdanmu方法。在一轮播放完，清除相应的事件，重复repeatPlay，在此设置的定时器timerHandleStock

b     

         （2） 实时模式：点击发送按钮后，加入到播放列表，调用showdanmu方法，在此设置的定时器timerHandleIncrease

c               

网易云新用户大礼包：https://www.163yun.com/gift

本文来自网易实践者社区，经作者龚玉利授权发布。