CN115278337A - 一种弹幕渲染方法、装置、设备及存储介质 - Google Patents

Abstract

本发明公开了一种弹幕渲染方法、装置、设备及存储介质。该方法包括：响应于弹幕开启操作，获取待展示的目标弹幕数据集合；根据弹幕数据属性，将所述目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上；分别为各弹幕轨道添加关键帧动画；如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示。本发明实施例的技术方案，对于大量的CSS弹幕数据,通过给布置有CSS弹幕数据的弹幕轨道添加动画，减少浏览器对CSS样式的解析，提升浏览器的渲染速度。

Description

一种弹幕渲染方法、装置、设备及存储介质

技术领域

本发明涉及互联网技术领域，尤其涉及一种弹幕渲染方法、装置、设备及存储介质。

背景技术

随着互联网技术的发展，发布弹幕已经成为用户观看直播或视频时，一种必不可少的互动方式。

但是，当观看的视频中出现大量的、由层叠样式表(Cascading Style Sheets，CSS)生成的弹幕数据时，会对浏览器的渲染性能造成影响，导致弹幕重叠或者视频画面卡顿。

发明内容

本发明提供了一种弹幕渲染方法、装置、设备及存储介质，以解决对于大量的CSS弹幕数据，浏览器的渲染性能降低的问题。

根据本发明的一方面，提供了一种弹幕渲染方法，包括：

响应于弹幕开启操作，获取待展示的目标弹幕数据集合；

根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上；

分别为各弹幕轨道添加关键帧动画；

如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示。

可选的，在根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上之前，还包括：

计算目标弹幕数据集合中的各CSS弹幕数据的数据长度；

按照弹幕展示时间的先后顺序，将目标弹幕数据集合中的各CSS弹幕数据以及对应的数据长度，关联存储至等待队列中。

采用上述技术方案，通过将各CSS弹幕数据以及数据长度关联存储至队列中，为后续按照CSS弹幕数据展示的先后顺序安排CSS弹幕数据的位置，以及根据CSS弹幕数据的长度确定CSS弹幕数据在弹幕轨道中的具体位置做好准备。

可选的，根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上，包括：

如果等待队列不为空，则对等待队列队头的目标CSS弹幕数据以及对应的目标数据长度，进行关联出队操作；

确定与目标CSS弹幕数据对应的目标轨道组，并将目标数据长度与目标轨道组中各弹幕轨道的空闲长度进行比较；

如果目标轨道组中不存在空闲长度大于或等于目标数据长度的目标弹幕轨道，则将目标数据长度与下一个轨道组中各弹幕轨道的空闲长度进行比较，直至找到空闲长度大于或等于目标数据长度的目标弹幕轨道；

将目标CSS弹幕数据放在目标弹幕轨道上。

采用上述技术方案，针对指定的CSS弹幕数据，通过将弹幕数据的数据长度与弹幕轨道的空闲长度进行比较，保证在CSS弹幕数据不重叠的情况下，将CSS弹幕数据排列到可以容纳完整的弹幕数据的弹幕轨道上，从而呈现出较好的弹幕展示效果。

可选的，将目标CSS弹幕数据放在目标弹幕轨道上，包括：

将目标弹幕轨道最左侧的可占用空闲位置，作为目标CSS弹幕数据的起始位置；

从起始位置开始，将目标CSS弹幕数据放在目标弹幕轨道上；

将目标弹幕轨道的空闲长度更新为，原空闲长度减去目标CSS弹幕数据对应的目标数据长度，以及弹幕数据间的展示距离得到的差值。

采用上述技术方案，由于弹幕轨道是从视频窗口的右侧进入滚动到左侧出去，且展示顺序在先的弹幕数据先确定在弹幕轨道中位置，因此，可以从弹幕轨道左侧的空闲位置开始安排弹幕数据，以保证在先展示的弹幕数据先出现在视频窗口中。对于新加入弹幕数据的弹幕轨道，及时更新弹幕轨道的空闲长度，以避免影响后续弹幕数据在弹幕轨道上的位置确定。

可选的，分别为各弹幕轨道添加关键帧动画，包括：

根据视频窗口长度以及弹幕滚动速度，计算单个弹幕轨道的展示时长；

根据弹幕开启时间，确定第一个轨道组中各弹幕轨道的动画触发时间；

计算当前轨道组中各弹幕轨道的动画触发时间与单个弹幕轨道的展示时长的和值，作为下一个轨道组中对应位置的弹幕轨道的动画触发时间；

为各弹幕轨道添加关键帧动画以及对应的动画触发时间。

