CN110392293B - 基于canvas的弹幕控制方法、装置、设备及存储介质 - Google Patents

基于canvas的弹幕控制方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN110392293B
CN110392293B CN201910539789.0A CN201910539789A CN110392293B CN 110392293 B CN110392293 B CN 110392293B CN 201910539789 A CN201910539789 A CN 201910539789A CN 110392293 B CN110392293 B CN 110392293B
Authority
CN
China
Prior art keywords
bullet screen
canvas
carrier
data
barrage
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201910539789.0A
Other languages
English (en)
Other versions
CN110392293A (zh
Inventor
张彩凤
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Puhui Enterprise Management Co Ltd
Original Assignee
Ping An Puhui Enterprise Management Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Puhui Enterprise Management Co Ltd filed Critical Ping An Puhui Enterprise Management Co Ltd
Priority to CN201910539789.0A priority Critical patent/CN110392293B/zh
Publication of CN110392293A publication Critical patent/CN110392293A/zh
Application granted granted Critical
Publication of CN110392293B publication Critical patent/CN110392293B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/478Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4788Supplemental services, e.g. displaying phone caller identification, shopping application communicating with other users, e.g. chatting
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/485End-user interface for client configuration
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81Monomedia components thereof
    • H04N21/8126Monomedia components thereof involving additional data, e.g. news, sports, stocks, weather forecasts
    • H04N21/8133Monomedia components thereof involving additional data, e.g. news, sports, stocks, weather forecasts specifically related to the content, e.g. biography of the actors in a movie, detailed information about an article seen in a video program
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81Monomedia components thereof
    • H04N21/8146Monomedia components thereof involving graphical data, e.g. 3D object, 2D graphics

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Human Computer Interaction (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Graphics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

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

Description

基于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弹幕载体上。
可选的,在本发明实施例第一方面的第四种实现方式中,所述根据用户设置好的参数选项对所述canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据,包括:获取用户设置好参数选项,所述参数选项包括弹幕字体大小、弹幕字体颜色、弹幕字体风格、弹幕出现时刻以及弹幕透明度;从所述canvas弹幕载体中获取所述初始弹幕数据;根据所述用户设置好参数选项对获取到的初始弹幕数据的内容进行调整;得到目标弹幕数据;使用所述目标弹幕数据替换所述canvas弹幕载体中的所述初始弹幕数据。
可选的,在本发明实施例第一方面的第五种实现方式中,所述根据预设规则将所述canvas弹幕载体在视频画面上进行移动,以使得所述目标弹幕数据跟着所述canvas弹幕载体进行同步移动,包括:根据预置的移动方向中选择所述canvas弹幕载体在视频画面上的移动方向;确定所述canvas弹幕载体在视频画面上的移动速度,所述移动速度小于阈值;根据所述移动方向和所述移动速度在视频画面上进行移动所述canvas弹幕载体,所述canvas弹幕载体上承载有所述目标弹幕数据。
可选的,在本发明实施例第一方面的第六种实现方式中,在所述根据预设规则将所述canvas弹幕载体在视频画面上进行移动之后,所述方法还包括:当接收到用户关闭弹幕的指令时,对所述canvas弹幕载体进行屏蔽,以使得所述canvas弹幕载体以及所述弹幕数据无法在视频画面上显示;当接收到用户打开弹幕的指令时,解除对所述canvas弹幕载体的屏蔽,并重新根据预设规则将所述canvas弹幕载体在视频画面上进行移动,所述canvas弹幕载体上承载有与当前时间轴对应的目标弹幕数据。
本发明实施例的第二方面提供了一种基于canvas的弹幕控制装置,包括:获取构建单元,用于获取用户输入的初始弹幕数据,并构建canvas弹幕载体;转移单元,用于将所述初始弹幕数据转移到所述canvas弹幕载体;展示单元,用于向所述用户展示所述初始弹幕数据的参数选项;调整单元,用于根据用户设置好的参数选项对所述canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据;移动单元,用于根据预设规则将所述canvas弹幕载体在视频画面上进行移动,以使得所述目标弹幕数据跟着所述canvas弹幕载体进行同步移动。
可选的,在本发明实施例第二方面的第一种实现方式中,获取构建单元具体用于:判断是否检测到用户的输入操作,所述输入操作包括打开弹幕输入窗口并输入初始弹幕数据;若检测到用户的输入操作,则获取用户输入的初始弹幕数据;响应于所述用户的输入操作在视频画面上构建canvas弹幕载体,所述canvas弹幕载体用于承载并移动所述初始弹幕数据。
可选的,在本发明实施例第二方面的第二种实现方式中,转移单元包括:复制模块,用于复制用户输入的所述初始弹幕数据,所述初始弹幕数据包括至少一条弹幕;发送模块,用于将复制好的所述初始弹幕数据发送至JavaScript绘制工具;绘制模块,用于通过所述JavaScript绘制工具将所述初始弹幕数据绘制在所述canvas弹幕载体上。
可选的,在本发明实施例第二方面的第三种实现方式中,绘制模块具体用于:通过JavaScript绘制工具创建一个弹幕功能类,所述弹幕功能类中包括每一条弹幕的内容、每一条弹幕出现的时刻、每一条弹幕的数据对象和弹幕功能类的执行上下文;通过所述JavaScript绘制工具创建一个数组,并将所述初始弹幕数据存储在所述数组中;通过所述弹幕功能类将所述数组中存储的初始弹幕数据绘制在所述canvas弹幕载体上。
可选的,在本发明实施例第二方面的第四种实现方式中,调整单元具体用于:获取用户设置好参数选项,所述参数选项包括弹幕字体大小、弹幕字体颜色、弹幕字体风格、弹幕出现时刻以及弹幕透明度;从所述canvas弹幕载体中获取所述初始弹幕数据;根据所述用户设置好参数选项对获取到的初始弹幕数据的内容进行调整;得到目标弹幕数据;使用所述目标弹幕数据替换所述canvas弹幕载体中的所述初始弹幕数据。
可选的,在本发明实施例第二方面的第五种实现方式中,移动单元具体用于:根据预置的移动方向中选择所述canvas弹幕载体在视频画面上的移动方向;确定所述canvas弹幕载体在视频画面上的移动速度,所述移动速度小于阈值;根据所述移动方向和所述移动速度在视频画面上进行移动所述canvas弹幕载体,所述canvas弹幕载体上承载有所述目标弹幕数据。
可选的,在本发明实施例第二方面的第六种实现方式中,基于canvas的弹幕控制装置还包括:屏蔽单元,用于当接收到用户关闭弹幕的指令时,对所述canvas弹幕载体进行屏蔽,以使得所述canvas弹幕载体以及所述弹幕数据无法在视频画面上显示;恢复单元,用于当接收到用户打开弹幕的指令时,解除对所述canvas弹幕载体的屏蔽,并重新根据预设规则恢复所述canvas弹幕载体在视频画面上进行移动,所述canvas弹幕载体上承载有与当前时间轴对应的目标弹幕数据。
本发明实施例的第三方面提供了一种基于canvas的弹幕控制设备,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述任一实施方式所述的基于canvas的弹幕控制方法。
本发明实施例的第四方面提供了一种计算机可读存储介质,包括指令,当所述指令在计算机上运行时,使得计算机执行上述任一实施方式所述的基于canvas的弹幕控制方法的步骤。
本发明实施例提供的技术方案中,获取用户输入的初始弹幕数据,并构建canvas弹幕载体;将初始弹幕数据转移到canvas弹幕载体;向用户展示初始弹幕数据的参数选项;根据用户设置好的参数选项对canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据;根据预设规则将canvas弹幕载体在视频画面上进行移动,以使得目标弹幕数据跟着canvas弹幕载体进行同步移动。本发明实施例,通过画布canvas实现弹幕的控制,避免频繁操作层叠样式表元素,减少了资源的消耗,提高了弹幕显示的流畅性。
附图说明
图1为本发明实施例中基于canvas的弹幕控制方法的一个实施例示意图;
图2为本发明实施例中基于canvas的弹幕控制方法的另一个实施例示意图;
图3为本发明实施例中基于canvas的弹幕控制装置的一个实施例示意图;
图4为本发明实施例中基于canvas的弹幕控制装置的另一个实施例示意图;
图5为本发明实施例中基于canvas的弹幕控制设备的一个实施例示意图。
具体实施方式
本发明提供了一种基于canvas的弹幕控制方法、装置、设备及存储介质,用于通过画布canvas实现弹幕的控制,避免频繁操作层叠样式表元素,减少资源的消耗,提高弹幕显示的流畅性。
为了使本技术领域的人员更好地理解本发明方案,下面将结合本发明实施例中的附图,对本发明实施例进行描述。
本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外,术语“包括”或“具有”及其任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
请参阅图1,本发明实施例提供的基于canvas的弹幕控制方法的流程图,具体包括:
101、获取用户输入的初始弹幕数据,并构建canvas弹幕载体。
终端获取用户输入的初始弹幕数据,并构建canvas弹幕载体。具体的,判断是否检测到用户的输入操作,输入操作包括打开弹幕输入窗口并输入初始弹幕数据;若检测到用户的输入操作,则获取用户输入的初始弹幕数据;响应于用户的输入操作在视频画面上构建canvas弹幕载体,canvas弹幕载体用于承载并移动初始弹幕数据。其中,canvas弹幕载体的面积大于初始弹幕数据所占的面积,并且,该canvas弹幕载体为无色透明载体,canvas弹幕载体可在视频画面中进行左右、上下移动。由于canvas弹幕载体为无色透明载体,在视频画面上显示的只有弹幕数据,canvas弹幕载体本身则没有显示出来,这样就使得视频画面更加简洁。
可以理解的是,本发明实施例的执行主体可以为基于canvas的弹幕控制装置,还可以是终端或者服务器,具体此处不做限定。本发明以终端为执行主体为例进行说明。
需要说明的是,canvas弹幕载体为首尾相连的一体载体,该canvas弹幕数据在视频画面区域显示,在非视频画面则清除或屏蔽。
102、将初始弹幕数据转移到canvas弹幕载体。
终端将初始弹幕数据转移到canvas弹幕载体。具体的,复制用户输入的初始弹幕数据,初始弹幕数据包括至少一条弹幕;将复制好的初始弹幕数据发送至JavaScript绘制工具;通过JavaScript绘制工具将初始弹幕数据绘制在canvas弹幕载体上。其中,JavaScript一种直译式脚本语言,是一种动态类型、弱类型和基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在超文本标记语言(hypertext markup lnguage,HTML)网页上使用,用来给HTML网页增加动态功能。
需要说明的是,canvas弹幕载体为canvas画布,且该canvas画布为无色透明画布。其中,canvas画布使用JavaScript在网页上绘制图像(弹幕数据),canvas画布是一个矩形区域,用户可以控制其每一像素,canvas画布拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。另外,canvas画布本身没有任何绘图能力,所有的绘制工作必须在JavaScript内部完成。
103、向用户展示初始弹幕数据的参数选项。
终端向用户展示初始弹幕数据的参数选项。具体的,终端在显示界面上显示参数选项,该参数选项用于对用户输入的初始弹幕数据进行调整和改变。参数选项可以包括弹幕字体大小、弹幕字体颜色、弹幕字体风格、弹幕出现时刻以及弹幕透明度等。例如,用户可以在弹幕字体大小选项中选择对应大小参数,如,四号字体,小四字体,11号字体等,具体可以参考现有字体标准。用户还可以在弹幕字体大小选项中选择对应的颜色参数,如,红色,紫色等。弹幕字体风格可以为包括仿宋、宋体、楷体等,具体此处不做限定。弹幕透明度可以在0%至100%中任意设置。
需要说明的是,初始弹幕数据中还可以包括插入的预置图片,例如,鲜花图片,火箭图片、棒棒糖图片等,具体此处不做限定。并且上述参数选项在canvas需要对应具体参数值,例如,value:表示初始弹幕数据的内容;time:表示初始弹幕数据出现的时刻;speed:表示初始弹幕数据的移动速度;color:表示初始弹幕数据的文字颜色;fontSize:表示初始弹幕数据的字体大小;opacity:表示初始弹幕数据的文字透明度。
可以理解的是,当用户未进行某个参数的设置时,该参数为默认值,默认值可以根据实际情况进行设置。
104、根据用户设置好的参数选项对canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据。
终端根据用户设置好的参数选项对canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据。具体的,终端获取用户设置好参数选项,参数选项包括弹幕字体大小、弹幕字体颜色、弹幕字体风格、弹幕出现时刻以及弹幕透明度;从canvas弹幕载体中获取初始弹幕数据;根据用户设置好参数选项对获取到的初始弹幕数据的内容进行调整;得到目标弹幕数据;使用目标弹幕数据替换canvas弹幕载体中的初始弹幕数据。
需要说明的是,不同弹幕出现时刻的弹幕数据的显示时间不同,终端按照先后顺序依次在canvas弹幕载体上进行展示。
105、根据预设规则将canvas弹幕载体在视频画面上进行移动,以使得目标弹幕数据跟着canvas弹幕载体进行同步移动。
终端根据预设规则将canvas弹幕载体在视频画面上进行移动,以使得目标弹幕数据跟着canvas弹幕载体进行同步移动。具体的,根据预置的移动方向中选择canvas弹幕载体在视频画面上的移动方向;确定canvas弹幕载体在视频画面上的移动速度,移动速度小于阈值;根据移动方向和移动速度在视频画面上进行移动canvas弹幕载体,canvas弹幕载体上承载有目标弹幕数据。
例如,预设规则可以是canvas弹幕载体从视频画面的左侧向右侧按照预设的速度进行移动,或者是从视频画面的右侧向左侧按照预设的速度进行移动,或者是从视频画面的下侧向上侧按照预设的速度进行移动,或者是从视频画面的上侧向下侧按照预设的速度进行移动。其中,预设的速度小于阈值,预设的速度需要控制在人眼能够接受的速度范围内,从canvas弹幕载体出现到离开视频画面的时间长度足以让观看视频的观众可以看清楚弹幕的内容。
本发明实施例,获取用户输入的初始弹幕数据,并构建canvas弹幕载体;将初始弹幕数据转移到canvas弹幕载体;向用户展示初始弹幕数据的参数选项;根据用户设置好的参数选项对canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据;根据预设规则将canvas弹幕载体在视频画面上进行移动,以使得目标弹幕数据跟着canvas弹幕载体进行同步移动。通过画布canvas实现弹幕的控制,避免频繁操作层叠样式表元素,减少了资源的消耗,提高了弹幕显示的流畅性。
请参阅图2,本发明实施例提供的基于canvas的弹幕控制方法的另一个流程图,具体包括:
201、获取用户输入的初始弹幕数据,并构建canvas弹幕载体。
终端获取用户输入的初始弹幕数据,并构建canvas弹幕载体。具体的,判断是否检测到用户的输入操作,输入操作包括打开弹幕输入窗口并输入初始弹幕数据;若检测到用户的输入操作,则获取用户输入的初始弹幕数据;响应于用户的输入操作在视频画面上构建canvas弹幕载体,canvas弹幕载体用于承载并移动初始弹幕数据。其中,canvas弹幕载体的面积大于初始弹幕数据所占的面积,并且,该canvas弹幕载体为无色透明载体,canvas弹幕载体可在视频画面中进行左右、上下移动。由于canvas弹幕载体为无色透明载体,在视频画面上显示的只有弹幕数据,canvas弹幕载体本身则没有显示出来,这样就使得视频画面更加简洁。
可以理解的是,本发明实施例的执行主体可以为基于canvas的弹幕控制装置,还可以是终端或者服务器,具体此处不做限定。本发明以终端为执行主体为例进行说明。
需要说明的是,canvas弹幕载体为首尾相连的一体载体,该canvas弹幕数据在视频画面区域显示,在非视频画面则清除或屏蔽。
202、将初始弹幕数据转移到canvas弹幕载体。
终端将初始弹幕数据转移到canvas弹幕载体。具体的,复制用户输入的初始弹幕数据,初始弹幕数据包括至少一条弹幕;将复制好的初始弹幕数据发送至JavaScript绘制工具;通过JavaScript绘制工具将初始弹幕数据绘制在canvas弹幕载体上。其中,JavaScript一种直译式脚本语言,是一种动态类型、弱类型和基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在超文本标记语言(hypertext markup language,HTML)网页上使用,用来给HTML网页增加动态功能。
需要说明的是,canvas弹幕载体为canvas画布,且该canvas画布为无色透明画布。其中,canvas画布使用JavaScript在网页上绘制图像(弹幕数据),canvas画布是一个矩形区域,用户可以控制其每一像素,canvas画布拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。另外,canvas画布本身没有任何绘图能力,所有的绘制工作必须在JavaScript内部完成。
203、向用户展示初始弹幕数据的参数选项。
终端向用户展示初始弹幕数据的参数选项。具体的,终端在显示界面上显示参数选项,该参数选项用于对用户输入的初始弹幕数据进行调整和改变。参数选项可以包括弹幕字体大小、弹幕字体颜色、弹幕字体风格、弹幕出现时刻以及弹幕透明度等。例如,用户可以在弹幕字体大小选项中选择对应大小参数,如,四号字体,小四字体,11号字体等,具体可以参考现有字体标准。用户还可以在弹幕字体大小选项中选择对应的颜色参数,如,红色,紫色等。弹幕字体风格可以为包括仿宋、宋体、楷体等,具体此处不做限定。弹幕透明度可以在0%至100%中任意设置。
需要说明的是,初始弹幕数据中还可以包括插入的预置图片,例如,鲜花图片,火箭图片、棒棒糖图片等,具体此处不做限定。并且上述参数选项在canvas需要对应具体参数值,例如,value:表示初始弹幕数据的内容;time:表示初始弹幕数据出现的时刻;speed:表示初始弹幕数据的移动速度;color:表示初始弹幕数据的文字颜色;fontsize:表示初始弹幕数据的字体大小;opacity:表示初始弹幕数据的文字透明度。
可以理解的是,当用户未进行某个参数的设置时,该参数为默认值,默认值可以根据实际情况进行设置。
204、根据用户设置好的参数选项对canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据。
终端根据用户设置好的参数选项对canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据。具体的,终端获取用户设置好参数选项,参数选项包括弹幕字体大小、弹幕字体颜色、弹幕字体风格、弹幕出现时刻以及弹幕透明度;从canvas弹幕载体中获取初始弹幕数据;根据用户设置好参数选项对获取到的初始弹幕数据的内容进行调整;得到目标弹幕数据;使用目标弹幕数据替换canvas弹幕载体中的初始弹幕数据。
需要说明的是,不同弹幕出现时刻的弹幕数据的显示时间不同,终端按照先后顺序依次在canvas弹幕载体上进行展示。
205、根据预设规则将canvas弹幕载体在视频画面上进行移动,以使得目标弹幕数据跟着canvas弹幕载体进行同步移动。
终端根据预设规则将canvas弹幕载体在视频画面上进行移动,以使得目标弹幕数据跟着canvas弹幕载体进行同步移动。具体的,根据预置的移动方向中选择canvas弹幕载体在视频画面上的移动方向;确定canvas弹幕载体在视频画面上的移动速度,移动速度小于阈值;根据移动方向和移动速度在视频画面上进行移动canvas弹幕载体,canvas弹幕载体上承载有目标弹幕数据。
例如,预设规则可以是canvas弹幕载体从视频画面的左侧向右侧按照预设的速度进行移动,或者是从视频画面的右侧向左侧按照预设的速度进行移动,或者是从视频画面的下侧向上侧按照预设的速度进行移动,或者是从视频画面的上侧向下侧按照预设的速度进行移动。其中,预设的速度小于阈值,预设的速度需要控制在人眼能够接受的速度范围内,从canvas弹幕载体出现到离开视频画面的时间长度足以让观看视频的观众可以看清楚弹幕的内容。
206、当接收到用户关闭弹幕的指令时,对canvas弹幕载体进行屏蔽,以使得canvas弹幕载体以及目标弹幕数据无法在视频画面上显示。
当接收到用户关闭弹幕的指令时,终端对canvas弹幕载体进行屏蔽,以使得canvas弹幕载体以及目标弹幕数据无法在视频画面上显示。
需要说明的是,在canvas弹幕载体及目标弹幕数据被屏蔽的状态下,实时获取用户实时输入的弹幕数据,并将实时获取到的弹幕数据转移至对应的canvas弹幕载体。如此,可以在结束对目标弹幕数据的屏蔽之后,实时将当前的弹幕数据显示在视频画面上。
207、当接收到用户打开弹幕的指令时,解除对canvas弹幕载体的屏蔽,并重新根据预设规则恢复canvas弹幕载体在视频画面上进行移动,canvas弹幕载体上承载有与当前时间轴对应的目标弹幕数据。
当接收到用户打开弹幕的指令时,终端解除对canvas弹幕载体的屏蔽,并重新根据预设规则恢复canvas弹幕载体在视频画面上进行移动,canvas弹幕载体上承载有与当前时间轴对应的目标弹幕数据。
需要说明的是,本发明实施例中,若终端检测到视频播放暂停的信号后,则终端暂停canvas弹幕载体的移动,保留当前的目标弹幕数据在视频画面上,并在视频播放正常之后使canvas弹幕载体恢复之前的移动。
可以理解的是,终端还可以接收到清空弹幕指令,该清空弹幕指令用于将视频画面上正在显示的全部弹幕数据进行移除。
可选的,终端还可以对用户输入的初始弹幕数据进行检查,判断是否存在违禁词汇;若存在违禁词汇,则将初始弹幕数据中的违禁词汇替换成预置符号,并将替换后的弹幕数据渲染到canvas弹幕载体上。
本发明实施例,获取用户输入的初始弹幕数据,并构建canvas弹幕载体;将初始弹幕数据转移到canvas弹幕载体;向用户展示初始弹幕数据的参数选项;根据用户设置好的参数选项对canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据;根据预设规则将canvas弹幕载体在视频画面上进行移动,以使得目标弹幕数据跟着canvas弹幕载体进行同步移动;当接收到用户关闭弹幕的指令时,对canvas弹幕载体进行屏蔽,以使得canvas弹幕载体以及目标弹幕数据无法在视频画面上显示;当接收到用户打开弹幕的指令时,解除对canvas弹幕载体的屏蔽,并重新根据预设规则恢复canvas弹幕载体在视频画面上进行移动,canvas弹幕载体上承载有与当前时间轴对应的目标弹幕数据。通过画布canvas实现弹幕的控制,避免频繁操作层叠样式表元素,减少了资源的消耗,提高了弹幕显示的流畅性,减少卡顿。
上面对本发明实施例中基于canvas的弹幕控制方法进行了描述,下面对本发明实施例中基于canvas的弹幕控制装置进行描述,请参阅图3,本发明实施例中基于canvas的弹幕控制装置的一个实施例包括:
获取构建单元301,用于获取用户输入的初始弹幕数据,并构建canvas弹幕载体;
转移单元302,用于将所述初始弹幕数据转移到所述canvas弹幕载体;
展示单元303,用于向所述用户展示所述初始弹幕数据的参数选项;
调整单元304,用于根据用户设置好的参数选项对所述canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据;
移动单元305,用于根据预设规则将所述canvas弹幕载体在视频画面上进行移动,以使得所述目标弹幕数据跟着所述canvas弹幕载体进行同步移动。
本发明实施例,获取用户输入的初始弹幕数据,并构建canvas弹幕载体;将初始弹幕数据转移到canvas弹幕载体;向用户展示初始弹幕数据的参数选项;根据用户设置好的参数选项对canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据;根据预设规则将canvas弹幕载体在视频画面上进行移动,以使得目标弹幕数据跟着canvas弹幕载体进行同步移动。通过画布canvas实现弹幕的控制,避免频繁操作层叠样式表元素,减少了资源的消耗,提高了弹幕显示的流畅性。
请参阅图4,本发明实施例中基于canvas的弹幕控制装置的另一个实施例包括:
获取构建单元301,用于获取用户输入的初始弹幕数据,并构建canvas弹幕载体;
转移单元302,用于将所述初始弹幕数据转移到所述canvas弹幕载体;
展示单元303,用于向所述用户展示所述初始弹幕数据的参数选项;
调整单元304,用于根据用户设置好的参数选项对所述canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据;
移动单元305,用于根据预设规则将所述canvas弹幕载体在视频画面上进行移动,以使得所述目标弹幕数据跟着所述canvas弹幕载体进行同步移动。
可选的,获取构建单元301具体用于:
判断是否检测到用户的输入操作,所述输入操作包括打开弹幕输入窗口并输入初始弹幕数据;若检测到用户的输入操作,则获取用户输入的初始弹幕数据;响应于所述用户的输入操作在视频画面上构建canvas弹幕载体,所述canvas弹幕载体用于承载并移动所述初始弹幕数据。
可选的,转移单元302包括:
复制模块3021,用于复制用户输入的所述初始弹幕数据,所述初始弹幕数据包括至少一条弹幕;
发送模块3022,用于将复制好的所述初始弹幕数据发送至JavaScript绘制工具;
绘制模块3023,用于通过所述JavaScript绘制工具将所述初始弹幕数据绘制在所述canvas弹幕载体上。
可选的,绘制模块3023具体用于:
通过JavaScript绘制工具创建一个弹幕功能类,所述弹幕功能类中包括每一条弹幕的内容、每一条弹幕出现的时刻、每一条弹幕的数据对象和弹幕功能类的执行上下文;通过所述JavaScript绘制工具创建一个数组,并将所述初始弹幕数据存储在所述数组中;通过所述弹幕功能类将所述数组中存储的初始弹幕数据绘制在所述canvas弹幕载体上。
可选的,调整单元304具体用于:
获取用户设置好参数选项,所述参数选项包括弹幕字体大小、弹幕字体颜色、弹幕字体风格、弹幕出现时刻以及弹幕透明度;从所述canvas弹幕载体中获取所述初始弹幕数据;根据所述用户设置好参数选项对获取到的初始弹幕数据的内容进行调整;得到目标弹幕数据;使用所述目标弹幕数据替换所述canvas弹幕载体中的所述初始弹幕数据。
可选的,移动单元305具体用于:
根据预置的移动方向中选择所述canvas弹幕载体在视频画面上的移动方向;确定所述canvas弹幕载体在视频画面上的移动速度,所述移动速度小于阈值;根据所述移动方向和所述移动速度在视频画面上进行移动所述canvas弹幕载体,所述canvas弹幕载体上承载有所述目标弹幕数据。
可选的,基于canvas的弹幕控制装置还包括:
屏蔽单元306,用于当接收到用户关闭弹幕的指令时,对所述canvas弹幕载体进行屏蔽,以使得所述canvas弹幕载体以及所述弹幕数据无法在视频画面上显示;
恢复单元307,用于当接收到用户打开弹幕的指令时,解除对所述canvas弹幕载体的屏蔽,并重新根据预设规则恢复所述canvas弹幕载体在视频画面上进行移动,所述canvas弹幕载体上承载有与当前时间轴对应的目标弹幕数据。
本发明实施例,获取用户输入的初始弹幕数据,并构建canvas弹幕载体;将初始弹幕数据转移到canvas弹幕载体;向用户展示初始弹幕数据的参数选项;根据用户设置好的参数选项对canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据;根据预设规则将canvas弹幕载体在视频画面上进行移动,以使得目标弹幕数据跟着canvas弹幕载体进行同步移动;当接收到用户关闭弹幕的指令时,对canvas弹幕载体进行屏蔽,以使得canvas弹幕载体以及目标弹幕数据无法在视频画面上显示;当接收到用户打开弹幕的指令时,解除对canvas弹幕载体的屏蔽,并重新根据预设规则恢复canvas弹幕载体在视频画面上进行移动,canvas弹幕载体上承载有与当前时间轴对应的目标弹幕数据。通过画布canvas实现弹幕的控制,避免频繁操作层叠样式表元素,减少了资源的消耗,提高了弹幕显示的流畅性,减少卡顿。
上面图3至图4从模块化功能实体的角度对本发明实施例中的基于canvas的弹幕控制装置进行详细描述,下面从硬件处理的角度对本发明实施例中基于canvas的弹幕控制设备进行详细描述。
图5是本发明实施例提供的一种基于canvas的弹幕控制设备的结构示意图,该基于canvas的弹幕控制设备500可因配置或性能不同而产生比较大的差异,可以包括一个或一个以上处理器(central processing units,CPU)501(例如,一个或一个以上处理器)和存储器509,一个或一个以上存储应用程序507或数据506的存储介质508(例如一个或一个以上海量存储设备)。其中,存储器509和存储介质508可以是短暂存储或持久存储。存储在存储介质508的程序可以包括一个或一个以上模块(图示没标出),每个模块可以包括对基于canvas的弹幕控制设备中的一系列指令操作。更进一步地,处理器501可以设置为与存储介质508通信,在基于canvas的弹幕控制设备500上执行存储介质508中的一系列指令操作。
基于canvas的弹幕控制设备500还可以包括一个或一个以上电源502,一个或一个以上有线或无线网络接口503,一个或一个以上输入输出接口504,和/或,一个或一个以上操作系统505,例如Windows Serve,Mac OS X,Unix,Linux,FreeBSD等等。本领域技术人员可以理解,图5中示出的基于canvas的弹幕控制设备结构并不构成对基于canvas的弹幕控制设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。处理器501可以执行上述实施例中获取构建单元301、转移单元302、调整单元304、移动单元305、屏蔽单元306和恢复单元307的功能。
下面结合图5对基于canvas的弹幕控制设备的各个构成部件进行具体的介绍:
处理器501是基于canvas的弹幕控制设备的控制中心,可以按照设置的基于canvas的弹幕控制方法进行处理。处理器501利用各种接口和线路连接整个基于canvas的弹幕控制设备的各个部分,通过运行或执行存储在存储器509内的软件程序和/或模块,以及调用存储在存储器509内的数据,执行基于canvas的弹幕控制设备的各种功能和处理数据,从而避免频繁操作层叠样式表元素,减少资源的消耗,提高弹幕显示的流畅性。存储介质508和存储器509都是存储数据的载体,本发明实施例中,存储介质508可以是指储存容量较小,但速度快的内存储器,而存储器509可以是储存容量大,但储存速度慢的外存储器。
存储器509可用于存储软件程序以及模块,处理器501通过运行存储在存储器509的软件程序以及模块,从而执行基于canvas的弹幕控制设备500的各种功能应用以及数据处理。存储器509可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序(比如将初始弹幕数据转移到canvas弹幕载体)等;存储数据区可存储根据基于canvas的弹幕控制设备的使用所创建的数据(比如目标弹幕数据等)等。此外,存储器509可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。在本发明实施例中提供的基于canvas的弹幕控制方法程序和接收到的数据流存储在存储器中,当需要使用时,处理器501从存储器509中调用。
在计算机上加载和执行所述计算机程序指令时,全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一计算机可读存储介质传输,例如,所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、双绞线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质,(例如,软盘、硬盘、磁带)、光介质(例如,光盘)、或者半导体介质(例如固态硬盘(solid state disk,SSD))等。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统,装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本发明所提供的几个实施例中,应该理解到,所揭露的系统,装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本发明实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(read-only memory,ROM)、随机存取存储器(random access memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (7)

1.一种基于canvas的弹幕控制方法,其特征在于,包括:
获取用户输入的初始弹幕数据,并构建canvas弹幕载体;
将所述初始弹幕数据转移到所述canvas弹幕载体;
向所述用户展示所述初始弹幕数据的参数选项;
根据用户设置好的参数选项对所述canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据;
根据预设规则将所述canvas弹幕载体在视频画面上进行移动,以使得所述目标弹幕数据跟着所述canvas弹幕载体进行同步移动;其中,所述预设规则为从所述视频画面的左侧向右侧按照预设的速度进行移动,或者是从所述视频画面的右侧向左侧按照预设的速度进行移动,或者是从所述视频画面的下侧向上侧按照预设的速度进行移动,或者是从所述视频画面的上侧向下侧按照预设的速度进行移动;
所述根据预设规则将所述canvas弹幕载体在视频画面上进行移动,以使得所述目标弹幕数据跟着所述canvas弹幕载体进行同步移动,包括:根据预置的移动方向选择所述canvas弹幕载体在视频画面上的移动方向;确定所述canvas弹幕载体在视频画面上的移动速度,所述移动速度小于阈值;根据所述移动方向和所述移动速度在视频画面上移动所述canvas弹幕载体,所述canvas弹幕载体上承载有所述目标弹幕数据;
所述将所述初始弹幕数据转移到所述canvas弹幕载体包括:复制用户输入的所述初始弹幕数据,所述初始弹幕数据包括至少一条弹幕;将复制好的所述初始弹幕数据发送至JavaScript绘制工具;通过所述JavaScript绘制工具将所述初始弹幕数据绘制在所述canvas弹幕载体上;
所述通过所述JavaScript绘制工具将所述初始弹幕数据绘制在所述canvas弹幕载体上包括:通过JavaScript绘制工具创建一个弹幕功能类,所述弹幕功能类中包括每一条弹幕的内容、每一条弹幕出现的时刻、每一条弹幕的数据对象和弹幕功能类的执行上下文;通过所述JavaScript绘制工具创建一个数组,并将所述初始弹幕数据存储在所述数组中;通过所述弹幕功能类将所述数组中存储的初始弹幕数据绘制在所述canvas弹幕载体上。
2.根据权利要求1所述的基于canvas的弹幕控制方法,其特征在于,所述获取用户输入的初始弹幕数据,并构建canvas弹幕载体包括:
判断是否检测到用户的输入操作,所述输入操作包括打开弹幕输入窗口并输入初始弹幕数据;
若检测到用户的输入操作,则获取用户输入的初始弹幕数据;
响应于所述用户的输入操作在视频画面上构建canvas弹幕载体,所述canvas弹幕载体用于承载并移动所述初始弹幕数据。
3.根据权利要求1所述的基于canvas的弹幕控制方法,其特征在于,所述根据用户设置好的参数选项对所述canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据,包括:
获取用户设置好的参数选项,所述参数选项包括弹幕字体大小、弹幕字体颜色、弹幕字体风格、弹幕出现时刻以及弹幕透明度;
从所述canvas弹幕载体中获取所述初始弹幕数据;
根据所述用户设置好的参数选项对获取到的初始弹幕数据的内容进行调整;
得到目标弹幕数据;
使用所述目标弹幕数据替换所述canvas弹幕载体中的所述初始弹幕数据。
4.根据权利要求1-3中任一所述的基于canvas的弹幕控制方法,其特征在于,在所述根据预设规则将所述canvas弹幕载体在视频画面上进行移动之后,所述方法还包括:
当接收到用户关闭弹幕的指令时,对所述canvas弹幕载体进行屏蔽,以使得所述canvas弹幕载体以及所述弹幕数据无法在视频画面上显示;
当接收到用户打开弹幕的指令时,解除对所述canvas弹幕载体的屏蔽,并重新根据预设规则恢复所述canvas弹幕载体在视频画面上进行移动,所述canvas弹幕载体上承载有与当前时间轴对应的目标弹幕数据。
5.一种基于canvas的弹幕控制装置,其特征在于,包括:
获取构建单元,用于获取用户输入的初始弹幕数据,并构建canvas弹幕载体;
转移单元,用于将所述初始弹幕数据转移到所述canvas弹幕载体;
展示单元,用于向所述用户展示所述初始弹幕数据的参数选项;
调整单元,用于根据用户设置好的参数选项对所述canvas弹幕载体中的初始弹幕数据进行调整,得到目标弹幕数据;
移动单元,用于根据预设规则将所述canvas弹幕载体在视频画面上进行移动,以使得所述目标弹幕数据跟着所述canvas弹幕载体进行同步移动;其中,所述预设规则为从所述视频画面的左侧向右侧按照预设的速度进行移动,或者是从所述视频画面的右侧向左侧按照预设的速度进行移动,或者是从所述视频画面的下侧向上侧按照预设的速度进行移动,或者是从所述视频画面的上侧向下侧按照预设的速度进行移动;
所述移动单元,还用于根据预置的移动方向选择所述canvas弹幕载体在视频画面上的移动方向;确定所述canvas弹幕载体在视频画面上的移动速度,所述移动速度小于阈值;根据所述移动方向和所述移动速度在视频画面上移动所述canvas弹幕载体,所述canvas弹幕载体上承载有所述目标弹幕数据;
所述转移单元,还用于复制用户输入的所述初始弹幕数据,所述初始弹幕数据包括至少一条弹幕;将复制好的所述初始弹幕数据发送至JavaScript绘制工具;通过所述JavaScript绘制工具将所述初始弹幕数据绘制在所述canvas弹幕载体上;
所述转移单元,还用于通过JavaScript绘制工具创建一个弹幕功能类,所述弹幕功能类中包括每一条弹幕的内容、每一条弹幕出现的时刻、每一条弹幕的数据对象和弹幕功能类的执行上下文;通过所述JavaScript绘制工具创建一个数组,并将所述初始弹幕数据存储在所述数组中;通过所述弹幕功能类将所述数组中存储的初始弹幕数据绘制在所述canvas弹幕载体上。
6.一种基于canvas的弹幕控制设备,其特征在于,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现如权利要求1-4中任意一项所述的基于canvas的弹幕控制方法。
7.一种计算机可读存储介质,其特征在于,包括指令,当所述指令在计算机上运行时,使得计算机执行如权利要求1-4中任意一项所述的基于canvas的弹幕控制方法。
CN201910539789.0A 2019-06-21 2019-06-21 基于canvas的弹幕控制方法、装置、设备及存储介质 Active CN110392293B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910539789.0A CN110392293B (zh) 2019-06-21 2019-06-21 基于canvas的弹幕控制方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910539789.0A CN110392293B (zh) 2019-06-21 2019-06-21 基于canvas的弹幕控制方法、装置、设备及存储介质

Publications (2)

Publication Number Publication Date
CN110392293A CN110392293A (zh) 2019-10-29
CN110392293B true CN110392293B (zh) 2023-04-07

Family

ID=68285617

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910539789.0A Active CN110392293B (zh) 2019-06-21 2019-06-21 基于canvas的弹幕控制方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN110392293B (zh)

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111031400B (zh) 2019-11-25 2021-04-27 上海哔哩哔哩科技有限公司 弹幕呈现方法和系统
CN111796825B (zh) * 2020-06-30 2024-02-09 北京字节跳动网络技术有限公司 一种弹幕的绘制方法、装置、设备和存储介质
CN111538557B (zh) * 2020-07-09 2020-10-30 平安国际智慧城市科技股份有限公司 基于层叠样式表的弹幕渲染方法及相关设备
CN112312190A (zh) * 2020-10-10 2021-02-02 游艺星际(北京)科技有限公司 视频画面的展示方法、装置、电子设备和存储介质
CN113407135A (zh) * 2021-06-23 2021-09-17 青岛海信移动通信技术股份有限公司 应用于墨水屏的显示控制方法及相关装置
CN114531607A (zh) * 2021-12-14 2022-05-24 北京奇艺世纪科技有限公司 弹幕显示方法、装置、设备及存储介质
CN115412767B (zh) * 2022-05-16 2023-10-27 北京大学 基于视频弹幕提取用户观看行为并可视化的方法及系统

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2019006939A1 (zh) * 2017-07-05 2019-01-10 武汉斗鱼网络科技有限公司 弹幕显示方法、装置及电子设备

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105939493B (zh) * 2016-03-30 2019-02-22 广州华多网络科技有限公司 一种视频弹幕的显示方法及显示装置
CN106131643A (zh) * 2016-07-13 2016-11-16 乐视控股(北京)有限公司 一种弹幕处理方法、处理装置及其电子设备
CN106488314B (zh) * 2016-11-30 2019-11-22 上海幻电信息科技有限公司 一种弹幕渲染方法
CN107092643B (zh) * 2017-03-06 2020-10-16 武汉斗鱼网络科技有限公司 一种弹幕渲染方法及装置
CN107750007A (zh) * 2017-12-06 2018-03-02 北京搜狐新动力信息技术有限公司 一种视频弹幕的处理方法及装置

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2019006939A1 (zh) * 2017-07-05 2019-01-10 武汉斗鱼网络科技有限公司 弹幕显示方法、装置及电子设备

Also Published As

Publication number Publication date
CN110392293A (zh) 2019-10-29

Similar Documents

Publication Publication Date Title
CN110392293B (zh) 基于canvas的弹幕控制方法、装置、设备及存储介质
CN107341018B (zh) 一种在页面切换后继续显示视图的方法和装置
US11218739B2 (en) Live video broadcast method, live broadcast device and storage medium
US10068364B2 (en) Method and apparatus for making personalized dynamic emoticon
CN107885848B (zh) 基于web技术的网页截屏方法
CN106303731A (zh) 弹幕的显示方法及装置
WO2015035283A1 (en) System and method for generating customized advertisement creatives
CN109643218A (zh) 用户界面元素的动画
CN111405339B (zh) 一种分屏显示方法、电子设备及存储介质
CN111277861B (zh) 提取视频中热点片段的方法以及装置
EP4242839A1 (en) Page switching display method and apparatus, storage medium, and electronic device
CN111246270B (zh) 一种显示弹幕的方法、装置、设备和存储介质
CN111399831A (zh) 页面的展示方法和装置、存储介质、电子装置
CN111279687A (zh) 视频的字幕处理方法和导播系统
CN114679628B (zh) 一种弹幕添加方法、装置、电子设备和存储介质
CN105868240A (zh) 一种自适应显示网页的方法及装置
CN112752132A (zh) 漫画图片弹幕显示方法、装置、介质及电子设备
CN108008894B (zh) 一种内容显示方法、装置和终端设备
CN112965779A (zh) 页面模式切换方法、装置和设备
CN108268520B (zh) 课件的控制方法、装置及在线课程直播系统
CN109091866B (zh) 显示控制方法、装置、计算机可读介质及电子设备
CN109547833B (zh) 弹幕显示控制方法、装置、设备及计算机可读存储介质
CN113495664A (zh) 基于媒体信息流的信息展示方法、装置、设备及存储介质
CN111915705A (zh) 图片可视化编辑方法、装置、设备和介质
CN107864409B (zh) 一种弹幕显示方法、装置以及计算机可读存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant