首页 / 专利库 / 软件 / 软件套件 / 软件组件 / 插件 / 一种弹幕渲染方法

一种弹幕渲染方法

阅读:1019发布:2020-08-18

专利汇可以提供一种弹幕渲染方法专利检索,专利查询,专利分析的服务。并且一种弹幕 渲染 方法,根据不同浏览器版本选择不同的弹幕渲染方式,针对IE11以下的浏览器,采用CSS渲染方式进行弹幕渲染,针对火狐浏览器,采用Canvas渲染方式进行弹幕渲染,针对既不是IE11以下的浏览器,也不是火狐浏览器的其他浏览器,采用CSS3渲染方式进行弹幕渲染。本 发明 根据不同浏览器版本选择不同的弹幕渲染方式,优化了弹幕渲染方式,使用户获得最佳的视觉体验。,下面是一种弹幕渲染方法专利的具体信息内容。

1.一种弹幕渲染方法,其特征在于,根据不同浏览器类型及版本选择不同的弹幕渲染方式,针对IE11以下的浏览器,采用CSS渲染方式进行弹幕渲染,针对火狐浏览器,采用Canvas渲染方式进行弹幕渲染,针对既不是IE11以下的浏览器,也不是火狐浏览器的其他浏览器,采用CSS3渲染方式进行弹幕渲染,具体的,所述方法包括:
在视频开始播放时,加载弹幕列表,将所述弹幕列表按时间构造出有序弹幕列表;
随着视频时间轴增长,浏览器在视频播放的每一判断所述有序弹幕列表中是否存在当前时间的弹幕,如果存在当前时间的弹幕,则判断用户使用的浏览器类型及版本,以及根据不同浏览器版本选择不同的弹幕渲染方式进行弹幕渲染,并展示弹幕内容,如果不存在当前时间的弹幕,则继续判断下一帧;
其中,所述判断用户使用的浏览器类型及版本,以及根据不同浏览器版本选择不同的弹幕渲染方式进行弹幕渲染包括:
如果判断用户使用的是IE11以下的浏览器,浏览器从所述有序弹幕列表中取出弹幕,通过每帧对弹幕区域内的弹幕进行坐标运算得出当前坐标,改变他们相对弹幕区域的定位,以采用CSS渲染方式进行弹幕渲染;
如果判断用户使用的是火狐浏览器,浏览器从所述有序弹幕列表中取出弹幕,先预渲染到小Canvas画布,通过每帧对弹幕区域内的弹幕进行坐标运算得出当前坐标,再将每所述小Canvas画布渲染到大弹幕画布上,然后将弹幕渲染至屏幕,以采用Canvas渲染方式进行弹幕渲染;
如果判断用户使用的既不是IE11以下的浏览器,也不是火狐浏览器,浏览器从所述有序弹幕列表中取出弹幕,设置弹幕的过渡时间和过渡坐标轴距离,以采用CSS3渲染方式进行弹幕渲染;
其中,所述根据不同浏览器类型及版本选择不同的弹幕渲染方式具体为根据不同浏览器渲染引擎选择不同的弹幕渲染方式。
2.如权利要求1所述的弹幕渲染方法,其特征在于,所述判断用户使用的浏览器类型及版本包括:根据用户代理判断得到用户使用的浏览器类型,具体的,通过特殊字符串头识别用户使用的浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件,以得到用户使用的浏览器类型。
3.如权利要求1所述的弹幕渲染方法,其特征在于,所述弹幕包含:开始时间、持续时间、内容、模式、字号大小和其它消息,所述在视频开始播放时,浏览器加载弹幕列表将弹幕列表按时间构造出有序弹幕列表还包括,将弹幕列表按开始时间排序构造出一个有序弹幕列表。
4.如权利要求3所述的弹幕渲染方法,其特征在于,所述随着视频时间轴增长,浏览器在视频播放的每一帧判断有序弹幕列表中是否存在当前时间的弹幕,如果存在当前时间的弹幕,则判断用户使用的浏览器类型及版本,以及根据不同浏览器版本选择不同的弹幕渲染方式进行弹幕渲染包括:
如果判断用户使用的浏览器只能使用一种渲染方式进行弹幕渲染,则选择该渲染方式进行弹幕渲染;
如果判断用户使用的浏览器可以使用多种渲染方式进行弹幕渲染,则选择通过CPU使用率和随机存储器RAM占用值得到的效率最高的渲染方式进行弹幕渲染。
5.如权利要求4所述的弹幕渲染方法,其特征在于,随着视频时间轴增长,浏览器在视频播放的每一帧判断正在渲染的弹幕列表是否有弹幕已经超出显示时间,如果弹幕超出显示时间,则移除弹幕,并将弹幕移出正在渲染的弹幕列表。

