CN106488314A - 一种弹幕渲染方法 - Google Patents

一种弹幕渲染方法 Download PDF

Info

Publication number
CN106488314A
CN106488314A CN201611085559.4A CN201611085559A CN106488314A CN 106488314 A CN106488314 A CN 106488314A CN 201611085559 A CN201611085559 A CN 201611085559A CN 106488314 A CN106488314 A CN 106488314A
Authority
CN
China
Prior art keywords
barrage
browser
mode
render
list
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.)
Granted
Application number
CN201611085559.4A
Other languages
English (en)
Other versions
CN106488314B (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.)
Shanghai Huandian Information Technology Co Ltd
Original Assignee
Shanghai Huandian Information Technology 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 Shanghai Huandian Information Technology Co Ltd filed Critical Shanghai Huandian Information Technology Co Ltd
Priority to CN201611085559.4A priority Critical patent/CN106488314B/zh
Publication of CN106488314A publication Critical patent/CN106488314A/zh
Application granted granted Critical
Publication of CN106488314B publication Critical patent/CN106488314B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/475—End-user interface for inputting end-user data, e.g. personal identification number [PIN], preference data
    • H04N21/4756—End-user interface for inputting end-user data, e.g. personal identification number [PIN], preference data for rating content, e.g. scoring a recommended movie
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing 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/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H04N21/44012—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving rendering scenes according to scene graphs, e.g. MPEG-4 scene graphs
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/488—Data services, e.g. news ticker
    • H04N21/4884—Data services, e.g. news ticker for displaying subtitles

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)

Abstract

一种弹幕渲染方法，根据不同浏览器版本选择不同的弹幕渲染方式，针对IE11以下的浏览器，采用CSS渲染方式进行弹幕渲染，针对火狐浏览器，采用Canvas渲染方式进行弹幕渲染，针对既不是IE11以下的浏览器，也不是火狐浏览器的其他浏览器，采用CSS3渲染方式进行弹幕渲染。本发明根据不同浏览器版本选择不同的弹幕渲染方式，优化了弹幕渲染方式，使用户获得最佳的视觉体验。

Description

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

Claims (5)

1.一种弹幕渲染方法，其特征在于，根据不同浏览器版本选择不同的弹幕渲染方式，针对IE11以下的浏览器，采用CSS渲染方式进行弹幕渲染，针对火狐浏览器，采用Canvas渲染方式进行弹幕渲染，针对既不是IE11以下的浏览器，也不是火狐浏览器的其他浏览器，采用CSS3渲染方式进行弹幕渲染。
2.如权利要求1所述的弹幕渲染方法，其特征在于，根据用户代理判断得到用户使用的浏览器类型。
3.如权利要求1所述的弹幕渲染方法，其特征在于，在视频开始播放时，浏览器加载弹幕列表，将弹幕列表按开始时间排序构造出一个有序弹幕列表。
4.如权利要求3所述的弹幕渲染方法，其特征在于，随着视频时间轴增长，浏览器在视频播放的每一帧判断有序弹幕列表中是否存在当前时间的弹幕，如果存在当前时间的弹幕，则根据不同浏览器版本选择不同的弹幕渲染方式进行弹幕渲染。
5.如权利要求4所述的弹幕渲染方法，其特征在于，随着视频时间轴增长，浏览器在视频播放的每一帧判断正在渲染的弹幕列表是否有弹幕已经超出显示时间，如果弹幕超出显示时间，则移除弹幕。
CN201611085559.4A 2016-11-30 2016-11-30 一种弹幕渲染方法 Active CN106488314B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201611085559.4A CN106488314B (zh) 2016-11-30 2016-11-30 一种弹幕渲染方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201611085559.4A CN106488314B (zh) 2016-11-30 2016-11-30 一种弹幕渲染方法

Publications (2)

Publication Number Publication Date
CN106488314A true CN106488314A (zh) 2017-03-08
CN106488314B CN106488314B (zh) 2019-11-22

Family

ID=58274420

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201611085559.4A Active CN106488314B (zh) 2016-11-30 2016-11-30 一种弹幕渲染方法

