CN111538557A - 基于层叠样式表的弹幕渲染方法及相关设备 - Google Patents

Abstract

一种基于层叠样式表的弹幕渲染方法，包括：从MQ中获取目标弹幕内容；确定目标弹幕内容的内容类型，并根据历史渲染内容以及内容类型，确定目标弹幕内容的目标热度值；根据预设水平轨道与预设热度值的对应关系，确定目标热度值对应的目标渲染轨道；判断目标弹幕内容的上一个屏幕渲染内容的第一长度是否处于预设长度范围内，以及判断目标弹幕内容的第二长度是否处于预设长度范围内；若是，确定第一间隔距离；根据第二长度以及屏幕长度，计算目标弹幕内容的移动位移，并计算移动时间，将移动时间动态地插入至层叠样式表CSS文件中；调用CSS文件，对目标弹幕内容进行渲染。本发明还可以涉及区块链技术，可以将目标弹幕内容上传至区块链。

Description

基于层叠样式表的弹幕渲染方法及相关设备

技术领域

本发明涉及视频技术领域，尤其涉及一种基于层叠样式表的弹幕渲染方法及相关设备。

背景技术

随着社会经济水平的日益提高，人们的娱乐要求也越来越高。在用户观看视频网站上的视频时，为了增加用户在观看视频时的趣味性，会在视频的显示画面上漂浮并移动显示用户的评论字幕，即弹幕。

然而，实践中发现，由于同一视频观看的用户较多，一旦同一时间用户发布的弹幕内容过多时，很容易导致弹幕内容从屏幕中快速闪过，极易造成重叠，使得观看效果较差。

发明内容

鉴于以上内容，有必要提供一种基于层叠样式表的弹幕渲染方法及相关设备，能够减少弹幕的重叠，提高观看效果。

本发明的第一方面提供一种基于层叠样式表的弹幕渲染方法，所述基于层叠样式表的弹幕渲染方法包括：

从消息队列MQ中获取待渲染的目标弹幕内容；

确定所述目标弹幕内容的内容类型，并根据历史渲染内容以及所述内容类型，确定所述目标弹幕内容的目标热度值；

根据预设水平轨道与预设热度值的对应关系，从多条预设水平轨道中确定所述目标热度值对应的目标渲染轨道；

判断所述目标弹幕内容的上一个屏幕渲染内容的第一长度是否处于预设长度范围内，以及判断所述目标弹幕内容的第二长度是否处于所述预设长度范围内；

若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围内，且所述目标弹幕内容的第二长度处于所述预设长度范围内，确定与所述预设长度范围对应的第一间隔距离；

根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中；

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离的位置对所述目标弹幕内容进行渲染。

在一种可能的实现方式中，所述从消息队列MQ中获取待渲染的目标弹幕内容包括：

从消息队列MQ中获取待渲染的多个弹幕内容；

确定每个所述弹幕内容对应的登录账户信息；

根据所述登录账户信息，对所述弹幕内容的登录用户的用户级别从高到低进行排序；

将排序后的用户级别最高的登录用户对应的弹幕内容确定为目标弹幕内容。

在一种可能的实现方式中，所述从消息队列MQ中获取待渲染的目标弹幕内容包括：

从消息队列MQ中获取待渲染的多个弹幕内容；

判断所述多个弹幕内容中是否存在与已渲染的历史弹幕内容一致的第一弹幕内容；

若所述多个弹幕内容中存在与已渲染的历史弹幕内容一致的第一弹幕内容，从所述多个弹幕内容中删除所述第一弹幕内容，获得第二弹幕内容；

获取所述第二弹幕内容的发布时间戳以及所述第二弹幕内容对应的登录用户的用户级别；

根据预设加权算法，对所述发布时间戳以及所述用户级别进行加权，获得加权值；

从多个所述第二弹幕内容中，将加权值最高的第二弹幕内容确定为目标弹幕内容。

在一种可能的实现方式中，所述基于层叠样式表的弹幕渲染方法还包括：

获取所述目标弹幕内容对应的登录账户信息；

分析所述登录账户信息，并确定用户的弹幕爱好习惯；

所述调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离时对所述目标弹幕内容进行渲染包括：

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离时，采用所述弹幕爱好习惯对所述目标弹幕内容进行渲染。

在一种可能的实现方式中，所述基于层叠样式表的弹幕渲染方法还包括：

若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围之外，且所述目标弹幕内容的第二长度处于所述预设长度范围之外，确定与所述预设长度范围对应的第二间隔距离，其中，所述第二间隔距离大于所述第一间隔距离；

根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中；

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第二间隔距离的位置对所述目标弹幕内容进行渲染。