采用上述技术方案，通过计算单个弹幕轨道的展示时长，以及相同位置上的各个弹幕轨道的展示顺序，则可以计算出各个弹幕轨道进入视频窗口的时间，即确定各个弹幕轨道的动画触发时间，实现各个弹幕轨道一个接一个的顺序在视频窗口上滚动展示。

可选的，还包括：

响应于对第一弹幕数据的发布操作，对第一弹幕数据进行筛选验证；

如果验证通过，则计算第一弹幕数据对应的第一数据长度，并从当前展示轨道组中，匹配空闲长度大于或等于第一数据长度的目标弹幕轨道；

如果当前展示轨道组中不存在空闲长度大于或等于第一数据长度的目标弹幕轨道，则将第一数据长度与下一个轨道组中各弹幕轨道的空闲长度进行比较，直至找到空闲长度大于或等于第一数据长度的目标弹幕轨道；

将第一弹幕数据，插入目标弹幕轨道中的对应位置。

采用上述技术方案，在展示弹幕数据的过程中，如果有用户临时发布第一弹幕数据，则从当前展示的弹幕轨道开始查找可以插入第一弹幕数据的轨道位置，以实现在不影响弹幕数据正常展示的情况下，对用户临时发布的弹幕数据进行渲染展示。

可选的，响应于弹幕开启操作，获取待展示的目标弹幕数据集合，包括：

响应于弹幕开启操作，记录视频的当前播放位置；

根据当前播放位置，确定目标时间段；

选择发布时间落在目标时间段内的CSS弹幕数据，加入目标弹幕数据集合。

采用上述技术方案，由于弹幕数据是与视频画面相对应的，因此，记录弹幕开启时对应的视频播放位置，进而选择临近视频播放位置的弹幕数据，作为待展示的弹幕数据，以便于后续实现预先将弹幕数据加入弹幕轨道进行排列的操作。

根据本发明的另一方面，提供了一种弹幕渲染装置，包括：

数据获取模块，用于响应于弹幕开启操作，获取待展示的目标弹幕数据集合；

弹幕排列模块，用于根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上；

动画添加模块，用于分别为各弹幕轨道添加关键帧动画；

弹幕渲染模块，用于如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示。

根据本发明的另一方面，提供了一种电子设备，电子设备包括：

至少一个处理器；以及

与至少一个处理器通信连接的存储器；其中，

存储器存储有可被至少一个处理器执行的计算机程序，计算机程序被至少一个处理器执行，以使至少一个处理器能够执行本发明任一实施例的弹幕渲染方法。

根据本发明的另一方面，提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机指令，计算机指令用于使处理器执行时实现本发明任一实施例的弹幕渲染方法。

本发明实施例的技术方案，通过响应于弹幕开启操作，获取待展示的目标弹幕数据集合；根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上；分别为各弹幕轨道添加关键帧动画；如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示，解决了对于大量的CSS弹幕数据，浏览器的渲染性能降低的问题，取到了对于大量的CSS弹幕数据,通过给布置有CSS弹幕数据的弹幕轨道添加动画，减少浏览器对CSS样式的解析，提升浏览器的渲染速度的有益效果。

应当理解，本部分所描述的内容并非旨在标识本发明的实施例的关键或重要特征，也不用于限制本发明的范围。本发明的其它特征将通过以下的说明书而变得容易理解。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据本发明实施例一提供的一种弹幕渲染方法的流程图；

图2是根据本发明实施例二适应的一种弹幕轨道的示意图；

图3是根据本发明实施例二适应的一种弹幕渲染结果的示意图；

图4是根据本发明实施例二提供的一种弹幕渲染方法的流程图；

图5是根据本发明实施例三提供的一种弹幕渲染装置的结构示意图；

图6是实现本发明实施例的弹幕渲染方法的电子设备的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“目标”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例一

图1是根据本发明实施例一提供的一种弹幕渲染方法的流程图，本实施例可适用于当要在视频中展示大量CSS弹幕数据时，通过为CSS弹幕所在的弹幕轨道添加动画来实现弹幕渲染，提高浏览器的渲染速度的情况，该方法可以由弹幕渲染装置来执行，该装置可以采用硬件和/或软件的形式实现，该装置可配置于电子设备中，例如浏览器设备中。如图1所示，该方法包括：

S110、响应于弹幕开启操作，获取待展示的目标弹幕数据集合。

本实施例中，针对每个视频，都存储有大量的用户在观看视频时发布的CSS弹幕数据。在一个视频播放过程中，如果观看视频的用户点击弹幕开启按钮，则响应于弹幕开启操作，可以获取弹幕开启时刻之后一段时间内的CSS弹幕数据作为即将展示的弹幕数据，组成目标弹幕数据集合。

其中，CSS弹幕数据是基于CSS生成的弹幕数据，CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

