基于微信小程序的弹幕处理方法和系统与流程

本申请实施例涉及计算机领域，尤其涉及一种基于微信小程序的弹幕处理方法、系统、计算机设备及计算机可读存储介质。

背景技术：

弹幕，指的是在呈现视频时同时呈现评论性文字、表情、图案等。目前，弹幕成了为很多观众观看视频、直播的重要元素，其不仅能够使用户表达观看节目感受，而且还能使用户观看其他用户对节目的评论内容，实现用户观看视频时的互动性。

微信小程序框架和常规浏览器存在些许区别。导致如下问题：基于微信小程序的视频播放页面上的弹幕渲染，容易出现弹幕显示不流畅，或者计算资源使用过多。

申请内容

有鉴于此，本申请实施例的目的是提供一种基于微信小程序的弹幕处理方法、系统、计算机设备及计算机可读存储介质，用于解决基于微信小程序的视频播放页面上的弹幕渲染，容易出现弹幕显示不流畅，或者计算资源使用过多的技术问题。

本申请实施例的一个方面提供了一种基于微信小程序的弹幕处理方法，包括：获取视频播放页面，用于输出视频流；获取与所述视频流关联的多个弹幕数据；及以预定时间间隔执行弹幕处理操作，其中，所述弹幕处理操作包括在逻辑层对所述多个弹幕数据进行弹幕处理。

可选的，以预定时间间隔执行弹幕处理操作，包括：通过模拟requestanimationframe得到的目标函数，以逐帧调用渲染函数以执行所述弹幕处理操作的代码。

可选的，所述目标函数包括定时函数和回调函数，其中所述定时函数中的时间参数是根据屏幕刷新频率确定，所述目标函数以递归方式被调用，所述回调函数用于调用所述渲染函数以执行所述弹幕处理操作。

可选的，以预定时间间隔执行弹幕处理操作，包括：以所述预定时间间隔轮询是否可以执行所述弹幕处理操作；如果所述逻辑层处于忙碌状态中，则判断不可以执行所述弹幕处理操作；如果所述逻辑层处于空闲状态中，则判断可以执行所述弹幕处理操作。

可选的，所述弹幕处理操作包括：对所述多个弹幕数据执行遍历，以查找所述多个弹幕数据中是否包括处于待发射状态的弹幕数据；如果所述多个弹幕数据中包括所述处于待发射状态的弹幕数据，则：将所述处于待发射状态的弹幕数据添加到待发射弹幕队列中，并通知所述视图层进行数据更新操作，根据所述处于待发射状态的弹幕数据执行第一次渲染操作；获取所述第一次渲染操作得到的弹幕元素的弹幕宽度；根据所述弹幕元素的弹幕宽度，判断多个弹幕轨道中是否包括处于空闲状态下的弹幕轨道；及如果所述多个弹幕轨道中包括处于空闲状态下的弹幕轨道，则进行弹幕元素的数据绑定，以通知所述视图层进行数据更新操作以执行第二次渲染操作；其中，所述第二次渲染操作得到的弹幕元素用于弹幕播放。

可选的，根据所述弹幕元素的弹幕宽度，判断多个弹幕轨道中是否包括处于空闲状态下的弹幕轨道，包括：判断第k个弹幕轨道中是否为空，其中，k为正整数，k的初始值为1；如果第k个弹幕轨道中为空，则判断所述第k个弹幕轨道处于空闲状态下；如果第k个弹幕轨道中不为空，则根据所述弹幕元素的弹幕宽度计算所述弹幕元素的弹幕速度；根据所述弹幕元素的弹幕速度，判断所述弹幕元素的弹幕内容是否会与所述第k个弹幕轨道中的其他弹幕内容发生碰撞；如果所述弹幕元素的弹幕内容不会与所述第k个弹幕轨道中的其他弹幕内容发生碰撞，则判断所述第k个弹幕轨道处于空闲状态下；及如果所述弹幕元素的弹幕内容会与所述第k个弹幕轨道中的其他弹幕内容发生碰撞，则判断所述第k个弹幕轨道处于拥挤状态下。

可选的，所述逻辑层包括弹幕时间线，所述弹幕处理操作还包括：对所述弹幕时间线的时间线进行更新操作。