说明书全文

一种弹幕渲染方法

技术领域

[0001] 本发明涉及一种弹幕渲染方法。

背景技术

[0002] 弹幕是指一种在观看视频时,大量以字幕形式呈现的评论与视频同在一个画面的现象。在视频上方大量飘过的评论如密集炮弹一般,故得名弹幕。弹幕会随着视频的播放实时在视频上呈现,这样观看者在观看该视频时能够看到其他观看者和自己发送的弹幕。
[0003] 为了提高画质和图形效果,通常需要对弹幕进行渲染,由于不同浏览器的内核实现方式不同,对弹幕渲染方式的支持度也不同,当用户通过不同浏览器观看视频时,有时会难以获得最佳的视觉体验。

发明内容

[0004] 本发明提供一种弹幕渲染方法,根据不同浏览器版本选择不同的弹幕渲染方式,优化了弹幕渲染方式,使用户获得最佳的视觉体验。
[0005] 为了达到上述目的,本发明提供一种弹幕渲染方法,根据不同浏览器版本选择不同的弹幕渲染方式,针对IE11以下的浏览器,采用CSS渲染方式进行弹幕渲染,针对火狐浏览器,采用Canvas渲染方式进行弹幕渲染,针对既不是IE11以下的浏览器,也不是火狐浏览器的其他浏览器,采用CSS3渲染方式进行弹幕渲染。
[0006] 根据用户代理判断得到用户使用的浏览器类型。
[0007] 在视频开始播放时,浏览器加载弹幕列表,将弹幕列表按开始时间排序构造出一个有序弹幕列表。
[0008] 随着视频时间轴增长,浏览器在视频播放的每一判断有序弹幕列表中是否存在当前时间的弹幕,如果存在当前时间的弹幕,则根据不同浏览器版本选择不同的弹幕渲染方式进行弹幕渲染。
[0009] 随着视频时间轴增长,浏览器在视频播放的每一帧判断正在渲染的弹幕列表是否有弹幕已经超出显示时间,如果弹幕超出显示时间,则移除弹幕。
[0010] 本发明根据不同浏览器版本选择不同的弹幕渲染方式,优化了弹幕渲染方式,使用户获得最佳的视觉体验。附图说明
[0011] 图1是本发明提供的一种弹幕渲染方法的流程图

具体实施方式