可选的，响应于弹幕开启操作，获取待展示的目标弹幕数据集合，包括：响应于弹幕开启操作，记录视频的当前播放位置；根据当前播放位置，确定目标时间段；选择发布时间落在目标时间段内的CSS弹幕数据，加入目标弹幕数据集合。

采用上述技术方案，由于弹幕数据是与视频画面相对应的，因此，记录弹幕开启时对应的视频播放位置，进而选择临近视频播放位置的弹幕数据，作为待展示的弹幕数据，以便于后续实现预先将弹幕数据加入弹幕轨道进行排列的操作。

在一个具体实施方式中，当用户点击弹幕开启按钮时，获取视频窗口中正在播放的视频的播放位置，例如视频播放到00:20：05的位置。假设要获取当前播放时间之后10秒内的CSS弹幕数据，则计算出目标时间段为00:20:05-00:20:15，选择发布时间在目标时间段内的CSS弹幕数据组成目标弹幕数据集合。

S120、根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上。

其中，弹幕数据属性可以是弹幕数据的类型，例如表情、文字、符号等，可以是弹幕数据的长度，例如弹幕数据中包括的文字、表情、符号等的总长度，或者也可以是弹幕数据的其他属性。目标弹幕模式是用户在开启弹幕之前配置的，包括顶部弹幕模式、底部弹幕模式、海量弹幕模式等。针对不同的弹幕模式，弹幕轨道部署在视频窗口的不同位置，弹幕轨道的长度等于视频窗口的长度。例如，如图2所示，对于顶部弹幕模式，其默认对应位于视频窗口顶部的3条弹幕轨道。

需要注意的是，弹幕模式对应的弹幕轨道的数量是可以根据需要进行调整的，例如将顶部弹幕模式对应的弹幕轨道由3条调整为5条，并不是固定不变的。

可选的，在根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上之前，还包括：计算目标弹幕数据集合中的各CSS弹幕数据的数据长度；按照弹幕展示时间的先后顺序，将目标弹幕数据集合中的各CSS弹幕数据以及对应的数据长度，关联存储至等待队列中。

其中，本实施例对计算各CSS弹幕数据的数据长度的方式不做具体限定，只要能计算出弹幕数据长度的方式都可以采用。由于队列具有先进先出的特点，因此，为了使得时间上在先展示的弹幕数据能够先安排弹幕轨道，可以按照弹幕展示时间的先后顺序，将弹幕数据及其数据长度关联存储至等待队列中。可以将弹幕数据和对应的数据长度关联存储至同一个队列中，或者，也可以将弹幕数据和对应的数据长度分别存储至两个队列中的相同位置上。

采用上述技术方案，通过将各CSS弹幕数据以及数据长度关联存储至队列中，为后续按照CSS弹幕数据展示的先后顺序安排CSS弹幕数据的位置，以及根据CSS弹幕数据的长度确定CSS弹幕数据在弹幕轨道中的具体位置做好准备。

可选的，根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上，包括：如果等待队列不为空，则对等待队列队头的目标CSS弹幕数据以及对应的目标数据长度，进行关联出队操作；确定与目标CSS弹幕数据对应的目标轨道组，并将目标数据长度与目标轨道组中各弹幕轨道的空闲长度进行比较；如果目标轨道组中不存在空闲长度大于或等于目标数据长度的目标弹幕轨道，则将目标数据长度与下一个轨道组中各弹幕轨道的空闲长度进行比较，直至找到空闲长度大于或等于目标数据长度的目标弹幕轨道；将目标CSS弹幕数据放在目标弹幕轨道上。

其中，假设一条轨道本质上可以无限长，根据视频窗口，将一条轨道切分为长度等于视频窗口长度的多个轨道片段，例如图2中的浅色弹幕轨道1和深色弹幕轨道1，则切分后位于同一个视频窗口内的所有轨道片段可以称为一个轨道组。例如，图2中视频窗口中浅色的弹幕轨道1-3为一个轨道组，深色的弹幕轨道1-3为另一个轨道组。需要说明的是，本实施例中的轨道组中包括的弹幕轨道实际上是轨道片段。

在一个可选实施方式中，由于需要对目标弹幕数据集中的每个CSS弹幕数据安排弹幕轨道，因此，在等待队列不为空时，将队头的目标CSS弹幕数据以及对应的目标数据长度关联出队，并根据目标CSS弹幕数据的展示时间，找到与之对应的目标轨道组。其中，目标轨道组可以是弹幕轨道中包括的弹幕数据的展示时间与目标CSS弹幕数据的展示时间相近的轨道组，或者是当前尚未排列满CSS弹幕数据的轨道组等。然后将目标CSS弹幕数据的数据长度与目标轨道组中各弹幕轨道的空闲长度进行比较，以在目标轨道组中找到一个可以容纳完整的目标CSS弹幕数据的目标弹幕轨道，即空闲长度大于或等于目标CSS弹幕数据长度的弹幕轨道。如果目标轨道组中的所有弹幕轨道都不能容纳完整的目标CSS弹幕数据，则继续到下一个轨道组中查找，直到找到满足条件的目标弹幕轨道为止。最后将目标CSS弹幕数据放在目标弹幕轨道上。