本申请实施例的一个方面又提供了一种基于微信小程序的弹幕处理系统，所述系统包括：第一获取模块，用于获取视频播放页面，用于输出视频流；第二获取模块，用于获取与所述视频流关联的多个弹幕数据；及弹幕处理模块，用于以预定时间间隔执行弹幕处理操作，其中，所述弹幕处理操作包括在逻辑层对所述多个弹幕数据进行弹幕处理。

本申请实施例的一个方面又提供了一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时用于实现上述基于微信小程序的弹幕处理方法的步骤。

本申请实施例的一个方面又提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行上述基于微信小程序的弹幕处理方法的步骤。

本申请实施例提供的基于微信小程序的弹幕处理方法、系统、设备及计算机可读存储介质，可以设定一个均衡的时间间隔作为所述预定时间间隔，有规律地执行弹幕处理操作，从而保障弹幕流畅性和计算资源的合理性，避免了无规律状态下的弹幕处理操作导致的诸如出现弹幕显示不流畅、计算资源使用过多等种种问题。

附图说明

图1示意性示出了根据本申请实施例的基于微信小程序的弹幕处理方法的应用环境图；

图2示意性示出了根据本申请实施例一的基于微信小程序的弹幕处理方法的流程图；

图3示意性示出了根据本申请实施例一的基于微信小程序的弹幕处理方法的另一流程图；

图4示意性示出了图2中步骤s204的子步骤；

图5示意性示出了图4中步骤s406的子步骤；

图6示意性示出了图2中的另一新增步骤；

图7示意性示出了根据本申请实施例一的基于微信小程序的弹幕处理方法的另一流程图；

图8示意性示出了根据本申请实施例二的通信系统的框图；及

图9示意性示出了根据本申请实施例三的适于实现基于微信小程序的弹幕处理方法的计算机设备的硬件架构示意图。

具体实施方式

为了使本申请实施例的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请实施例进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请实施例，并不用于限定本申请实施例。基于本申请实施例中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请实施例保护的范围。

本发明人发现：微信小程序框架，其与一般的浏览器框架不同。例如，在微信小程序框架中并没有提供类似于浏览器中的requestanimationframe(动画帧渲染)api，requestanimationframe是利用屏幕的刷新机制，屏幕有固定的刷新频率(60hz或75hz)，例如每秒最多只能重绘60次或75次，requestanimationframe机制在于与这个刷新频率保持同步进行页面重绘，也就是大约16.7毫秒进行一次页面重绘。由于微信小程序框架没有上述requestanimationframeapi，导致渲染导致容易出现种种问题，例如，容易出现弹幕显示不流畅，或者计算资源使用过多的问题。本实施例旨在解决这些问题，具体请参照下文。

图1示意性示出了根据本申请实施例的基于微信小程序的弹幕处理方法的环境应用示意图。

提供商网络2可以通过网络9连接多个计算机设备10。在一些实施例中，内容服务3由提供商网络2提供。在其他实施例中，内容服务3可以由与提供商网络2连接的独立内容商提供。

内容服务3可以包括诸如互联网协议视频流服务之类的内容流服务。内容流服务可以被配置为经由各种传输技术来分发内容。内容服务3可以被配置为提供诸如视频，音频，文本数据，其组合等的内容。内容可以包括内容流(例如，视频流，音频流，信息流)，内容文件(例如，视频文件，音频文件，文本文件)和/或其他数据。

提供商网络2可以实现弹幕服务，该弹幕服务被配置为允许用户评论和/或共享与内容相关联的评论。弹幕内容可以与内容一起呈现在同一屏幕上。例如，弹幕内容可以在内容上方的覆盖图中显示。弹幕内容在显示时可能会带有动画效果。例如，弹幕内容可以被显示为在内容上滚动(例如，从右到左，从左到右，从上到下，从下到上)，这种动画效果可以基于css3(cascadingstylesheets，层叠样式表)的transition属性实现的。

提供商网络2可以位于诸如单个场所之类的数据中心，或者分布在不同的地理位置(例如，在多个场所)中。提供商网络2可以经由一个或多个网络9提供服务。网络9包括各种网络设备，例如路由器，交换机，多路复用器，集线器，调制解调器，网桥，中继器，防火墙，代理设备和/或类似。网络9可以包括物理链路，例如同轴电缆链路，双绞线电缆链路，光纤链路，其组合等。网络9可以包括无线链路，诸如蜂窝链路，卫星链路，wi-fi链路等。