在一种可能的实现方式中，所述基于层叠样式表的弹幕渲染方法还包括：

若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围之外且所述目标弹幕内容的第二长度处于所述预设长度范围内，或者，所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围内且所述目标弹幕内容的第二长度处于所述预设长度范围之外，确定与所述预设长度范围对应的第三间隔距离，其中，所述第三间隔距离大于所述第一间隔距离且所述第三间隔距离小于所述第二间隔距离；

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第三间隔距离的位置对所述目标弹幕内容进行渲染。

在一种可能的实现方式中，所述基于层叠样式表的弹幕渲染方法还包括：

监听所述目标弹幕内容的渲染状态事件；

若所述渲染状态事件表明所述目标弹幕内容已全部移出屏幕，删除所述目标弹幕内容对应的内容节点。

本发明的第二方面提供一种弹幕渲染装置，所述弹幕渲染装置包括：

获取模块，用于从消息队列MQ中获取待渲染的目标弹幕内容；

第一确定模块，用于确定所述目标弹幕内容的内容类型，并根据历史渲染内容以及所述内容类型，确定所述目标弹幕内容的目标热度值；

第二确定模块，用于根据预设水平轨道与预设热度值的对应关系，从多条预设水平轨道中确定所述目标热度值对应的目标渲染轨道；

判断模块，用于判断所述目标弹幕内容的上一个屏幕渲染内容的第一长度是否处于预设长度范围内，以及判断所述目标弹幕内容的第二长度是否处于所述预设长度范围内；

第三确定模块，用于若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围内，且所述目标弹幕内容的第二长度处于所述预设长度范围内，确定与所述预设长度范围对应的第一间隔距离；

计算模块，用于根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中；

渲染模块，用于调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离的位置对所述目标弹幕内容进行渲染。

本发明的第三方面提供一种电子设备，所述电子设备包括处理器和存储器，所述处理器用于执行所述存储器中存储的计算机程序时实现所述的基于层叠样式表的弹幕渲染方法。

本发明的第四方面提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述的基于层叠样式表的弹幕渲染方法。

在上述技术方案中，可以根据目标热度值来确定目标弹幕内容的目标渲染轨道，根据目标弹幕内容的长度、所述目标弹幕内容的上一个屏幕渲染内容的长度与预设长度范围的关系，确定相邻两个弹幕内容的间隔距离，以及将计算得到的移动时间动态插入CSS文件中，不仅可以确保所有的目标弹幕内容在屏幕上的固定轨道匀速移动，避免弹幕内容的重叠，同时，还可以避免弹幕内容太拥挤，从而可以提高弹幕内容渲染的视角效果。

附图说明

图1是本发明公开的一种基于层叠样式表的弹幕渲染方法的较佳实施例的流程图。

图2是本发明公开的一种弹幕渲染装置的较佳实施例的功能模块图。

图3是本发明实现基于层叠样式表的弹幕渲染方法的较佳实施例的电子设备的结构示意图。

具体实施方式

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

本申请的说明书和权利要求书中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本发明要求的保护范围之内。

所述电子设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、数字信号处理器(DSP)、嵌入式设备等。所述电子设备还可包括网络设备和/或用户设备。其中，所述网络设备包括但不限于单个网络服务器、多个网络服务器组成的服务器组或基于云计算(Cloud Computing)的由大量主机或网络服务器构成的云。所述用户设备包括但不限于任何一种可与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互的电子产品，例如，个人计算机、平板电脑、智能手机、个人数字助理PDA等。

请参见图1，图1是本发明公开的一种基于层叠样式表的弹幕渲染方法的较佳实施例的流程图。其中，根据不同的需求，该流程图中步骤的顺序可以改变，某些步骤可以省略。

S11、从消息队列MQ中获取待渲染的目标弹幕内容。

其中，在视频直播时，用户可以发布弹幕内容。可选的，为了确保数据的安全性，可以将目标弹幕内容上传至区块链进行存储。

其中，MQ（MessageQueue）可以用来缓存数据。大量用户发布的弹幕内容无法同一时间全部显示在屏幕中，可以将用户发布的弹幕内容存储在消息队列MQ中，当需要渲染到屏幕的时候，再从MQ中获取目标弹幕内容，从而可以减轻浏览器的服务压力。

具体的，所述从消息队列MQ中获取待渲染的目标弹幕内容包括：

从消息队列MQ中获取待渲染的多个弹幕内容；

确定每个所述弹幕内容对应的登录账户信息；

根据所述登录账户信息，对所述弹幕内容的登录用户的用户级别从高到低进行排序；

将排序后的用户级别最高的登录用户对应的弹幕内容确定为目标弹幕内容。