采用上述技术方案，针对指定的CSS弹幕数据，通过将弹幕数据的数据长度与弹幕轨道的空闲长度进行比较，保证在CSS弹幕数据不重叠的情况下，将CSS弹幕数据排列到可以容纳完整的弹幕数据的弹幕轨道上，从而呈现出较好的弹幕展示效果。

可选的，将目标CSS弹幕数据放在目标弹幕轨道上，包括：将目标弹幕轨道最左侧的可占用空闲位置，作为目标CSS弹幕数据的起始位置；从起始位置开始，将目标CSS弹幕数据放在目标弹幕轨道上；将目标弹幕轨道的空闲长度更新为，原空闲长度减去目标CSS弹幕数据对应的目标数据长度，以及弹幕数据间的展示距离得到的差值。

本实施例中，如图3所示，由于相邻两个弹幕数据之间需要间隔指定距离，因此，如果目标弹幕轨道中已经存放有弹幕数据，则最左侧的可占用空闲位置为，最后一个弹幕数据的结束位置与弹幕数据间的展示距离的和值，即目标CSS弹幕数据的起始位置。相应的，在将目标CSS弹幕数据放在目标弹幕轨道上之后，目标弹幕轨道的空闲长度被更新为原空闲长度减去刚放上的目标CSS弹幕数据的长度，以及与下一个弹幕数据之间间隔的指定距离，得到剩余的空闲长度。

采用上述技术方案，由于弹幕轨道是从视频窗口的右侧进入滚动到左侧出去，且展示顺序在先的弹幕数据先确定在弹幕轨道中的位置，因此，可以从弹幕轨道左侧的空闲位置开始安排弹幕数据，以保证在先展示的弹幕数据先出现在视频窗口中。对于新加入弹幕数据的弹幕轨道，及时更新弹幕轨道的空闲长度，以避免影响后续弹幕数据在弹幕轨道上的位置确定。

S130、分别为各弹幕轨道添加关键帧动画。

其中，关键帧动画就是由许多较短的段构成的动画，每段表示动画的初始值、最终值或中间值，当运行动画时，平滑地从一个值移动到另一个值。

可选的，分别为各弹幕轨道添加关键帧动画，包括：根据视频窗口长度以及弹幕滚动速度，计算单个弹幕轨道的展示时长；根据弹幕开启时间，确定第一个轨道组中各弹幕轨道的动画触发时间；计算当前轨道组中各弹幕轨道的动画触发时间与单个弹幕轨道的展示时长的和值，作为下一个轨道组中对应位置的弹幕轨道的动画触发时间；为各弹幕轨道添加关键帧动画以及对应的动画触发时间。

采用上述技术方案，通过计算单个弹幕轨道的展示时长，以及相同位置上的各个弹幕轨道的展示顺序，可以计算出各个弹幕轨道进入视频窗口的时间，即确定各个弹幕轨道的动画触发时间，实现各个弹幕轨道一个接一个的顺序在视频窗口上滚动展示。

在一个可选实施方式中，由于弹幕轨道的长度与视频窗口的长度相等，且弹幕轨道从视频窗口的右侧进入滚动到左侧，因此，根据视频窗口长度除以弹幕滚动速度就可以计算出单个弹幕轨道的展示时长。然后，由于第一个轨道组中的弹幕轨道是最先出现在视频窗口中的，因此可以将第一个轨道组的弹幕轨道的动画触发时间，设置为弹幕开启时间或者弹幕开启时间后的预设时间。第一轨道组中的各个弹幕轨道的动画触发时间可以相同也可以不同。例如，假设弹幕开启时间为视频播放时间00:25:00，则第一轨道组中的第一个弹幕轨道的动画触发时间可以为00:25:01；第二个弹幕轨道的动画触发时间可以为00:25:02，第三个弹幕轨道的动画触发时间可以为00:25:03。由于不同轨道组中相同位置的弹幕轨道实际上是同一条轨道的轨道片段，因此，根据后一个轨道组中第N条弹幕轨道的动画触发时间，等于前一个轨道组中第N条弹幕轨道的动画触发时间与单个弹幕轨道的展示时长的和值，可以得到各条弹幕轨道的动画触发时间。

