[发明专利]基于canvas的弹幕控制方法、装置、设备及存储介质

说明书

本发明涉及大数据技术领域的数据可视化领域，公开了一种基于canvas的弹幕控制方法、装置、设备及存储介质，用于通过画布canvas实现弹幕的显示，避免频繁操作层叠样式表元素，减少资源的消耗，提高弹幕显示的流畅性。本发明方法包括：获取用户输入的初始弹幕数据，并构建canvas弹幕载体；将初始弹幕数据转移到canvas弹幕载体；向用户展示初始弹幕数据的参数选项；根据用户设置好的参数选项对canvas弹幕载体中的初始弹幕数据进行调整，得到目标弹幕数据；根据预设规则将canvas弹幕载体在视频画面上进行移动，以使得目标弹幕数据跟着canvas弹幕载体进行同步移动。

技术领域

本发明涉及数据可视化领域，尤其涉及一种基于canvas的弹幕控制方法、装置、设备及存储介质。

背景技术

弹幕(barrage)，指的是在网络上观看视频时弹出的评论性字幕。类似小说中行间彰显的夹批，视频中屏间飘过的评点叫做弹幕，弹幕顾名思义是指子弹多而形成的幕布，大量吐槽评论从屏幕飘过时效果看上去像是飞行射击游戏里的弹幕。弹幕可以给观众一种“实时互动”的错觉，虽然不同弹幕的发送时间有所区别，但是其只会在视频中特定的一个时间点出现，因此在相同时刻发送的弹幕基本上也具有相同的主题，在参与评论时就会有与其他观众同时评论的错觉。

传统的播放器评论系统是独立于播放器之外的，因此评论的内容大多围绕在整个视频上，话题性不强，也没有“实时互动”的感觉。现有的直播平台，为了提高播主和直播用户的互动，都提供弹幕效果供播主和直播用户使用。

然而，目前的大部分视频弹幕效果是使用文件对象模型(document objectmodel,DOM)和层叠样式表(cascading style sheet3，CSS3)控制实现的，这种弹幕的效果往往会比较卡顿，不能满足用户的体验需求。

发明内容

本发明提供了一种基于canvas的弹幕控制方法、装置、设备及存储介质，用于通过画布canvas实现弹幕的控制，避免频繁操作层叠样式表元素，减少资源的消耗，提高弹幕显示的流畅性。

本发明实施例的第一方面提供一种基于canvas的弹幕控制方法，包括：获取用户输入的初始弹幕数据，并构建canvas弹幕载体；将所述初始弹幕数据转移到所述canvas弹幕载体；向所述用户展示所述初始弹幕数据的参数选项；根据用户设置好的参数选项对所述canvas弹幕载体中的初始弹幕数据进行调整，得到目标弹幕数据；根据预设规则将所述canvas弹幕载体在视频画面上进行移动，以使得所述目标弹幕数据跟着所述canvas弹幕载体进行同步移动。

可选的，在本发明实施例第一方面的第一种实现方式中，所述获取用户输入的初始弹幕数据，并构建canvas弹幕载体包括：判断是否检测到用户的输入操作，所述输入操作包括打开弹幕输入窗口并输入初始弹幕数据；若检测到用户的输入操作，则获取用户输入的初始弹幕数据；响应于所述用户的输入操作在视频画面上构建canvas弹幕载体，所述canvas弹幕载体用于承载并移动所述初始弹幕数据。

可选的，在本发明实施例第一方面的第二种实现方式中，所述将所述初始弹幕数据转移到所述canvas弹幕载体包括：复制用户输入的所述初始弹幕数据，所述初始弹幕数据包括至少一条弹幕；将复制好的所述初始弹幕数据发送至JavaScript绘制工具；通过所述JavaScript绘制工具将所述初始弹幕数据绘制在所述canvas弹幕载体上。

可选的，在本发明实施例第一方面的第三种实现方式中，所述通过所述JavaScript绘制工具将所述初始弹幕数据绘制在所述canvas弹幕载体上包括：通过JavaScript绘制工具创建一个弹幕功能类，所述弹幕功能类中包括每一条弹幕的内容、每一条弹幕出现的时刻、每一条弹幕的数据对象和弹幕功能类的执行上下文；通过所述JavaScript绘制工具创建一个数组，并将所述初始弹幕数据存储在所述数组中；通过所述弹幕功能类将所述数组中存储的初始弹幕数据绘制在所述canvas弹幕载体上。