在该可选的实施方式中，待渲染的弹幕内容有很多个，可以根据用户级别来排序，并确定目标弹幕内容，即用户级别高的弹幕内容可以优先进行渲染，从而可以确保用户级别高的用户得到优先的弹幕内容的渲染机会，提高用户体验。

具体的，所述从消息队列MQ中获取待渲染的目标弹幕内容包括：

从消息队列MQ中获取待渲染的多个弹幕内容；

判断所述多个弹幕内容中是否存在与已渲染的历史弹幕内容一致的第一弹幕内容；

若所述多个弹幕内容中存在与已渲染的历史弹幕内容一致的第一弹幕内容，从所述多个弹幕内容中删除所述第一弹幕内容，获得第二弹幕内容；

获取所述第二弹幕内容的发布时间戳以及所述第二弹幕内容对应的登录用户的用户级别；

根据预设加权算法，对所述发布时间戳以及所述用户级别进行加权，获得加权值；

从多个所述第二弹幕内容中，将加权值最高的第二弹幕内容确定为目标弹幕内容。

在该可选的实施方式中，有些用户可能会重复发布相同的弹幕内容，为了避免重复渲染，可以先对多个弹幕内容进行去重处理，以减少渲染的重复冗余。可以预先设置一个预设加权算法，对该预设加权算法中的发布时间戳以及用户级别设置不同的加权参数，比如：发布时间戳的加权参数设置为0.4，用户级别的加权参数设置为0.6，后续对每个第二弹幕内容进行加权计算，获得的加权值可以用于对弹幕内容进行综合考量，加权值越高，表明用户发布弹幕的时间戳比较早，同时，用户的用户级别也比较高。通过这种方式，可以筛选出属于高级别用户同时发布时间戳较早的弹幕内容，以便及时的对该弹幕内容进行渲染，提高用户体验。

S12、确定所述目标弹幕内容的内容类型，并根据历史渲染内容以及所述内容类型，确定所述目标弹幕内容的目标热度值。

其中，内容类型可以包括但不限于人物评价、情节评价、表情包以及个人随意内容等。可以根据所述目标弹幕内容的内容类型，从历史渲染内容中确定属于所述内容类型的多个历史渲染内容，将该多个历史渲染内容的数量确定为所述目标弹幕内容的目标热度值。属于同一内容类型的历史渲染内容的数量越多，表明所述目标弹幕内容的目标热度值就越高。

S13、根据预设水平轨道与预设热度值的对应关系，从多条预设水平轨道中确定所述目标热度值对应的目标渲染轨道。

其中，可以预先设置多个预设水平轨道，每个弹幕内容只能在固定的轨道上水平移动，从而可以避免垂直方向弹幕内容的重叠。

其中，预设水平轨道可以有多条，不同的预设水平轨道设置在屏幕的不同位置，可以预先设置预设水平轨道与预设热度值的对应关系，在该对应关系中，预设热度值越高，对应的预设水平轨道所处的屏幕位置就越适合用户观看（比如中间位置）。

S14、判断所述目标弹幕内容的上一个屏幕渲染内容的第一长度是否处于预设长度范围内，以及判断所述目标弹幕内容的第二长度是否处于所述预设长度范围内。

S15、若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围内，且所述目标弹幕内容的第二长度处于所述预设长度范围内，确定与所述预设长度范围对应的第一间隔距离。

其中，可以预先设置预设长度范围，该预设长度范围可以用来衡量弹幕内容的长度的长短。相邻的两个弹幕内容的长度与预设长度范围的关系，可以决定该相邻的两个弹幕内容在屏幕上渲染时的间隔。预设长度范围可以对应多个间隔距离，采用哪个间隔距离取决于相邻的两个弹幕内容的长度与预设长度范围的关系。通常，如果两个弹幕内容的长度均比较长，则该两个弹幕的间隔距离就比较大，如果两个弹幕内容的长度均比较小，则该两个弹幕的间隔距离就比较小，如果两个弹幕内容的长度一长一短，则该两个弹幕的间隔距离就一般大小。通过这种方式，可以避免弹幕内容太拥挤导致观看效果差，从而可以提高后续弹幕内容渲染的视角效果。

S16、根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中。

其中，层叠样式表(Cascading Style Sheets，CSS)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS渲染就是浏览器解析HTML文档生成dom树，解析css生成css规则树，最后生成渲染树，通过系统API（Application Programming Interface，应用程序接口）绘制到屏幕的过程。

其中，预设速度和目标弹幕内容需要的行进路程（即移动位移）都是一个可控的常量，只有移动时间属于变量。第二长度越大的目标弹幕内容的移动时间就越长，第二长度越小的目标弹幕内容的移动时间就越短，这样不仅能够确保所有的弹幕内容均匀速前进，同时，还能避免弹幕内容的重叠。