S140、如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示。

本实施例中，如果目标弹幕轨道的动画触发时间到达，则对目标弹幕轨道的关键帧动画进行CSS样式解析，将目标弹幕轨道上的CSS弹幕内容渲染到浏览器的屏幕上显示，得到如图3所示的弹幕渲染结果。

可选的，还包括：响应于对第一弹幕数据的发布操作，对第一弹幕数据进行筛选验证；如果验证通过，则计算第一弹幕数据对应的第一数据长度，并从当前展示轨道组中，匹配空闲长度大于或等于第一数据长度的目标弹幕轨道；如果当前展示轨道组中不存在空闲长度大于或等于第一数据长度的目标弹幕轨道，则将第一数据长度与下一个轨道组中各弹幕轨道的空闲长度进行比较，直至找到空闲长度大于或等于第一数据长度的目标弹幕轨道；将第一弹幕数据，插入目标弹幕轨道中的对应位置。

本实施例中，如果用户临时要发送第一弹幕数据，则先将第一弹幕数据发送给后台程序进行敏感词筛选验证，如果返回的验证结果为不包含敏感词，则认为验证通过。计算第一弹幕数据对应的第一数据长度，并从当前进入视频窗口进行展示的轨道组中的弹幕轨道中匹配目标弹幕轨道。如果没有匹配到合适的目标弹幕轨道，则继续对下一个轨道组中的弹幕轨道进行匹配，直至找到空闲长度大于或等于第一数据长度的目标弹幕轨道为止，将第一弹幕数据插入到目标弹幕轨道的对应位置。

其中，当前展示轨道组可以是当前进入视频窗口进行展示的轨道组。

采用上述技术方案，在展示弹幕数据的过程中，如果有用户临时发布第一弹幕数据，则从当前展示的弹幕轨道开始查找可以插入第一弹幕数据的轨道位置，以实现在不影响弹幕数据正常展示的情况下，对用户临时发布的弹幕数据进行渲染展示。

本发明实施例的技术方案，通过响应于弹幕开启操作，获取待展示的目标弹幕数据集合；根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上；分别为各弹幕轨道添加关键帧动画；如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示，解决了对于大量的CSS弹幕数据，浏览器的渲染性能降低的问题，对于大量的CSS弹幕数据,通过给布置有CSS弹幕数据的弹幕轨道添加动画，减少浏览器对CSS样式的解析，提升浏览器的渲染速度。

实施例二

图4是根据本发明实施例二提供的一种弹幕渲染方法的流程图，本实施例在上述实施例的基础上进行步骤细化。如图4所示，该方法包括：

S410、响应于弹幕开启操作，获取待展示的目标弹幕数据集合。

本实施例中，当用户点击弹幕开启按钮时，获取视频窗口中正在播放的视频的播放位置，并根据当前播放位置确定目标时间段，然后选择发布时间落在目标时间段内的CSS弹幕数据，组成目标弹幕数据集合。

S420、计算目标弹幕数据集合中的各CSS弹幕数据的数据长度。

本实施例中，可以先对CSS弹幕数据中的数据类型进行分类，例如表情、文字、符号等，然后分别计算每种类型的弹幕数据的长度，最后对各种类型的弹幕数据的长度进行求和，作为CSS弹幕数据的数据长度。

S430、按照弹幕展示时间的先后顺序，将目标弹幕数据集合中的各CSS弹幕数据以及对应的数据长度，关联存储至等待队列中。

本实施例中，使用等待队列关联存储CSS弹幕数据以及对应的数据长度，可以一边进行数据入队操作，另一边进行数据出队操作，加快实现将弹幕数据安排到弹幕轨道上的速度。

S440、如果等待队列不为空，则对等待队列队头的目标CSS弹幕数据以及对应的目标数据长度，进行关联出队操作。

本实施例中，由于需要对目标弹幕数据集中的每个CSS弹幕数据安排弹幕轨道，因此，在等待队列不为空时，将队头的目标CSS弹幕数据以及对应的目标数据长度关联出队。

S450、确定目标CSS弹幕数据对应的目标轨道组中，是否存在空闲长度大于或等于目标数据长度的目标弹幕轨道，如果存在，则执行S470，否则执行S460。

本实施例中，根据目标CSS弹幕数据的展示时间，查找弹幕数据的展示时间与目标CSS弹幕数据的展示时间相近的目标轨道组，或者是当前尚未排列满CSS弹幕数据的目标轨道组。然后将目标CSS弹幕数据的数据长度与目标轨道组中各弹幕轨道的空闲长度进行比较，判断目标轨道组中是否存在一个可以容纳完整的目标CSS弹幕数据的目标弹幕轨道。如果存在，则执行S470，将目标弹幕数据放在目标弹幕轨道上，否则执行S460，继续在下一个轨道组中寻找目标弹幕轨道。