提供商网络2可以包括消息服务5。消息服务5可以被配置为接收多个消息。所述多个消息可以包括与内容相关联的多个弹幕内容以及与所述多个弹幕内容有关的信息。

消息服务5可以被配置为管理用于各种内容项的消息。用户可以浏览内容并访问不同的内容项以查看针对特定内容的评论，例如其他用户针对该特定内容发布的评论。来自与特定内容项目相关联的用户的评论可以被输出到观看该特定内容项目的其他用户。例如，访问内容项目(例如，视频剪辑)的所有用户可以查看与该内容项目相关联的评论。输入的弹幕内容可以实时或接近实时地输出。

消息服务5可以被配置为处理多个消息。消息服务5可以基于与相应弹幕内容相关联的信息(例如，时间戳，递增的标识符)来实现对多个消息的队列或以其他方式优先处理。消息服务5可以被配置为使用负载平衡来处理多个消息。例如，消息服务5可以被配置为使用多个处理节点中的一个或多个来处理多个消息，对消息进行优先级排序，对消息进行负载平衡等。消息服务5可以至少临时地存储多个消息。消息服务5可以将多个消息存储在诸如数据库的数据存储中。

消息服务5可以被配置为通过执行分组过程来处理消息。分组过程可以包括基于特征对多个消息进行分组。如果两个消息具有相同的特征或在特征的阈值范围内，则可以将这两个消息分为一组。与特定内容项(例如，流，文件，节目，电影，歌曲，游戏会话)相关联的消息可以与同一组相关联。例如，消息可以包括内容标识符或与内容标识符相关联。内容标识符可以唯一地标识内容项。如果在消息中找到了内容标识符，或者与消息相关联(例如，单独发送)，则消息服务5可以将消息与内容项相关联的组相关联。

消息服务5可以执行自然语言处理，主题识别，模式识别，人工智能等，以自动确定消息的特征和/或对消息进行分组。作为示例，频繁出现的短语或模式可以被识别为主题。作为另一个示例，可以维护与内容相关联的主题的数据库。主题可以包括流派(例如，动作，戏剧，喜剧)，个性(例如，演员，女演员，导演)，语言等。可以基于客户端设备和/或发送消息的用户的特征对消息进行分组。可以存储人口统计学，兴趣，历史和/或类似物以供多个用户确定消息的潜在分组。

消息服务5可以进一步被配置为通过生成输出数据来处理消息。输出数据可以包括用于实现基于相应上下文输出评论的指令。输出数据可以包括用于基于上下文指示应用覆盖评论的应用数据。输出数据可以包括用于生成(例如，编码)与评论相对应的内容的指令。

输出数据可以用于生成(例如，编码)输出弹幕内容，例如输出内容流。输出的评论内容可以与诸如内容服务3所提供的内容之类的原始内容项进行组合(例如，多路复用)。所得的组合可以包括单个包装(例如，容器，运输容器，运输流)中的内容。包可包括原始内容项以及输出的弹幕内容(例如，显示在原始内容项的顶部)。

消息服务5可以进一步被配置为通过执行筛选过程来处理消息。筛选过程可以包括拒绝或标记与筛选标准匹配的消息。筛选标准可以指定术语和/或短语，例如亵渎，仇恨言论，不雅语言等。筛选标准可以指定字符，例如符号，字体等。筛选标准可以指定语言，计算机可读代码模式等。

提供商网络2可以进一步包括处理服务6。处理服务6可以被配置为提供对各种服务的处理，例如提供商网络2的服务。处理服务6可以包括多个网络节点8。多个网络节点8可以处理与消息服务5相关联的任务。多个网络节点8可以被实现为一个或多个计算设备，一个或多个处理器，一个或多个虚拟计算实例，它们的组合，和/或类似的东西。

多个网络节点8可以由一个或多个计算设备实现。一个或多个计算设备可以包括虚拟化的计算实例。虚拟化的计算实例可以包括虚拟机，例如计算机系统，操作系统，服务器等的仿真。计算设备可以基于虚拟映像和/或定义用于仿真的特定软件(例如，操作系统，专用应用程序，服务器)的其他数据，由计算设备加载虚拟机。随着对不同类型的处理服务的需求改变，可以在一个或多个计算设备上加载和/或终止不同的虚拟机。可以实现管理程序来管理同一计算设备上不同虚拟机的使用。