S17、调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离的位置对所述目标弹幕内容进行渲染。

其中，调用CSS文件，即可实现CSS渲染，将目标弹幕内容渲染至浏览器的屏幕上显示。具体的，可以在目标渲染轨道上，与所述上一个屏幕渲染内容的距离为所述第一间隔距离的位置进行渲染，从而不仅可以避免重叠，同时，还可以确保良好的观看体验，视觉效果更佳。

可选的，还可以使用requestanimationframe（请求动画帧）代替常用的javascript定时器，优势是可以由系统决定回调函数的执行时机。如果屏幕的刷新频率是60Hz，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。

可选的，所述方法还包括：

获取所述目标弹幕内容对应的登录账户信息；

分析所述登录账户信息，并确定用户的弹幕爱好习惯；

所述调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离时对所述目标弹幕内容进行渲染包括：

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离时，采用所述弹幕爱好习惯对所述目标弹幕内容进行渲染。

其中，用户的弹幕爱好习惯比如：采用特殊字体（比如楷体、诙谐体或手写体）显示弹幕内容，弹幕内容添加表情等，用户可以预先在个人的登录账户信息中填写相关信息。根据用户的弹幕爱好习惯来渲染目标弹幕内容，能够对每个用户的弹幕进行个性化定制，促进用户发布弹幕的积极性，提高用户与播放内容之间的互动。

可选的，所述方法还包括：

若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围之外，且所述目标弹幕内容的第二长度处于所述预设长度范围之外，确定与所述预设长度范围对应的第二间隔距离，其中，所述第二间隔距离大于所述第一间隔距离；

根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中；

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第二间隔距离的位置对所述目标弹幕内容进行渲染。

在该可选的实施方式中，两个弹幕内容的长度均比较长，则该两个弹幕的间隔距离就比较大。按照第二间隔距离来设置相邻两个弹幕内容的渲染位置，可以避免弹幕内容太拥挤导致观看效果差，从而可以提高后续弹幕内容渲染的视角效果。

可选的，所述方法还包括：

若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围之外且所述目标弹幕内容的第二长度处于所述预设长度范围内，或者，所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围内且所述目标弹幕内容的第二长度处于所述预设长度范围之外，确定与所述预设长度范围对应的第三间隔距离，其中，所述第三间隔距离大于所述第一间隔距离且所述第三间隔距离小于所述第二间隔距离；

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第三间隔距离的位置对所述目标弹幕内容进行渲染。

在该可选的实施方式中，两个弹幕内容的长度一长一短，则该两个弹幕的间隔距离就一般大小。按照第三间隔距离来设置相邻两个弹幕内容的渲染位置，可以合理安排屏幕上渲染的弹幕内容的数量，同时，避免弹幕内容太拥挤导致观看效果差，从而可以提高后续弹幕内容渲染的视角效果。

可选的，所述方法还包括：

监听所述目标弹幕内容的渲染状态事件；

若所述渲染状态事件表明所述目标弹幕内容已全部移出屏幕，删除所述目标弹幕内容对应的内容节点。

其中，该内容节点即dom节点。当所述目标弹幕内容已全部移出屏幕后，所述目标弹幕内容对应的内容节点却仍然保留在屏幕上，可以删除该内容节点，从而可以避免屏幕中dom节点过多消耗系统性能（比如消耗CPU资源和占用系统内存），而引起屏幕卡顿。

在图1所描述的方法流程中，可以根据目标热度值来确定目标弹幕内容的目标渲染轨道，根据目标弹幕内容的长度、所述目标弹幕内容的上一个屏幕渲染内容的长度与预设长度范围的关系，确定相邻两个弹幕内容的间隔距离，以及将计算得到的移动时间动态插入CSS文件中，不仅可以确保所有的目标弹幕内容在屏幕上的固定轨道匀速移动，避免弹幕内容的重叠，同时，还可以避免弹幕内容太拥挤，从而可以提高弹幕内容渲染的视角效果。

以上所述，仅是本发明的具体实施方式，但本发明的保护范围并不局限于此，对于本领域的普通技术人员来说，在不脱离本发明创造构思的前提下，还可以做出改进，但这些均属于本发明的保护范围。

请参见图2，图2是本发明公开的一种弹幕渲染装置的较佳实施例的功能模块图。

在一些实施例中，所述弹幕渲染装置运行于电子设备中。所述弹幕渲染装置可以包括多个由程序代码段所组成的功能模块。所述弹幕渲染装置中的各个程序段的程序代码可以存储于存储器中，并由至少一个处理器所执行，以执行图1所描述的基于层叠样式表的弹幕渲染方法中的部分或全部步骤。