其中，在查找目标弹幕轨道时，可以先从目标轨道组中随机选择一条弹幕轨道，或者按照空闲长度由小到大的顺序选择目标轨道组中的弹幕轨道。然后比较目标CSS弹幕数据的长度与该弹幕轨道的空闲长度，判断该弹幕轨道能否容纳目标CSS弹幕数据。如果能，则执行S470，将目标弹幕数据放在目标弹幕轨道上。如果不能，则从目标轨道组中选择另一条弹幕轨道进行判断。如果目标轨道组中找不到满足条件的目标弹幕轨道，则执行S460，继续在下一个轨道组中寻找目标弹幕轨道。

或者，为了快速确定弹幕数据排列的弹幕轨道，也可以直接选择目标轨道组中空闲长度最大的弹幕轨道，比较该弹幕轨道的空闲长度是否大于或等于目标CSS弹幕数据的长度。如果是，则执行S470，将目标CSS弹幕数据放在该弹幕轨道上。否则，执行S460，继续比较下一个轨道组中空闲长度最大的弹幕轨道的空闲长度，是否大于或等于目标CSS弹幕数据的长度，直至找到一个可以容纳完整的目标CSS弹幕数据的目标弹幕轨道。

S460、将目标轨道组的下一个轨道组更新为目标轨道组，返回执行S450。

S470、将目标CSS弹幕数据放在目标弹幕轨道上。

本实施例中，由于弹幕轨道是从视频窗口的右侧进入滚动到左侧出去，并且展示顺序在先的弹幕数据先确定在弹幕轨道中的位置，因此，可以从弹幕轨道左侧的空闲位置开始安排弹幕数据，以保证在先展示的弹幕数据先出现在视频窗口中。

S480、如果目标弹幕数据集合中的所有CSS弹幕数据都放在弹幕轨道上，则为各弹幕轨道添加关键帧动画以及对应的动画触发时间。

本实施例中，可以通过计算单个弹幕轨道的展示时长，以及不同轨道组中相同位置上的各个弹幕轨道的展示顺序，计算出各个弹幕轨道进入视频窗口的时间，即确定各个弹幕轨道的动画触发时间。进而可以为各弹幕轨道添加关键帧动画以及对应的动画触发时间，实现各个弹幕轨道一个接一个的顺序在视频窗口上滚动展示。

S490、如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示。

本实施例中，如果目标弹幕轨道的动画触发时间到达，则对目标弹幕轨道的关键帧动画进行CSS样式解析，将目标弹幕轨道上的CSS弹幕内容渲染到浏览器的屏幕上显示。

本发明实施例的技术方案，通过响应于弹幕开启操作，获取待展示的目标弹幕数据集合；针对目标弹幕数据集合中的CSS弹幕数据，通过将弹幕数据的数据长度与弹幕轨道的空闲长度进行比较，保证在CSS弹幕数据不重叠的情况下，将CSS弹幕数据排列到可以容纳完整的弹幕数据的弹幕轨道上，呈现出较好的弹幕展示效果。并且，从弹幕轨道左侧的空闲位置开始安排弹幕数据，以保证在先展示的弹幕数据优先出现在视频窗口中。最后为各弹幕轨道添加关键帧动画以及对应的动画触发时间，使得浏览器只需对各弹幕轨道进行CSS样式解析，即可实现各个弹幕轨道一个接一个的顺序在视频窗口中滚动展示，减少了浏览器对CSS样式的解析，提升了浏览器的渲染速度。

实施例三

图5为本发明实施例三提供的一种弹幕渲染装置的结构示意图。如图5所示，该装置包括：

数据获取模块510，用于响应于弹幕开启操作，获取待展示的目标弹幕数据集合；

弹幕排列模块520，用于根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上；

动画添加模块530，用于分别为各弹幕轨道添加关键帧动画；

弹幕渲染模块540，用于如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示。

本发明实施例的技术方案，通过响应于弹幕开启操作，获取待展示的目标弹幕数据集合；根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上；分别为各弹幕轨道添加关键帧动画；如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示，解决了对于大量的CSS弹幕数据，浏览器的渲染性能降低的问题，对于大量的CSS弹幕数据,通过给布置有CSS弹幕数据的弹幕轨道添加动画，减少浏览器对CSS样式的解析，提升浏览器的渲染速度。

可选的，弹幕排列模块520，还用于：

在根据弹幕数据属性，将目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上之前，

计算目标弹幕数据集合中的各CSS弹幕数据的数据长度；