在一些实施例中，多个网络节点8可以处理由多个计算机设备提交的事件。这些事件可以与讨论实时新闻，视频，社交热点，针对某些用户帐户的报告等相关联。在其他实施例中，多个网络节点8可以处理针对审阅网络社区中的事件的多个用户账户的性能评估。在一些实现中，这些服务可以被实现为专用计算设备，专用处理器，专用虚拟机实例和/或类似物。在其他实现中，各种不同的节点可以实现与这些服务相关联的任何功能。

多个计算机设备10可以被配置为访问提供商网络2的内容和服务。多个计算机设备10可以包括任何类型的电子设备，诸如移动设备、平板设备、膝上型计算机、工作站、虚拟现实设备，游戏设备、机顶盒、数字流媒体设备、车辆终端、智能电视、机顶盒、电子书阅读器等。

多个计算机设备10可以与一个或多个用户相关联。单个用户可以使用多个计算机设备10中的一个或多个来访问提供商网络2。多个计算机设备10可以旅行到各种位置并使用不同的网络来访问提供商网络2。

计算机设备10可以包括应用12。应用12将内容输出(例如，显示、渲染、呈现)给用户。所述应用12可以是视频客户端(如bilibili客户端)、浏览器客户端或基于微信的微信小程序等。内容可以包括视频，音频，弹幕内容和/或类似物。所述弹幕内容可以是文字、表情、图案等，可以有不同的颜色、大小、动画、滚动方向等。

作为示例，应用程序12可以将针对某些用户的报告发送到处理服务，并且应用程序12还可以将关于报告的评论发送到处理服务6。从多个计算机设备10发送的事件或评论包括提交事件的原因，与事件相关联的内容属性，用户帐户信息等。

实施例一

图2示意性示出了根据本申请实施例一的基于微信小程序的弹幕处理方法的流程图。可以理解，本方法实施例可以被执行在计算机设备10中，且本方法实施例的流程图不用于对执行步骤的顺序进行限定。

如图2所示，该基于微信小程序的弹幕处理方法可以包括步骤s200～s204，其中：

步骤s200，获取视频播放页面，用于输出视频流。

所述视频播放页面是基于微信小程序框架之上的页面。

所述视频播放页面包逻辑层和视图层，其中逻辑层包括弹幕加载器、弹幕计算器和弹幕时间线。其中，所述弹幕加载器负责弹幕数据的请求和编译解析等操作，所述弹幕计算器负责弹幕数据的遍历查找等操作，所述弹幕时间线用于负责更新时间线。

步骤s202，获取与所述视频流关联的多个弹幕数据。

在示例性的实施例中，所述多个弹幕数据可以是原始弹幕数据。

在另外一些实施例中，所述多个弹幕数据也可以是克隆多个原始弹幕数据得到的弹幕数据。具体的：计算机设备10通过弹幕加载器向提供商网络2发起弹幕获取请求并接收提供商网络2返回的多个原始弹幕数据；之后，克隆所述多个原始弹幕数据。其中，所述多个原始弹幕数据不用弹幕播放，所述多个弹幕数据用于弹幕播放。

多个原始弹幕数据和多个弹幕数据是信息一致的，且以数组格式保存。

举例而言，每个弹幕数据可以包括如下信息：

由于所述视频播放页面是基于微信小程序框架之上的页面，其包括逻辑层和视图层，所述逻辑层和视图层之间是异步通信的，该种异步通信的方式，在处理所述多个弹幕时容易出现bug。为解决该问题，本实施例模拟单线程的阻塞机制，具体实现步骤如下：

步骤s204，以预定时间间隔执行弹幕处理操作，其中，所述弹幕处理操作包括在逻辑层对所述多个弹幕数据进行弹幕处理。

可以理解，可以基于计算机设备10的硬件资源(如cpu性能等、屏幕刷新频率)，来设定一个均衡的时间间隔作为所述预定时间间隔，有规律地执行弹幕处理操作，从而保障弹幕流畅性和计算资源的合理性，避免了无规律状态下的弹幕处理操作导致的诸如出现弹幕显示不流畅、计算资源使用过多等种种问题。