本实施例中，所述弹幕渲染装置根据其所执行的功能，可以被划分为多个功能模块。所述功能模块可以包括：获取模块201、第一确定模块202、第二确定模块203、判断模块204、第三确定模块205、计算模块206及渲染模块207。本发明所称的模块是指一种能够被至少一个处理器所执行并且能够完成固定功能的一系列计算机程序段，其存储在存储器中。在一些实施例中，关于各模块的功能将在本实施例中详述。

获取模块201，用于从消息队列MQ中获取待渲染的目标弹幕内容。

其中，在视频直播时，用户可以发布弹幕内容。

其中，MQ（MessageQueue）可以用来缓存数据。大量用户发布的弹幕内容无法同一时间全部显示在屏幕中，可以将用户发布的弹幕内容存储在消息队列MQ中，当需要渲染到屏幕的时候，再从MQ中获取目标弹幕内容，从而可以减轻浏览器的服务压力。

具体的，所述从消息队列MQ中获取待渲染的目标弹幕内容包括：

从消息队列MQ中获取待渲染的多个弹幕内容；

确定每个所述弹幕内容对应的登录账户信息；

根据所述登录账户信息，对所述弹幕内容的登录用户的用户级别从高到低进行排序；

将排序后的用户级别最高的登录用户对应的弹幕内容确定为目标弹幕内容。

在该可选的实施方式中，待渲染的弹幕内容有很多个，可以根据用户级别来排序，并确定目标弹幕内容，即用户级别高的弹幕内容可以优先进行渲染，从而可以确保用户级别高的用户得到优先的弹幕内容的渲染机会，提高用户体验。

具体的，所述从消息队列MQ中获取待渲染的目标弹幕内容包括：

从消息队列MQ中获取待渲染的多个弹幕内容；

判断所述多个弹幕内容中是否存在与已渲染的历史弹幕内容一致的第一弹幕内容；

若所述多个弹幕内容中存在与已渲染的历史弹幕内容一致的第一弹幕内容，从所述多个弹幕内容中删除所述第一弹幕内容，获得第二弹幕内容；

获取所述第二弹幕内容的发布时间戳以及所述第二弹幕内容对应的登录用户的用户级别；

根据预设加权算法，对所述发布时间戳以及所述用户级别进行加权，获得加权值；

从多个所述第二弹幕内容中，将加权值最高的第二弹幕内容确定为目标弹幕内容。

在该可选的实施方式中，有些用户可能会重复发布相同的弹幕内容，为了避免重复渲染，可以先对多个弹幕内容进行去重处理，以减少渲染的重复冗余。可以预先设置一个预设加权算法，对该预设加权算法中的发布时间戳以及用户级别设置不同的加权参数，比如：发布时间戳的加权参数设置为0.4，用户级别的加权参数设置为0.6，后续对每个第二弹幕内容进行加权计算，获得的加权值可以用于对弹幕内容进行综合考量，加权值越高，表明用户发布弹幕的时间戳比较早，同时，用户的用户级别也比较高。通过这种方式，可以筛选出属于高级别用户同时发布时间戳较早的弹幕内容，以便及时的对该弹幕内容进行渲染，提高用户体验。

第一确定模块202，用于确定所述目标弹幕内容的内容类型，并根据历史渲染内容以及所述内容类型，确定所述目标弹幕内容的目标热度值。

其中，内容类型可以包括但不限于人物评价、情节评价、表情包以及个人随意内容等。可以根据所述目标弹幕内容的内容类型，从历史渲染内容中确定属于所述内容类型的多个历史渲染内容，将该多个历史渲染内容的数量确定为所述目标弹幕内容的目标热度值。属于同一内容类型的历史渲染内容的数量越多，表明所述目标弹幕内容的目标热度值就越高。

第二确定模块203，用于根据预设水平轨道与预设热度值的对应关系，从多条预设水平轨道中确定所述目标热度值对应的目标渲染轨道。

其中，可以预先设置多个预设水平轨道，每个弹幕内容只能在固定的轨道上水平移动，从而可以避免垂直方向弹幕内容的重叠。

其中，预设水平轨道可以有多条，不同的预设水平轨道设置在屏幕的不同位置，可以预先设置预设水平轨道与预设热度值的对应关系，在该对应关系中，预设热度值越高，对应的预设水平轨道所处的屏幕位置就越适合用户观看（比如中间位置）。

判断模块204，用于判断所述目标弹幕内容的上一个屏幕渲染内容的第一长度是否处于预设长度范围内，以及判断所述目标弹幕内容的第二长度是否处于所述预设长度范围内。