按照弹幕展示时间的先后顺序，将目标弹幕数据集合中的各CSS弹幕数据以及对应的数据长度，关联存储至等待队列中。

可选的，弹幕排列模块520，用于：

如果等待队列不为空，则对等待队列队头的目标CSS弹幕数据以及对应的目标数据长度，进行关联出队操作；

确定与目标CSS弹幕数据对应的目标轨道组，并将目标数据长度与目标轨道组中各弹幕轨道的空闲长度进行比较；

如果目标轨道组中不存在空闲长度大于或等于目标数据长度的目标弹幕轨道，则将目标数据长度与下一个轨道组中各弹幕轨道的空闲长度进行比较，直至找到空闲长度大于或等于目标数据长度的目标弹幕轨道；

将目标CSS弹幕数据放在目标弹幕轨道上。

可选的，弹幕排列模块520，用于：

将目标弹幕轨道最左侧的可占用空闲位置，作为目标CSS弹幕数据的起始位置；

从起始位置开始，将目标CSS弹幕数据放在目标弹幕轨道上；

将目标弹幕轨道的空闲长度更新为，原空闲长度减去目标CSS弹幕数据对应的目标数据长度，以及弹幕数据间的展示距离得到的差值。

可选的，动画添加模块530，用于：

根据视频窗口长度以及弹幕滚动速度，计算单个弹幕轨道的展示时长；

根据弹幕开启时间，确定第一个轨道组中各弹幕轨道的动画触发时间；

计算当前轨道组中各弹幕轨道的动画触发时间与单个弹幕轨道的展示时长的和值，作为下一个轨道组中对应位置的弹幕轨道的动画触发时间；

为各弹幕轨道添加关键帧动画以及对应的动画触发时间。

可选的，还包括：弹幕实时发布模块，用于响应于对第一弹幕数据的发布操作，对第一弹幕数据进行筛选验证；

如果验证通过，则计算第一弹幕数据对应的第一数据长度，并从当前展示轨道组中，匹配空闲长度大于或等于第一数据长度的目标弹幕轨道；

如果当前展示轨道组中不存在空闲长度大于或等于第一数据长度的目标弹幕轨道，则将第一数据长度与下一个轨道组中各弹幕轨道的空闲长度进行比较，直至找到空闲长度大于或等于第一数据长度的目标弹幕轨道；

将第一弹幕数据，插入目标弹幕轨道中的对应位置。

可选的，数据获取模块510，用于：

响应于弹幕开启操作，记录视频的当前播放位置；

根据当前播放位置，确定目标时间段；

选择发布时间落在目标时间段内的CSS弹幕数据，加入目标弹幕数据集合。

本发明实施例所提供的弹幕渲染装置可执行本发明任意实施例所提供的弹幕渲染方法，具备执行方法相应的功能模块和有益效果。

实施例四

图6示出了可以用来实施本发明的实施例的电子设备10的结构示意图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备(如头盔、眼镜、手表等)和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本发明的实现。

如图6所示，电子设备10包括至少一个处理器11，以及与至少一个处理器11通信连接的存储器，如只读存储器(ROM)12、随机访问存储器(RAM)13等，其中，存储器存储有可被至少一个处理器执行的计算机程序，处理器11可以根据存储在只读存储器(ROM)12中的计算机程序或者从存储单元18加载到随机访问存储器(RAM)13中的计算机程序，来执行各种适当的动作和处理。在RAM 13中，还可存储电子设备10操作所需的各种程序和数据。处理器11、ROM 12以及RAM 13通过总线14彼此相连。输入/输出(I/O)接口15也连接至总线14。

电子设备10中的多个部件连接至I/O接口15，包括：输入单元16，例如键盘、鼠标等；输出单元17，例如各种类型的显示器、扬声器等；存储单元18，例如磁盘、光盘等；以及通信单元19，例如网卡、调制解调器、无线通信收发机等。通信单元19允许电子设备10通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

处理器11可以是各种具有处理和计算能力的通用和/或专用处理组件。处理器11的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的处理器、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。处理器11执行上文所描述的各个方法和处理，例如弹幕渲染方法。

在一些实施例中，弹幕渲染方法可被实现为计算机程序，其被有形地包含于计算机可读存储介质，例如存储单元18。在一些实施例中，计算机程序的部分或者全部可以经由ROM 12和/或通信单元19而被载入和/或安装到电子设备10上。当计算机程序加载到RAM 13并由处理器11执行时，可以执行上文描述的弹幕渲染方法的一个或多个步骤。备选地，在其他实施例中，处理器11可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行弹幕渲染方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本发明的方法的计算机程序可以采用一个或多个编程语言的任何组合来编写。这些计算机程序可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，使得计算机程序当由处理器执行时使流程图和/或框图中所规定的功能/操作被实施。计算机程序可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本发明的上下文中，计算机可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的计算机程序。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。备选地，计算机可读存储介质可以是机器可读信号介质。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在电子设备上实施此处描述的系统和技术，该电子设备具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给电子设备。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、区块链网络和互联网。