需要明白的是，要保证弹幕播放不出现卡帧，即需要在没有性能浪费和掉帧的情况下让代码能执行最多次，如果代码执行的次数不够的情况，就会出现掉帧的现象，但是如果代码执行的次数过多，又会导致cpu占用过高，性能浪费等问题。本实施例通过模拟requestanimationframe，来实现弹幕处理操作的优化。具体如下：

如图3所示，以预定时间间隔执行弹幕处理操作，可以为步骤s204’：通过模拟requestanimationframeapi得到的目标函数，以逐帧调用渲染函数以执行所述弹幕处理操作的代码。

所述目标函数包括定时函数和回调函数，其中所述定时函数中的时间参数是根据屏幕刷新频率确定，所述目标函数以递归方式被调用，所述回调函数用于调用所述渲染函数以执行所述弹幕处理操作。

作为一个具体示例：可以封装一个自定义的目标函数，该目标函数接受一个回调函数，用settimeoutapi每16.7毫秒记录一下系统时间，当上一次调用时间大于16.7毫秒时才允许执行回调函数，最后，用递归方式调用这个封装函数，并将渲染函数作为回调传入，从而实现了模拟的requestanimationframe效果。通过逐帧的思想和递归调用的思想实现以下效果：在没有性能浪费和掉帧的情况下让代码能执行最多次，即，在相同的时间内不影响性能的情况下将代码执行尽可能多的次数保证用户有良好的体验。

需要注意的是，这是本发明人深入研发所得，并不是本领域技术人员可以随意得到的。虽然本实施例采用了模拟requestanimationframe的做法，通过目标函数执行弹幕处理操作和通过requestanimationframe执行渲染操作之间具有巨大的差异性，例如，两者用途完全不同。分析如下：

requestanimationframe用于常规浏览器中，其原理就是与屏幕刷新频率保持同步，其在于每大约16.7秒重绘一次画布；

目标函数，其在于微信小程序页面中的逻辑层的弹幕处理操作。

下面将对弹幕处理操作进行详述。

在示例性的实施例中，如图4所示，所述弹幕处理操作可以包括如下操作：步骤s400，对所述多个弹幕数据执行遍历，以查找所述多个弹幕数据中是否包括处于待发射状态的弹幕数据；步骤s402，如果所述多个弹幕数据中包括所述处于待发射状态的弹幕数据，则将所述处于待发射状态的弹幕数据添加到待发射弹幕队列中，并通知所述视图层进行数据更新操作，根据所述处于待发射状态的弹幕数据执行第一次渲染操作。所述第一次渲染操作：在可视区之外，插入真实的弹幕元素，用户无法看到并且没有添加运动效果。这么做是为了方便后面获取弹幕元素的真实的弹幕宽度来计算弹幕的运动初始位置和运动终点位置，以及用于作为判断多个弹幕轨道是否有处于空闲状态的弹幕轨道的依据之一。步骤s404，获取所述第一次渲染操作得到的弹幕元素的弹幕宽度。步骤s406，根据所述弹幕元素的弹幕宽度，判断多个弹幕轨道中是否包括处于空闲状态下的弹幕轨道。步骤s408，如果所述多个弹幕轨道中包括处于空闲状态下的弹幕轨道，则通知所述视图层进行数据更新操作以执行第二次渲染操作。其中，所述第二次渲染操作得到的弹幕元素用于弹幕播放。所述第二次渲染操作：将弹幕元素的弹幕速度、弹幕宽度、弹幕内容、运动效果等进行数据绑定，通知视图层根据绑定数据进一步渲染出相应的弹幕元素。如果所述多个弹幕轨道中没有处于空闲状态下的弹幕轨道，意味着目前弹幕过多，则从待发射弹幕队列丢弃该处于待发射状态的弹幕数据。

可以理解，判断多个弹幕轨道中是否包括处于空闲状态下的弹幕轨道，可以由多种判断方式。例如，如图5所示，可以通过如下步骤判断各个弹幕轨道是否处于空闲状态：步骤s500，判断第k个弹幕轨道中是否为空。如果是，进入步骤s502，否则进入步骤s504。步骤s502，判断所述第k个弹幕轨道处于空闲状态下。步骤s504，根据所述弹幕元素的弹幕宽度计算所述弹幕运算的弹幕速度。步骤s506，根据所述弹幕元素的弹幕速度和弹幕发射时间，判断所述弹幕元素的弹幕内容是否会与所述第k个弹幕轨道中的其他弹幕内容发生碰撞。如果是，进入步骤s502，否则进入步骤s508。步骤s508，判断所述第k个弹幕轨道处于拥挤状态下。