第三确定模块205，用于若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围内，且所述目标弹幕内容的第二长度处于所述预设长度范围内，确定与所述预设长度范围对应的第一间隔距离。

其中，可以预先设置预设长度范围，该预设长度范围可以用来衡量弹幕内容的长度的长短。相邻的两个弹幕内容的长度与预设长度范围的关系，可以决定该相邻的两个弹幕内容在屏幕上渲染时的间隔。预设长度范围可以对应多个间隔距离，采用哪个间隔距离取决于相邻的两个弹幕内容的长度与预设长度范围的关系。通常，如果两个弹幕内容的长度均比较长，则该两个弹幕的间隔距离就比较大，如果两个弹幕内容的长度均比较小，则该两个弹幕的间隔距离就比较小，如果两个弹幕内容的长度一长一短，则该两个弹幕的间隔距离就一般大小。通过这种方式，可以避免弹幕内容太拥挤导致观看效果差，从而可以提高后续弹幕内容渲染的视角效果。

计算模块206，用于根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中。

其中，层叠样式表(Cascading Style Sheets，CSS)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS渲染就是浏览器解析HTML文档生成dom树，解析css生成css规则树，最后生成渲染树，通过系统API（Application Programming Interface，应用程序接口）绘制到屏幕的过程。

其中，预设速度和目标弹幕内容需要的行进路程（即移动位移）都是一个可控的常量，只有移动时间属于变量。第二长度越大的目标弹幕内容的移动时间就越长，第二长度越小的目标弹幕内容的移动时间就越短，这样不仅能够确保所有的弹幕内容均匀速前进，同时，还能避免弹幕内容的重叠。

渲染模块207，用于调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离的位置对所述目标弹幕内容进行渲染。

其中，调用CSS文件，即可实现CSS渲染，将目标弹幕内容渲染至浏览器的屏幕上显示。具体的，可以在目标渲染轨道上，与所述上一个屏幕渲染内容的距离为所述第一间隔距离的位置进行渲染，从而不仅可以避免重叠，同时，还可以确保良好的观看体验，视觉效果更佳。

可选的，还可以使用requestanimationframe（请求动画帧）代替常用的javascript定时器，优势是可以由系统决定回调函数的执行时机。如果屏幕的刷新频率是60Hz，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。

可选的，所述获取模块201，还用于获取所述目标弹幕内容对应的登录账户信息；

所述第一确定模块202，还用于分析所述登录账户信息，并确定用户的弹幕爱好习惯；

所述渲染模块207调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离时对所述目标弹幕内容进行渲染包括：

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离时，采用所述弹幕爱好习惯对所述目标弹幕内容进行渲染。

其中，用户的弹幕爱好习惯比如：采用特殊字体（比如楷体、诙谐体或手写体）显示弹幕内容，弹幕内容添加表情等，用户可以预先在个人的登录账户信息中填写相关信息。根据用户的弹幕爱好习惯来渲染目标弹幕内容，能够对每个用户的弹幕进行个性化定制，促进用户发布弹幕的积极性，提高用户与播放内容之间的互动。

可选的，所述第二确定模块203，还用于若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围之外，且所述目标弹幕内容的第二长度处于所述预设长度范围之外，确定与所述预设长度范围对应的第二间隔距离，其中，所述第二间隔距离大于所述第一间隔距离；

所述计算模块206，还用于根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中；

渲染模块207，用于调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第二间隔距离的位置对所述目标弹幕内容进行渲染。

在该可选的实施方式中，两个弹幕内容的长度均比较长，则该两个弹幕的间隔距离就比较大。按照第二间隔距离来设置相邻两个弹幕内容的渲染位置，可以避免弹幕内容太拥挤导致观看效果差，从而可以提高后续弹幕内容渲染的视角效果。

可选的，所述弹幕渲染装置还包括：

监听模块，用于监听所述目标弹幕内容的渲染状态事件；

删除模块，用于若所述渲染状态事件表明所述目标弹幕内容已全部移出屏幕，删除所述目标弹幕内容对应的内容节点。

其中，该内容节点即dom节点。当所述目标弹幕内容已全部移出屏幕后，所述目标弹幕内容对应的内容节点却仍然保留在屏幕上，可以删除该内容节点，从而可以避免屏幕中dom节点过多消耗系统性能（比如消耗CPU资源和占用系统内存），而引起屏幕卡顿。

在图2所描述的弹幕渲染装置中，可以根据目标热度值来确定目标弹幕内容的目标渲染轨道，根据目标弹幕内容的长度、所述目标弹幕内容的上一个屏幕渲染内容的长度与预设长度范围的关系，确定相邻两个弹幕内容的间隔距离，以及将计算得到的移动时间动态插入CSS文件中，不仅可以确保所有的目标弹幕内容在屏幕上的固定轨道匀速移动，避免弹幕内容的重叠，同时，还可以避免弹幕内容太拥挤，从而可以提高弹幕内容渲染的视角效果。