Country Status (1)

Country Link
CN (1) CN106488314B (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109640154A (zh) * 2018-12-14 2019-04-16 苏州好玩友网络科技有限公司 网页弹幕显示方法、装置、设备及存储介质
CN110392293A (zh) * 2019-06-21 2019-10-29 平安普惠企业管理有限公司 基于canvas的弹幕控制方法、装置、设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090300483A1 (en) * 2008-05-30 2009-12-03 Julien Viet Stylesheet conversion engine
CN103942137A (zh) * 2013-01-23 2014-07-23 腾讯科技（深圳）有限公司 浏览器兼容性测试方法及装置
CN104754420A (zh) * 2015-03-30 2015-07-01 北京奇艺世纪科技有限公司 一种在多媒体文件播放过程中的弹幕交互方法及装置
CN106060674A (zh) * 2016-06-27 2016-10-26 武汉斗鱼网络科技有限公司 一种在前端实现智能视频直播的系统及方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090300483A1 (en) * 2008-05-30 2009-12-03 Julien Viet Stylesheet conversion engine
CN103942137A (zh) * 2013-01-23 2014-07-23 腾讯科技（深圳）有限公司 浏览器兼容性测试方法及装置
CN104754420A (zh) * 2015-03-30 2015-07-01 北京奇艺世纪科技有限公司 一种在多媒体文件播放过程中的弹幕交互方法及装置
CN106060674A (zh) * 2016-06-27 2016-10-26 武汉斗鱼网络科技有限公司 一种在前端实现智能视频直播的系统及方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
张泽娜: "《JavaScript实战》", 31 August 2014, 清华大学出版社 *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109640154A (zh) * 2018-12-14 2019-04-16 苏州好玩友网络科技有限公司 网页弹幕显示方法、装置、设备及存储介质
CN109640154B (zh) * 2018-12-14 2019-09-10 苏州好玩友网络科技有限公司 网页弹幕显示方法、装置、设备及存储介质
CN110392293A (zh) * 2019-06-21 2019-10-29 平安普惠企业管理有限公司 基于canvas的弹幕控制方法、装置、设备及存储介质

Also Published As

Publication number Publication date
CN106488314B (zh) 2019-11-22

Similar Documents

Publication Publication Date Title
CN105373567B (zh) 页面生成方法及客户端
WO2018161709A1 (zh) 一种弹幕渲染方法及装置
CN104217037B (zh) 一种在移动终端中显示网页的方法及装置
CN107885848A (zh) 基于web技术的网页截屏方法
CN107797801A (zh) 一种基于多种移动终端界面的适配方法
US20120218273A1 (en) Dynamic typesetting method of display image
CN104516867A (zh) 一种表格重排方法和系统
US20210166457A1 (en) Graphic drawing method and apparatus, device, and storage medium
CN105930464B (zh) Web富媒体跨屏适配方法和装置
CN107707965A (zh) 一种弹幕的生成方法和装置
CN111915705A (zh) 图片可视化编辑方法、装置、设备和介质
CN114650434A (zh) 一种基于云服务的渲染方法及其相关设备
CN115237522A (zh) 页面自适应展示方法及装置
CN106488314A (zh) 一种弹幕渲染方法
JP6395160B2 (ja) 電子表示装置の文書配置
US20140152701A1 (en) Reducing moiré patterns
CN106231209A (zh) 一种视频详情页背景图片实现方法
CN105389308B (zh) 网页的显示处理方法及装置
CN112711729A (zh) 基于页面动画的渲染方法、装置、电子设备及存储介质
CN112528596A (zh) 文字特效的渲染方法、装置、电子设备及存储介质
CN112148398B (zh) 图像处理方法和装置
US8185818B2 (en) Mixed techniques for HTML crosstab rendering
CN105468656B (zh) 网页背景图像生成方法和系统
CN106709965B (zh) 一种基于共享表面的文本显示方法及装置
US8988423B2 (en) Electronic album generating apparatus, stereoscopic image pasting apparatus, and methods and programs for controlling operation of same

Legal Events

Date Code Title Description
C06 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