在示例性的实施例中，所述弹幕处理操作可以包括如下操作：对所述弹幕时间线的时间线进行更新操作，以此确定弹幕时间线和视频流的当前播放时间同步。

当然，所述弹幕处理操作可以包括一些其他操作，例如：对所述多个弹幕数据执行遍历，以查找所述多个弹幕数据中是否包括处于待过期状态的弹幕数据，如果包括处于待过期状态的弹幕数据，则删除该处于过期状态的弹幕数据，以减少后续遍历次数。

在示例性的实施例中，如图6所示，步骤s204还可以包括步骤s600～s604，其中：步骤s600，以所述预定时间间隔轮询是否可以执行所述弹幕处理操作；步骤s602，如果所述逻辑层处于忙碌状态中，则判断不可以执行所述弹幕处理操作；步骤s604，如果所述逻辑层处于空闲状态中，则判断可以执行所述弹幕处理操作。

由于微信小程序的逻辑层和视图层(用于执行渲染操作)之间是异步通信的，如渲染操作、弹幕元素信息获取操作等，均是异步操作。在处理这些异步操作的过程中，如果插入其他的操作，容易导致会出现不可预期的bug。因此，在进行某个弹幕处理操作时，会标识为忙碌状态。例如，当第i次轮询时，检测到代表忙碌状态的标识时，则不会启动新一轮的弹幕处理操作，而是，等待诸如16.7毫秒之后进行第i+1次轮询，直至检测到代表空闲状态的标识，则开启新一轮的弹幕处理操作。这种通过标识来允许或阻塞后续操作的做法，确保每执行完一次弹幕处理操作再执行下一次弹幕处理操作，使得上一次弹幕处理操作不会受到下一次弹幕操作的影响，从而导致不可预期的bug出现。

如图7所示，下面提供一个用于辅助理解的具体示例，需要说明的是，该示例并不用于限制专利保护范围。

步骤s700，对微信小程序页面执行初始化操作。

步骤s702，发起弹幕数据请求。

在所述微信小程序页面完成初始化之后，弹幕加载器向提供商网络2发起弹幕数据请求，并接收提供商网络2返回的xml(extensiblemarkuplanguage，可扩展标记语言)文件。

所述弹幕加载器位于微信小程序页面的逻辑层。该逻辑层还包括弹幕计算器和弹幕时间线。

步骤s704，编译xml文件以获取多个弹幕数据。

具体的，将xml文件编译为element对象，从element对象上获取到多个弹幕数据，如弹幕内容、发射时间、弹幕颜色、运动时间等属性(弹幕数据)，并将这些属性转化为json的数据格式存储到本地数组中，得到存储在本地数组中的多个弹幕数据。

所述多个弹幕数据：可以用于弹幕播放；也可以用于作为原始数据，不用于弹幕播放，例如可以克隆所述多个弹幕数据，将克隆得到的多个克隆弹幕数据用于弹幕播放。

在本示例性中，将所述多个弹幕数据用于弹幕播放。

步骤s706，开始弹幕播放：

通过模拟requestanimationframe得到的目标函数，以逐帧调用渲染函数以执行所述弹幕处理操作的代码，每执行一轮代码可以分解为如下步骤s708～s720。

步骤s708，通过弹幕计算器遍历各个弹幕数据，以计算和筛选各个弹幕数据是否处于待发射状态或处于过期状态。

下面以其中一个弹幕数据j为例：

步骤s710，判断弹幕数据j是否到达发射时间。如果是，进入步骤s712，否则进入步骤s714。

根据视频流的当前播放时间和弹幕数据j中的发射时间，判断弹幕数据j中的弹幕内容是否达到发射时间，也就是说，弹幕数据j在当前是否处于待发射状态。

步骤s712，将弹幕数据j添加到待发射弹幕队列中，通知所述视图层进行数据更新操作以执行第一次渲染操作。进入步骤s718。

通知所述视图层进行数据更新操作，根据所述处于待发射状态的弹幕数据执行第一次渲染操作。