如图3所示，图3是本发明实现基于层叠样式表的弹幕渲染方法的较佳实施例的电子设备的结构示意图。所述电子设备3包括存储器31、至少一个处理器32、存储在所述存储器31中并可在所述至少一个处理器32上运行的计算机程序33及至少一条通讯总线34。

本领域技术人员可以理解，图3所示的示意图仅仅是所述电子设备3的示例，并不构成对所述电子设备3的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述电子设备3还可以包括输入输出设备、网络接入设备等。

所述至少一个处理器32可以是中央处理单元（Central Processing Unit，CPU），还可以是其他通用处理器、数字信号处理器（Digital Signal Processor，DSP）、专用集成电路（Application Specific Integrated Circuit，ASIC）、现场可编程门阵列（Field-Programmable Gate Array，FPGA）或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。该处理器32可以是微处理器或者该处理器32也可以是任何常规的处理器等，所述处理器32是所述电子设备3的控制中心，利用各种接口和线路连接整个电子设备3的各个部分。

所述存储器31可用于存储所述计算机程序33和/或模块/单元，所述处理器32通过运行或执行存储在所述存储器31内的计算机程序和/或模块/单元，以及调用存储在存储器31内的数据，实现所述电子设备3的各种功能。所述存储器31可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序（比如声音播放功能、图像播放功能等）等；存储数据区可存储根据电子设备3的使用所创建的数据（比如音频数据）等。此外，存储器31可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡（Smart Media Card，SMC），安全数字（Secure Digital，SD）卡，闪存卡（Flash Card）、至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。

结合图1，所述电子设备3中的所述存储器31存储多个指令以实现一种基于层叠样式表的弹幕渲染方法，所述处理器32可执行所述多个指令从而实现：

从消息队列MQ中获取待渲染的目标弹幕内容；

确定所述目标弹幕内容的内容类型，并根据历史渲染内容以及所述内容类型，确定所述目标弹幕内容的目标热度值；

根据预设水平轨道与预设热度值的对应关系，从多条预设水平轨道中确定所述目标热度值对应的目标渲染轨道；

判断所述目标弹幕内容的上一个屏幕渲染内容的第一长度是否处于预设长度范围内，以及判断所述目标弹幕内容的第二长度是否处于所述预设长度范围内；

若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围内，且所述目标弹幕内容的第二长度处于所述预设长度范围内，确定与所述预设长度范围对应的第一间隔距离；

根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中；

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离的位置对所述目标弹幕内容进行渲染。

具体地，所述处理器32对上述指令的具体实现方法可参考图1对应实施例中相关步骤的描述，在此不赘述。

在图3所描述的电子设备3中，可以根据目标热度值来确定目标弹幕内容的目标渲染轨道，根据目标弹幕内容的长度、所述目标弹幕内容的上一个屏幕渲染内容的长度与预设长度范围的关系，确定相邻两个弹幕内容的间隔距离，以及将计算得到的移动时间动态插入CSS文件中，不仅可以确保所有的目标弹幕内容在屏幕上的固定轨道匀速移动，避免弹幕内容的重叠，同时，还可以避免弹幕内容太拥挤，从而可以提高弹幕内容渲染的视角效果。

所述电子设备3集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器以及只读存储器（ROM，Read-Only Memory）。

在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。系统权利要求中陈述的多个单元或装置也可以通过软件或者硬件来实现。

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。

Claims (10)

1.一种基于层叠样式表的弹幕渲染方法，其特征在于，所述基于层叠样式表的弹幕渲染方法包括：

从消息队列MQ中获取待渲染的目标弹幕内容；

确定所述目标弹幕内容的内容类型，并根据历史渲染内容以及所述内容类型，确定所述目标弹幕内容的目标热度值；

根据预设水平轨道与预设热度值的对应关系，从多条预设水平轨道中确定所述目标热度值对应的目标渲染轨道；

判断所述目标弹幕内容的上一个屏幕渲染内容的第一长度是否处于预设长度范围内，以及判断所述目标弹幕内容的第二长度是否处于所述预设长度范围内；

若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围内，且所述目标弹幕内容的第二长度处于所述预设长度范围内，确定与所述预设长度范围对应的第一间隔距离；

根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中；

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离的位置对所述目标弹幕内容进行渲染。

2.根据权利要求1所述的基于层叠样式表的弹幕渲染方法，其特征在于，所述从消息队列MQ中获取待渲染的目标弹幕内容包括：