计算系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务中，存在的管理难度大，业务扩展性弱的缺陷。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发明中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本发明的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种弹幕渲染方法，其特征在于，包括：

响应于弹幕开启操作，获取待展示的目标弹幕数据集合；

根据弹幕数据属性，将所述目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上；

分别为各弹幕轨道添加关键帧动画；

如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示。

2.根据权利要求1所述的方法，其特征在于，在根据弹幕数据属性，将所述目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上之前，还包括：

计算所述目标弹幕数据集合中的各CSS弹幕数据的数据长度；

按照弹幕展示时间的先后顺序，将所述目标弹幕数据集合中的各CSS弹幕数据以及对应的数据长度，关联存储至等待队列中。

3.根据权利要求2所述的方法，其特征在于，根据弹幕数据属性，将所述目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上，包括：

如果等待队列不为空，则对所述等待队列队头的目标CSS弹幕数据以及对应的目标数据长度，进行关联出队操作；

确定与所述目标CSS弹幕数据对应的目标轨道组，并将所述目标数据长度与所述目标轨道组中各弹幕轨道的空闲长度进行比较；

如果所述目标轨道组中不存在空闲长度大于或等于所述目标数据长度的目标弹幕轨道，则将所述目标数据长度与下一个轨道组中各弹幕轨道的空闲长度进行比较，直至找到空闲长度大于或等于所述目标数据长度的目标弹幕轨道；

将所述目标CSS弹幕数据放在所述目标弹幕轨道上。

4.根据权利要求3所述的方法，其特征在于，将所述目标CSS弹幕数据放在所述目标弹幕轨道上，包括：

将所述目标弹幕轨道最左侧的可占用空闲位置，作为所述目标CSS弹幕数据的起始位置；

从所述起始位置开始，将所述目标CSS弹幕数据放在所述目标弹幕轨道上；

将所述目标弹幕轨道的空闲长度更新为，原空闲长度减去所述目标CSS弹幕数据对应的目标数据长度，以及弹幕数据间的展示距离得到的差值。

5.根据权利要求1所述的方法，其特征在于，分别为各弹幕轨道添加关键帧动画，包括：

根据视频窗口长度以及弹幕滚动速度，计算单个弹幕轨道的展示时长；

根据弹幕开启时间，确定第一个轨道组中各弹幕轨道的动画触发时间；

计算当前轨道组中各弹幕轨道的动画触发时间与单个弹幕轨道的展示时长的和值，作为下一个轨道组中对应位置的弹幕轨道的动画触发时间；

为各弹幕轨道添加关键帧动画以及对应的动画触发时间。

6.根据权利要求1所述的方法，其特征在于，还包括：

响应于对第一弹幕数据的发布操作，对所述第一弹幕数据进行筛选验证；

如果验证通过，则计算所述第一弹幕数据对应的第一数据长度，并从当前展示轨道组中，匹配空闲长度大于或等于所述第一数据长度的目标弹幕轨道；

如果当前展示轨道组中不存在空闲长度大于或等于所述第一数据长度的目标弹幕轨道，则将所述第一数据长度与下一个轨道组中各弹幕轨道的空闲长度进行比较，直至找到空闲长度大于或等于所述第一数据长度的目标弹幕轨道；

将所述第一弹幕数据，插入所述目标弹幕轨道中的对应位置。

7.根据权利要求1所述的方法，其特征在于，响应于弹幕开启操作，获取待展示的目标弹幕数据集合，包括：

响应于弹幕开启操作，记录视频的当前播放位置；

根据所述当前播放位置，确定目标时间段；

选择发布时间落在所述目标时间段内的CSS弹幕数据，加入目标弹幕数据集合。

8.一种弹幕渲染装置，其特征在于，包括：

数据获取模块，用于响应于弹幕开启操作，获取待展示的目标弹幕数据集合；

弹幕排列模块，用于根据弹幕数据属性，将所述目标弹幕数据集合中的CSS弹幕数据，排列在与指定的目标弹幕模式对应的弹幕轨道上；

动画添加模块，用于分别为各弹幕轨道添加关键帧动画；

弹幕渲染模块，用于如果检测到满足动画触发条件的目标弹幕轨道，对排列在目标弹幕轨道上的CSS弹幕数据进行渲染展示。

9.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的弹幕渲染方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使处理器执行时实现权利要求1-7中任一项所述的弹幕渲染方法。

Images