如：在可视区之外，插入真实的弹幕元素，用户无法看到并且没有添加运动效果，这么做是为了获取弹幕元素的真实的弹幕宽度，来计算弹幕的运动初始位置和运动终点位置，以及用于作为判断多个弹幕轨道是否有处于空闲状态的弹幕轨道的依据之一。

添加到待发射弹幕队列中的弹幕数据j会从所述多个弹幕数据中删除，以减少后续遍历次数。

步骤s714，判断弹幕数据j是否处于过期状态。如果是，进入步骤s716；否则，该弹幕数据j将等待下一次遍历操作。

步骤s716，销毁弹幕数据j。例如，将弹幕数据j从所述多个弹幕数据删除，以减少后续遍历次数。

步骤s718，判断当前是否有空闲的弹幕轨道。如果是，进入步骤s720，否则进入步骤s716。

示例性的，获取所述第一次渲染操作得到的弹幕元素的弹幕宽度。根据所述弹幕元素的弹幕宽度，判断多个弹幕轨道中是否包括处于空闲状态下的弹幕轨道。

假设第k个弹幕轨道中最后一条弹幕内容的发射时间为t1且运动时间为t2，那么这最后一条弹幕内容完全消失在弹幕播放区域(可视区)的时间就是t1+t2，而弹幕数据j的发射时间t3、运动时间t4、弹幕宽度w2和所述弹幕播放区域的显示宽度w1，那么弹幕数据j的运动速度为就是s1＝(w1+w2)/t4,由此可以得出所述弹幕数据j的弹幕内容第一次到达弹幕播放区域的左边边界的时间为t3+(w1/s1)。当t1+t2<t3+(w1/s1)时，则表示当这最后一条弹幕内容完全消失在弹幕播放区域范围时，弹幕数据j的弹幕内容仍然没有追上这最后一条弹幕内容，也就意味着这最后一条弹幕内容和弹幕数据j的弹幕内容之间不会相撞，因此可以将所述第k个弹幕轨道的当前状态确定为空闲状态。

步骤s720，加入虚拟弹幕轨迹和渲染队列，通知所述视图层进行数据更新操作以执行第二次渲染操作。

①将所述待发射弹幕队列中的弹幕数据j加入到虚拟弹幕轨道中。其中，所述虚拟弹幕轨道用于判断各个弹幕轨道是否处于空闲状态。

②将所述待发射弹幕队列中的弹幕数据j加入到渲染列表中，以进一步创建相应的弹幕元素，如运动效果。

实施例二

图8示意性示出了根据本申请实施例二的基于微信小程序的弹幕处理系统的框图，该基于微信小程序的弹幕处理系统可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例中各程序模块的功能。

如图8所示，该基于微信小程序的弹幕处理系统800可以包括第一获取模块810、第二获取模块820及弹幕处理模块830，其中：

第一获取模块810，用于获取视频播放页面，用于输出视频流。

第二获取模块820，用于获取与所述视频流关联的多个弹幕数据。

弹幕处理模块830，用于以预定时间间隔执行弹幕处理操作，其中，所述弹幕处理操作包括在逻辑层对所述多个弹幕数据进行弹幕处理。

在示例性的实施例中，以预定时间间隔执行弹幕处理操作，包括：通过模拟requestanimationframe得到的目标函数，以逐帧调用渲染函数以执行所述弹幕处理操作的代码。

在示例性的实施例中，所述目标函数包括定时函数和回调函数，其中所述定时函数中的时间参数是根据屏幕刷新频率确定，所述目标函数以递归方式被调用，所述回调函数用于调用所述渲染函数以执行所述弹幕处理操作。

在示例性的实施例中，以预定时间间隔执行弹幕处理操作，包括：以所述预定时间间隔轮询是否可以执行所述弹幕处理操作；如果所述逻辑层处于忙碌状态中，则判断不可以执行所述弹幕处理操作；如果所述逻辑层处于空闲状态中，则判断可以执行所述弹幕处理操作。

在示例性的实施例中，所述弹幕处理操作包括：对所述多个弹幕数据执行遍历，以查找所述多个弹幕数据中是否包括处于待发射状态的弹幕数据；如果所述多个弹幕数据中包括所述处于待发射状态的弹幕数据，则：将所述处于待发射状态的弹幕数据添加到待发射弹幕队列中，并通知所述视图层进行数据更新操作，根据所述处于待发射状态的弹幕数据执行第一次渲染操作；获取所述第一次渲染操作得到的弹幕元素的弹幕宽度；根据所述弹幕元素的弹幕宽度，判断多个弹幕轨道中是否包括处于空闲状态下的弹幕轨道；及如果所述多个弹幕轨道中包括处于空闲状态下的弹幕轨道，则进行弹幕元素的数据绑定，以通知所述视图层进行数据更新操作以执行第二次渲染操作；其中，所述第二次渲染操作得到的弹幕元素用于弹幕播放。

在示例性的实施例中，根据所述弹幕元素的弹幕宽度，判断多个弹幕轨道中是否包括处于空闲状态下的弹幕轨道，包括：判断第k个弹幕轨道中是否为空，其中，k为正整数，k的初始值为1；如果第k个弹幕轨道中为空，则判断所述第k个弹幕轨道处于空闲状态下；如果第k个弹幕轨道中不为空，则根据所述弹幕元素的弹幕宽度计算所述弹幕元素的弹幕速度；根据所述弹幕元素的弹幕速度，判断所述弹幕元素的弹幕内容是否会与所述第k个弹幕轨道中的其他弹幕内容发生碰撞；如果所述弹幕元素的弹幕内容不会与所述第k个弹幕轨道中的其他弹幕内容发生碰撞，则判断所述第k个弹幕轨道处于空闲状态下；及如果所述弹幕元素的弹幕内容会与所述第k个弹幕轨道中的其他弹幕内容发生碰撞，则判断所述第k个弹幕轨道处于拥挤状态下。

在示例性的实施例中，所述逻辑层包括弹幕时间线，所述弹幕处理操作还包括：对所述弹幕时间线的时间线进行更新操作。

实施例三

图9示意性示出了根据本申请实施例三的适于实现基于微信小程序的弹幕处理方法的计算机设备的硬件架构示意图。本实施例中，计算机设备10是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。计算机设备10可以是诸如智能手机、电脑、投影仪、机顶盒等，也可以是虚拟机主机进程和一个或多个虚拟机实例，或者是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图9所示，计算机设备10至少包括但不限于：可通过系统总线相互通信链接存储器1010、处理器1020、网络接口1030。其中：

存储器1010至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、随机访问存储器(ram)、静态随机访问存储器(sram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、可编程只读存储器(prom)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器1010可以是计算机设备10的内部存储模块，例如该计算机设备10的硬盘或内存。在另一些实施例中，存储器1010也可以是计算机设备10的外部存储设备，例如该计算机设备10上配备的插接式硬盘，智能存储卡(smartmediacard，简称为smc)，安全数字(securedigital，简称为sd)卡，闪存卡(flashcard)等。当然，存储器1010还可以既包括计算机设备10的内部存储模块也包括其外部存储设备。本实施例中，存储器1010通常用于存储安装于计算机设备10的操作系统和各类应用软件，例如基于微信小程序的弹幕处理方法的程序代码等。此外，存储器1010还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器1020在一些实施例中可以是中央处理器(centralprocessingunit，简称为cpu)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器1020通常用于控制计算机设备10的总体操作，例如执行与计算机设备10进行数据交互或者通信相关的控制和处理等。本实施例中，处理器1020用于运行存储器1010中存储的程序代码或者处理数据。

网络接口1030可包括无线网络接口或有线网络接口，该网络接口1030通常用于在计算机设备10与其他计算机设备之间建立通信链接。例如，网络接口1030用于通过网络将计算机设备10与外部终端相连，在计算机设备10与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(intranet)、互联网(internet)、全球移动通讯系统(globalsystemofmobilecommunication，简称为gsm)、宽带码分多址(widebandcodedivisionmultipleaccess，简称为wcdma)、4g网络、5g网络、蓝牙(bluetooth)、wi-fi等无线或有线网络。

需要指出的是，图9仅示出了具有部件1010-1030的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。

在本实施例中，存储于存储器1010中的基于微信小程序的弹幕处理方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器1020)所执行，以完成本申请。

实施例四

本实施例还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的基于微信小程序的弹幕处理方法的步骤。

本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、随机访问存储器(ram)、静态随机访问存储器(sram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、可编程只读存储器(prom)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(smartmediacard，简称为smc)，安全数字(securedigital，简称为sd)卡，闪存卡(flashcard)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中的基于微信小程序的弹幕处理方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。

显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。

以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。