从消息队列MQ中获取待渲染的多个弹幕内容；

确定每个所述弹幕内容对应的登录账户信息；

根据所述登录账户信息，对所述弹幕内容的登录用户的用户级别从高到低进行排序；

将排序后的用户级别最高的登录用户对应的弹幕内容确定为目标弹幕内容。

3.根据权利要求1所述的基于层叠样式表的弹幕渲染方法，其特征在于，所述从消息队列MQ中获取待渲染的目标弹幕内容包括：

从消息队列MQ中获取待渲染的多个弹幕内容；

判断所述多个弹幕内容中是否存在与已渲染的历史弹幕内容一致的第一弹幕内容；

若所述多个弹幕内容中存在与已渲染的历史弹幕内容一致的第一弹幕内容，从所述多个弹幕内容中删除所述第一弹幕内容，获得第二弹幕内容；

获取所述第二弹幕内容的发布时间戳以及所述第二弹幕内容对应的登录用户的用户级别；

根据预设加权算法，对所述发布时间戳以及所述用户级别进行加权，获得加权值；

从多个所述第二弹幕内容中，将加权值最高的第二弹幕内容确定为目标弹幕内容。

4.根据权利要求1所述的基于层叠样式表的弹幕渲染方法，其特征在于，所述基于层叠样式表的弹幕渲染方法还包括：

获取所述目标弹幕内容对应的登录账户信息；

分析所述登录账户信息，并确定用户的弹幕爱好习惯；

所述调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离时对所述目标弹幕内容进行渲染包括：

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离时，采用所述弹幕爱好习惯对所述目标弹幕内容进行渲染。

5.根据权利要求1所述的基于层叠样式表的弹幕渲染方法，其特征在于，所述基于层叠样式表的弹幕渲染方法还包括：

若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围之外，且所述目标弹幕内容的第二长度处于所述预设长度范围之外，确定与所述预设长度范围对应的第二间隔距离，其中，所述第二间隔距离大于所述第一间隔距离；

根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中；

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第二间隔距离的位置对所述目标弹幕内容进行渲染。

6.根据权利要求1所述的基于层叠样式表的弹幕渲染方法，其特征在于，所述基于层叠样式表的弹幕渲染方法还包括：

若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围之外且所述目标弹幕内容的第二长度处于所述预设长度范围内，或者，所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围内且所述目标弹幕内容的第二长度处于所述预设长度范围之外，确定与所述预设长度范围对应的第三间隔距离，其中，所述第三间隔距离大于所述第一间隔距离且所述第三间隔距离小于所述第二间隔距离；

调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第三间隔距离的位置对所述目标弹幕内容进行渲染。

7.根据权利要求1所述的基于层叠样式表的弹幕渲染方法，其特征在于，所述基于层叠样式表的弹幕渲染方法还包括：

监听所述目标弹幕内容的渲染状态事件；

若所述渲染状态事件表明所述目标弹幕内容已全部移出屏幕，删除所述目标弹幕内容对应的内容节点。

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

获取模块，用于从消息队列MQ中获取待渲染的目标弹幕内容；

第一确定模块，用于确定所述目标弹幕内容的内容类型，并根据历史渲染内容以及所述内容类型，确定所述目标弹幕内容的目标热度值；

第二确定模块，用于根据预设水平轨道与预设热度值的对应关系，从多条预设水平轨道中确定所述目标热度值对应的目标渲染轨道；

判断模块，用于判断所述目标弹幕内容的上一个屏幕渲染内容的第一长度是否处于预设长度范围内，以及判断所述目标弹幕内容的第二长度是否处于所述预设长度范围内；

第三确定模块，用于若所述目标弹幕内容的上一个屏幕渲染内容的第一长度处于预设长度范围内，且所述目标弹幕内容的第二长度处于所述预设长度范围内，确定与所述预设长度范围对应的第一间隔距离；

计算模块，用于根据所述第二长度以及屏幕长度，计算所述目标弹幕内容的移动位移，并根据所述移动位移以及预设速度，计算移动时间，将所述移动时间动态地插入至层叠样式表CSS文件中；

渲染模块，用于调用所述CSS文件，在所述目标渲染轨道上，与所述上一个屏幕渲染内容相隔所述第一间隔距离的位置对所述目标弹幕内容进行渲染。

9.一种电子设备，其特征在于，所述电子设备包括处理器和存储器，所述处理器用于执行存储器中存储的计算机程序以实现如权利要求1至7中任意一项所述的基于层叠样式表的弹幕渲染方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有至少一个指令，所述至少一个指令被处理器执行时实现如权利要求1至7任意一项所述的基于层叠样式表的弹幕渲染方法。

Images