[0012] 以下根据图1,具体说明本发明的较佳实施例
[0013] 如图1所示,本发明提供一种弹幕渲染方法,包含以下步骤:
[0014] 步骤S1、浏览器向服务器发出请求,加载弹幕列表,将弹幕列表按开始时间排序构造出一个有序弹幕列表;
[0015] 所述的弹幕包含:开始时间、持续时间、内容、模式、字号大小和其它消息;
[0016] 步骤S2、随着视频时间轴增长,浏览器在视频播放的每一帧判断有序弹幕列表中是否存在当前时间的弹幕,如果是,则进行步骤S3,如果否,则继续判断下一帧;
[0017] 本实施例中,每一帧为1/60秒;
[0018] 步骤S3、根据用户代理判断用户使用的浏览器类型,如果使用的是IE11以下的浏览器,则进行步骤S4,如果使用的是火狐(Firefox)浏览器,则进行步骤S5,如果使用的既不是IE11以下的浏览器,也不是火狐浏览器,则进行步骤S6;
[0019] 所述的用户代理(User Agent)简称UA,是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等;
[0020] 步骤S4、浏览器从有序弹幕列表中取出弹幕,采用CSS渲染方式对弹幕进行渲染,并展示弹幕内容,进行步骤S7;
[0021] 所述的CSS渲染方式支持所有浏览器,推荐在IE11以下的浏览器使用,通过每帧对弹幕区域内的弹幕进行坐标运算得出当前坐标Y轴(top)和X轴(left),改变他们相对弹幕区域左上定位
[0022] 步骤S5、浏览器从有序弹幕列表中取出弹幕,采用Canvas渲染方式对弹幕进行渲染,并展示弹幕内容,进行步骤S7;
[0023] 所述的Canvas渲染方式支持IE9及以上内核及其它主流浏览器,但在Firefox浏览器中的支持度最好,在弹幕渲染至屏幕之前先预渲染到小的Canvas画布,通过每帧对弹幕区域内的弹幕进行坐标运算得出当前坐标X和Y,再将每小的画布渲染到大弹幕画布上;
[0024] 步骤S6、浏览器从有序弹幕列表中取出弹幕,采用CSS3渲染方式对弹幕进行渲染,并展示弹幕内容,进行步骤S7;
[0025] 所述的CSS3渲染方式支持IE10及以上内核及其它主流浏览器,主要使用CSS3的动画过渡(transition:transform),直接设置好弹幕的过渡时间和过渡坐标轴距离,达到平滑滚动过屏幕的效果;
[0026] 步骤S7、随着视频时间轴增长,浏览器在视频播放的每一帧判断正在渲染的弹幕列表是否有弹幕已经超出显示时间,如果是,则移除弹幕,并将弹幕移出正在渲染的弹幕列表,如果否,则继续渲染展示;
[0027] 本实施例中,每一帧为1/60秒。
[0028] 层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言,层叠样式表能够对网页中的对象的位置排版进行像素级的精确控制,在一个固定的矩形空间内按显示坐标展示一张大图的不同位置内容。Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以操作的位图。
[0029] 表1是不同浏览器版本使用不同渲染方式的效果对比说明。
[0030] 表1
[0031]
[0032] 如表1所示,如果浏览器版本为IE8,则只能采用CSS渲染方式,CPU使用率为35%,随机存储器RAM占用320M;如果浏览器版本为IE11,可以同时采用三种渲染方式,但采用CSS3渲染方式的效率最高,CPU使用率为18%;如果浏览器版本为edge,可以同时采用三种渲染方式,但采用CSS3渲染方式的效率最高,CPU使用率为15%;如果浏览器版本为FireFox 49.0,可以同时采用三种渲染方式,但采用Canvas渲染方式的效率最高,CPU使用率为20%;
如果浏览器版本为Chrome 54,可以同时采用三种渲染方式,但采用CSS3渲染方式的效率最高,CPU使用率为17%;如果浏览器版本为Safari10,可以同时采用三种渲染方式,但采用CSS3渲染方式的效率最高,CPU使用率为33%。
[0033] 本发明可以根据不同浏览器版本选择不同的弹幕渲染方式,优化了弹幕渲染方式,使用户获得最佳的视觉体验。
[0034] 尽管本发明的内容已经通过上述优选实施例作了详细介绍,但应当认识到上述的描述不应被认为是对本发明的限制。在本领域技术人员阅读了上述内容后,对于本发明的多种修改和替代都将是显而易见的。因此,本发明的保护范围应由所附的权利要求来限定。
高效检索全球专利

专利汇是专利免费检索,专利查询,专利分析-国家发明专利查询检索分析平台,是提供专利分析,专利查询,专利检索等数据服务功能的知识产权数据服务商。

我们的产品包含105个国家的1.26亿组数据,免费查、免费专利分析。

申请试用

分析报告

专利汇分析报告产品可以对行业情报数据进行梳理分析,涉及维度包括行业专利基本状况分析、地域分析、技术分析、发明人分析、申请人分析、专利权人分析、失效分析、核心专利分析、法律分析、研发重点分析、企业专利处境分析、技术处境分析、专利寿命分析、企业定位分析、引证分析等超过60个分析角度,系统通过AI智能系统对图表进行解读,只需1分钟,一键生成行业专利分析报告。

申请试用

QQ群二维码
意见反馈