CN106060674A - 一种在前端实现智能视频直播的系统及方法 - Google Patents

一种在前端实现智能视频直播的系统及方法 Download PDF

Info

Publication number
CN106060674A
CN106060674A CN201610482399.0A CN201610482399A CN106060674A CN 106060674 A CN106060674 A CN 106060674A CN 201610482399 A CN201610482399 A CN 201610482399A CN 106060674 A CN106060674 A CN 106060674A
Authority
CN
China
Prior art keywords
barrage
video
data
menu
live
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.)
Pending
Application number
CN201610482399.0A
Other languages
English (en)
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.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu Network 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 Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201610482399.0A priority Critical patent/CN106060674A/zh
Publication of CN106060674A publication Critical patent/CN106060674A/zh
Pending legal-status Critical Current

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/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/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/25—Management operations performed by the server for facilitating the content distribution or administrating data related to end-users or client devices, e.g. end-user or client device authentication, learning user preferences for recommending movies
    • H04N21/254—Management at additional data server, e.g. shopping server, rights management server
    • 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/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312—Generation 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
    • 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/435—Processing of additional data, e.g. decrypting of additional data, reconstructing software from modules extracted from the transport stream
    • 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/4788—Supplemental services, e.g. displaying phone caller identification, shopping application communicating with other users, e.g. chatting
    • 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/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Databases & Information Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种在前端实现智能视频直播的系统及方法，其用于在基于HTML5的浏览器中实现智能视频直播，涉及网络技术领域，包括：视频播放器创建模块，用于基于HTML5视频标签创建视频播放器；个性化菜单创建模块，用于在视频工具条中创建个性化菜单，个性化菜单用于控制视频流的播放、暂停、音量、显示尺寸、以及发送和显示用户输入的弹幕信息；网站服务器，用于向用户发送视频播放器创建模块和个性化菜单创建模块，并提供视频直播的视频流地址。本发明通过创建个性化的视频菜单功能，能够发送及显示用户输入的弹幕信息功能，实现了在基于HTML5的浏览器中进行智能视频直播，解决了移动设备浏览器上的视频播放器的菜单定制化问题。

Description

一种在前端实现智能视频直播的系统及方法
本发明涉及网络技术领域，具体是涉及一种在前端实现智能视频直播的系统及方法。
背景技术
目前互联网直播网站使用Adobe Flash Player实现桌面端浏览器的视频直播功能，视频直播功能除了向网站用户播放视频内容，还会有个性化的视频菜单功能供用户操作，例如码率切换、窗口全屏、发送弹幕、发送表情和发送礼物等。但是移动设备的浏览器不支持Adobe Flash Player，导致大多数直播网站只能使用HTML5 Video组件进行视频直播。HTML(Hyper Text Markup Language，超文本标记语言)5规范定义了Canvas(画布)标签、Video(视频)标签，并对应有Canvas API(Application Programming Interface，应用编程接口)和Video API。在前端技术领域，HTML5视频标签与Adobe Flash Player相比，原生被高级浏览器支持无需安装插件，更轻量，更节省电量，并与浏览器无缝对接，有利于程序开发，HTML5视频标签取代Adobe Flash Player已然成为一个业内趋势，支持HTML5视频标签的移动端浏览器类型包括具有WebKit内核的浏览器，其被移动端浏览器支持，也被部分桌面浏览器支持。但由于HTML5 Video组件默认的视频工具条不支持个性化定制，没有个性化的视频菜单功能，无法实现发送弹幕这样的功能，导致用户体验变差，视频直播功能在移动设备上的应用受到很大限制。
发明内容
针对现有技术中存在的缺陷，本发明的主要目的在于提供一种在前端实现智能视频直播的系统，本发明的另一目的在于提供一种在前端实现智能视频直播的方法，通过创建个性化的视频菜单功能，实现了发送及显示用户输入的弹幕信息功能，极大地提升了用户体验，从而实现了在基于HTML5的浏览器中，特别是在移动设备上，进行智能视频直播，保证了视频直播功能在各种终端浏览器下的兼容性，而且解决了移动设备浏览器上的视频播放器的菜单定制化问题。
本发明提供一种在前端实现智能视频直播的系统，其用于在基于HTML5的浏览器中实现智能视频直播，包括：
视频播放器创建模块，用于基于HTML5视频标签创建视频播放器，并获取视频流地址对应的视频流，根据该视频播放器在用户使用的浏览器页面中设定的显示尺寸播放视频流，所述视频播放器包括视频播放区域和视频工具条；
个性化菜单创建模块，用于在视频工具条中创建个性化菜单，所述个性化菜单用于控制所述视频流的播放、暂停、音量、显示尺寸、以及发送和显示用户输入的弹幕信息；
网站服务器，用于根据用户发出的视频直播请求，向用户发送视频播放器创建模块和个性化菜单创建模块，并提供视频直播的视频流地址。
在上述技术方案的基础上，所述个性化菜单创建模块包括基本菜单创建单元和窗口全屏创建单元；其中，
所述基本菜单创建单元用于基于HTML5视频标签在所述视频工具条中创建播放、暂停和音量控制菜单；
所述窗口全屏创建单元用于在所述视频工具条中创建窗口全屏菜单，所述窗口全屏菜单用于将所述显示尺寸重新设定为所述浏览器页面的尺寸。
在上述技术方案的基础上，所述个性化菜单创建模块还包括弹幕信息创建单元，所述弹幕信息创建单元包括弹幕发送器、弹幕管理器和弹幕绘制器；其中，
所述弹幕发送器用于在所述视频工具条中创建弹幕发送菜单，并发送用户在该弹幕发送菜单中输入的弹幕信息；
所述弹幕管理器用于接收所述弹幕发送器发送的弹幕信息，将所述弹幕信息转换为弹幕数据后发送给所述网站服务器；
所述弹幕绘制器设有用于渲染弹幕数据的预设弹幕模型，且弹幕绘制器用于保存从所述网站服务器接收的弹幕数据，并在视频播放区域内创建弹幕显示区域，以及在所述弹幕显示区域显示渲染后的弹幕数据。
在上述技术方案的基础上，所述网站服务器包括弹幕服务器，所述弹幕服务器用于将接收到的所有用户的弹幕数据保存在弹幕数据表中，并将弹幕数据表中的弹幕数据依据设定发送模型发回给所有用户的弹幕管理器，弹幕管理器将接收到的弹幕数据发送给弹幕绘制器，弹幕绘制器显示所有用户的弹幕数据；
所述设定发送模型包括对所述弹幕数据表中的弹幕数据进行筛选，并将筛选后的所述弹幕数据分成若干批次或若干小组。
本发明还提供一种在前端实现智能视频直播的方法，其用于在基于HTML5的浏览器中实现智能视频直播，包括以下步骤：
S1.网站服务器根据用户发出的视频直播请求，向用户发送包含视频播放器创建模块和个性化菜单创建模块的组件，并提供视频直播的地址；
S2.用户的浏览器获取所述视频直播的视频流的名称和地址，并调用视频播放器创建模块和个性化菜单创建模块；
S3.视频播放器创建模块基于HTML5视频标签创建视频播放器，获取视频流地址对应的视频流，并根据该视频播放器在所述浏览器页面中播放所述视频流，所述视频播放器包括视频播放区域和视频工具条；
S4.个性化菜单创建模块在所述视频工具条中创建用于控制所述视频流的播放、暂停、音量、显示尺寸、以及发送和显示弹幕信息的个性化菜单。
在上述技术方案的基础上，步骤S4具体包括：
使用HTML5视频标签在所述视频工具条中创建播放、暂停和音量控制菜单；
在所述视频工具条中创建窗口全屏菜单，窗口全屏菜单将显示尺寸的宽度和高端重新设定为所述浏览器页面的宽度和高度，并使视频播放器在浏览器页面的尺寸范围内播放。
在上述技术方案的基础上，所述个性化菜单创建模块还包括弹幕信息创建单元，所述弹幕信息创建单元包括弹幕发送器、弹幕管理器和弹幕绘制器，且所述弹幕绘制器设有用于渲染弹幕数据的预设弹幕模型；
步骤S4还包括：
在视频工具条中创建用于发送弹幕的弹幕发送菜单；
弹幕管理器接收弹幕发送器发送的弹幕信息，将弹幕信息转换为弹幕数据后发送给网站服务器；
弹幕绘制器保存从网站服务器接收到的弹幕数据，并在视频播放区域内创建弹幕显示区域，弹幕数据经过预设弹幕模型渲染后在弹幕显示区域显示。
在上述技术方案的基础上，所述网站服务器包括弹幕服务器，所述弹幕服务器将接收到的所有用户的弹幕数据保存在弹幕数据表中，并将弹幕数据表中所有用户的弹幕数据依据设定发送模型发回给每一个用户的弹幕管理器，弹幕管理器将接收到的弹幕数据发送给弹幕绘制器，弹幕绘制器显示所有用户的弹幕数据；
所述设定发送模型包括对所述弹幕数据表中的弹幕数据进行筛选，并将筛选后的所述弹幕数据分成若干批次或若干小组。
在上述技术方案的基础上，所述预设弹幕模型包括弹幕队列，所述预设弹幕模型包括设置弹幕数据在弹幕显示区域中的坐标、相邻弹幕数据之间的间距L和停留时间，L>0，所述坐标包括x和y，x≥0，y≥0，所述坐标原点设于所述弹幕显示区域的右下角，所述停留时间通过调用延时递归函数确定。
在上述技术方案的基础上，在视频播放区域显示弹幕数据包括以下步骤：
步骤A：使用HTML5画布标签在视频播放区域内创建弹幕显示区域；
步骤B：分批次从所述弹幕队列中读取弹幕数据，对每次读取的所述弹幕数据设置不同的坐标y，坐标x均为0，并将读取的弹幕数据按照设置的坐标绘制在弹幕显示区域；
步骤C：在一个所述停留时间后，删除位于弹幕显示区域左边的弹幕数据，将弹幕显示区域内其它的弹幕数据的坐标x更改为x+L，并将所述其它的弹幕数据按照更新后的坐标重新绘制在弹幕显示区域；
步骤D：将位于弹幕显示区域左边的弹幕数据从弹幕队列中除去；
步骤E：检测所述弹幕队列中是否有弹幕数据，若有，进入步骤A，重复步骤A至步骤D，若否，结束。
与现有技术相比，本发明的优点如下：
(1)本发明中的视频播放器创建模块和个性化菜单创建模块可以基于HTML5视频标签创建视频播放器和个性化菜单，通过创建个性化的视频菜单功能，实现了发送及显示用户输入的弹幕信息功能，极大地提升了用户体验，从而实现了在基于HTML5的浏览器中，特别是在移动设备上，进行智能视频直播，保证了视频直播功能在各种终端浏览器下的兼容性，而且解决了移动设备浏览器上的视频播放器的菜单定制化问题。
(2)本发明中的个性化菜单创建模块包括窗口全屏创建单元，通过将显示尺寸的宽度和高端重新设定为浏览器页面的宽度和高度，使视频播放器在浏览器页面的尺寸范围内播放，对HTML5视频标签的原始窗口全屏功能作出改进，提升了用户体验。
(3)本发明对HTML5画布标签的扩展和定制不但完全匹配Adobe Flash Player的功能效果，而且可以根据不同浏览器类型动态选择最优的方案以实现智能视频直播。
附图说明
图1是本发明实施例在前端实现智能视频直播的系统示意图；
图2是本发明实施例弹幕信息创建单元和服务器的示意图；
图3是本发明实施例在前端实现智能视频直播的方法流程图；
图4是步骤S3中在视频播放区域显示弹幕数据具体流程图。
附图标记：
视频播放器创建模块1；
个性化菜单创建模块2，基本菜单创建单元21，窗口全屏创建单元22，弹幕信息创建单元23，弹幕发送器231，弹幕管理器232，弹幕绘制器233；
网站服务器3，弹幕服务器31。
具体实施方式
下面结合附图及具体实施例对本发明作进一步的详细描述。
参见图1所示，本发明实施例提供一种在前端实现智能视频直播的系统，其用于在基于HTML5的浏览器中实现智能视频直播，包括：
视频播放器创建模块1，用于基于HTML5视频标签创建视频播放器，并获取视频流地址对应的视频流，根据该视频播放器在用户使用的浏览器页面中设定的显示尺寸播放视频流，视频播放器包括视频播放区域和视频工具条。
个性化菜单创建模块2，用于在视频工具条中创建个性化菜单，个性化菜单用于控制视频流的播放、暂停、音量、显示尺寸、以及发送和显示用户输入的弹幕信息。
网站服务器3，用于根据用户发出的视频直播请求，向用户发送视频播放器创建模块1和个性化菜单创建模块2，并提供视频直播的视频流地址。
视频直播功能的核心模块包括视频播放器和视频工具条，视频播放器负责将视频流转换成图片流供用户观看，视频工具条负责控制视频播放器，包括开始或暂停、声音控制、窗口全屏和发送弹幕等。其中，发送弹幕是视频模式下的特有功能，用户可以发送弹幕并在视频播放区域中展示。
用户使用的浏览器支持HTML5，具有HTML5视频标签和画布标签组件，浏览器从网站服务器3接收视频播放器创建模块1和个性化菜单创建模块2，获取视频流地址，并依次执行视频播放器创建模块1和个性化菜单创建模块2。
视频播放器创建模块1基于HTML5视频标签创建视频播放器，实现视频播放功能。具体的，视频播放器创建模块1直接调用HTML5视频标签创建视频播放器，并根据用户浏览器获取的视频流地址获取视频流地址对应的视频流，以及设置视频流的名称和在用户使用的浏览器页面中设定的显示尺寸。视频流名称是该视频流在浏览器页面上的唯一标识，便于后续个性化菜单创建模块2对创建的视频播放器的控制。该视频播放器可以在用户使用的浏览器页面中设定的显示尺寸播放视频流，视频播放器包括视频播放区域和视频工具条。
本发明中的视频播放器创建模块和个性化菜单创建模块可以基于HTML5视频标签创建视频播放器和个性化菜单，通过创建个性化的视频菜单功能，实现了发送及显示用户输入的弹幕信息功能，极大地提升了用户体验，从而实现了在基于HTML5的浏览器中，特别是在移动设备上，进行智能视频直播，保证了视频直播功能在各种终端浏览器下的兼容性，而且解决了移动设备浏览器上的视频播放器的菜单定制化问题。
个性化菜单创建模块2包括基本菜单创建单元21，窗口全屏创建单元22和弹幕信息创建单元23。
个性化菜单创建模块2可以使用JavaScript脚本语言实现。
其中，
基本菜单创建单元21用于基于HTML5视频标签在视频工具条中创建播放、暂停和音量控制菜单。
具体的，基本菜单创建单元21直接调用HTML5视频标签在视频工具条中创建播放、暂停和音量控制菜单，调用的HTML5视频标签中的功能函数如下：
volume:设置或返回视频流的音量。
paused:设置或返回视频流是否暂停。
play():开始播放视频流。
pause():暂停当前视频播放器。
通过这些HTML5视频标签核心属性和方法，直接使用HTML5视频标签原生API可以轻松实现视频工具条中的开始、暂停和音量控制。
窗口全屏创建单元22用于在视频工具条中创建窗口全屏菜单，窗口全屏菜单用于将显示尺寸重新设定为浏览器页面的尺寸。
具体的，窗口全屏创建单元22在视频工具条中创建窗口全屏菜单，其中，视频播放器的显示尺寸和浏览器页面的尺寸均包括宽度和高度，将显示尺寸的宽度重新设定为浏览器页面的宽度，显示尺寸的高度重新设定为浏览器页面的高度，使视频播放器在浏览器的页面尺寸范围内播放。
在HTML5视频标签中并没有JavaScript API去实现类似于Adobe Flash Player的窗口全屏功能，必须将HTML5视频标签的Controls属性设置为true，并使用原生的组件功能去窗口全屏。这是基于安全的考虑，但是默认的控件非常丑陋而且无法实现个性化定制，因此本发明使用伪全屏模式实现个性化的窗口全屏功能，伪全屏模式实际上是通过视频容器函数实现将整个视频播放器铺满整个浏览器页面。
本发明中的个性化菜单创建模块包括窗口全屏创建单元，通过将显示尺寸的宽度和高端重新设定为浏览器页面的宽度和高度，使视频播放器在浏览器页面的尺寸范围内播放，对HTML5视频标签的原始窗口全屏功能作出改进，提升了用户体验。
参见图2所示，发送弹幕不是HTML5视频标签原生的方法，本发明通过自定义开发实现了发送及显示用户弹幕信息，具体如下：
弹幕信息创建单元23包括弹幕发送器231、弹幕管理器232和弹幕绘制器233。其中，
弹幕发送器231用于在视频工具条中创建弹幕发送菜单，并发送用户在该弹幕发送菜单中输入的弹幕信息。
弹幕管理器232用于接收弹幕发送器231发送的弹幕信息，将弹幕信息转换为弹幕数据后发送给网站服务器3。
网站服务器3包括弹幕服务器31，弹幕服务器31用于将接收到的所有用户的弹幕数据保存在弹幕数据表中，并将弹幕数据表中的弹幕数据依据设定发送模型发回给所有用户的弹幕管理器232，弹幕管理器232将接收到的弹幕数据发送给弹幕绘制器233，弹幕绘制器233显示所有用户的弹幕数据。
使用弹幕服务器31的原因是因为要将用户的弹幕数据进行网站同步，让每一个用户都能看到当前用户发送的弹幕信息。
弹幕绘制器233设有用于渲染弹幕数据的预设弹幕模型，且弹幕绘制器233用于保存从网站服务器3接收的弹幕数据，并在视频播放区域内创建弹幕显示区域，以及在弹幕显示区域显示渲染后的弹幕数据。
弹幕显示区域是透明的，不会遮挡视频的内容。
用户通过视频工具条中的弹幕发送菜单，提交弹幕信息到弹幕管理器232，弹幕管理器232将弹幕信息转换为弹幕数据，本实施例以弹幕数据为字符串形式为例，弹幕数据通过WebSocket提交给弹幕服务器31，弹幕服务器31将接收到的所有用户的弹幕数据保存在弹幕数据表中，并将弹幕数据表中的弹幕数据依据设定发送模型发回给所有用户的弹幕管理器232。
设定发送模型包括对弹幕数据表中的弹幕数据进行筛选，并将筛选后的弹幕数据分成若干批次或若干小组。筛选过程包括剔除违法或恶意攻击性弹幕信息。
参见图3所示，本发明还提供一种在前端实现智能视频直播的方法，该方法用于在基于HTML5的浏览器中实现智能视频直播，包括以下步骤：
S1.网站服务器3根据用户发出的视频直播请求，向用户发送包含视频播放器创建模块1和个性化菜单创建模块2的组件，并提供视频直播的地址。
S2.用户的浏览器获取视频直播的视频流的名称和地址，并调用视频播放器创建模块1和个性化菜单创建模块2。
S3.视频播放器创建模块1基于HTML5视频标签创建视频播放器，获取视频流地址对应的视频流，并根据该视频播放器在浏览器页面中播放视频流，视频播放器包括视频播放区域和视频工具条。
S4.个性化菜单创建模块2在视频工具条中创建用于控制视频流的播放、暂停、音量、显示尺寸、以及发送和显示弹幕信息的个性化菜单。
步骤S4具体包括：
使用HTML5视频标签在视频工具条中创建播放、暂停和音量控制菜单。
在视频工具条中创建窗口全屏菜单，窗口全屏菜单将显示尺寸的宽度和高端重新设定为浏览器页面的宽度和高度，并使视频播放器在浏览器页面的尺寸范围内播放。
在视频工具条中创建用于发送弹幕的弹幕发送菜单。
弹幕管理器232接收弹幕发送器231发送的弹幕信息，将弹幕信息转换为弹幕数据后发送给网站服务器3。
弹幕服务器31将接收到的所有用户的弹幕数据保存在弹幕数据表中，并将弹幕数据表中所有用户的弹幕数据依据设定发送模型发回给每一个用户的弹幕管理器232，弹幕管理器232将接收到的弹幕数据发送给弹幕绘制器233，弹幕绘制器233显示所有用户的弹幕数据。
弹幕绘制器233保存从网站服务器3接收到的弹幕数据，并在视频播放区域内创建弹幕显示区域，弹幕数据经过预设弹幕模型渲染后在弹幕显示区域显示。
设定发送模型包括对弹幕数据表中的弹幕数据进行筛选，并将筛选后的弹幕数据分成若干批次或若干小组。
预设弹幕模型包括弹幕队列，预设弹幕模型包括设置弹幕数据在弹幕显示区域中的坐标、相邻弹幕数据之间的间距L和停留时间，L>0，坐标包括x和y，x≥0，y≥0，坐标原点设于弹幕显示区域的右下角，停留时间通过调用延时递归函数确定。
坐标x为沿视频播放器的显示尺寸的宽度方向，坐标y为沿视频播放器的显示尺寸的高度方向。
所有的弹幕数据会被保存在弹幕队列里面，通过延时递归函数，每间隔一段时间动态渲染弹幕队列里面的弹幕数据，然后更改弹幕数据的x坐标实现弹幕数据在弹幕显示区域从右往左被反复的渲染。
本发明采用自行开发的延时递归函数来实现弹幕数据的动画移动效果，而并没有直接使用HTML5的setInterval功能函数，避免了setInterval消耗浏览器性能，特别是多次申明会有未知的错误。
参见图4所示，在视频播放区域显示弹幕数据包括以下步骤：
步骤A：使用HTML5画布标签在视频播放区域内创建弹幕显示区域；
步骤B：分批次从弹幕队列中读取弹幕数据，对每次读取的弹幕数据设置不同的坐标y，坐标x均为0，并将读取的弹幕数据按照设置的坐标绘制在弹幕显示区域；
步骤C：在一个停留时间后，删除位于弹幕显示区域左边的弹幕数据，将弹幕显示区域内其它的弹幕数据的坐标x更改为x+L，并将其它的弹幕数据按照更新后的坐标重新绘制在弹幕显示区域；
步骤D：将位于弹幕显示区域左边的弹幕数据从弹幕队列中除去；
步骤E：检测弹幕队列中是否有弹幕数据，若有，进入步骤A，重复步骤A至步骤D，若否，结束。
弹幕绘制器233调用HTML5画布标签在视频播放区域内创建弹幕显示区域，将弹幕数据绘制在弹幕显示区域，为实现弹幕数据的动画移动效果，弹幕数据按照从右往左的顺序依次进行展示。
本发明对HTML5画布标签的扩展和定制不但完全匹配Adobe Flash Player的功能效果，而且在真实的运行场景中可以根据不同浏览器类型动态选择最优的方案，以此实现智能视频直播。在如今舍弃Adobe flash Player的大趋势中，推动了WEB 2.0的发展。
本领域的技术人员可以对本发明实施例进行各种修改和变型，倘若这些修改和变型在本发明权利要求及其等同技术的范围之内，则这些修改和变型也在本发明的保护范围之内。
说明书中未详细描述的内容为本领域技术人员公知的现有技术。

Claims (10)

1.一种在前端实现智能视频直播的系统，其特征在于，其用于在基于HTML5的浏览器中实现智能视频直播，包括：
视频播放器创建模块，用于基于HTML5视频标签创建视频播放器，并获取视频流地址对应的视频流，根据该视频播放器在用户使用的浏览器页面中设定的显示尺寸播放视频流，所述视频播放器包括视频播放区域和视频工具条；
个性化菜单创建模块，用于在视频工具条中创建个性化菜单，所述个性化菜单用于控制所述视频流的播放、暂停、音量、显示尺寸、以及发送和显示用户输入的弹幕信息；
网站服务器，用于根据用户发出的视频直播请求，向用户发送视频播放器创建模块和个性化菜单创建模块，并提供视频直播的视频流地址。
2.如权利要求1所述的一种在前端实现智能视频直播的系统，其特征在于：所述个性化菜单创建模块包括基本菜单创建单元和窗口全屏创建单元；其中，
所述基本菜单创建单元用于基于HTML5视频标签在所述视频工具条中创建播放、暂停和音量控制菜单；
所述窗口全屏创建单元用于在所述视频工具条中创建窗口全屏菜单，所述窗口全屏菜单用于将所述显示尺寸重新设定为所述浏览器页面的尺寸。
3.如权利要求1所述的一种在前端实现智能视频直播的系统，其特征在于：所述个性化菜单创建模块还包括弹幕信息创建单元，所述弹幕信息创建单元包括弹幕发送器、弹幕管理器和弹幕绘制器；其中，
所述弹幕发送器用于在所述视频工具条中创建弹幕发送菜单，并发送用户在该弹幕发送菜单中输入的弹幕信息；
所述弹幕管理器用于接收所述弹幕发送器发送的弹幕信息，将所述弹幕信息转换为弹幕数据后发送给所述网站服务器；
所述弹幕绘制器设有用于渲染弹幕数据的预设弹幕模型，且弹幕绘制器用于保存从所述网站服务器接收的弹幕数据，并在视频播放区域内创建弹幕显示区域，以及在所述弹幕显示区域显示渲染后的弹幕数据。
4.如权利要求3所述的一种在前端实现智能视频直播的系统，其特征在于：所述网站服务器包括弹幕服务器，所述弹幕服务器用于将接收到的所有用户的弹幕数据保存在弹幕数据表中，并将弹幕数据表中的弹幕数据依据设定发送模型发回给所有用户的弹幕管理器，弹幕管理器将接收到的弹幕数据发送给弹幕绘制器，弹幕绘制器显示所有用户的弹幕数据；
所述设定发送模型包括对所述弹幕数据表中的弹幕数据进行筛选，并将筛选后的所述弹幕数据分成若干批次或若干小组。
5.一种基于权利要求1所述系统的在前端实现智能视频直播的方法，其特征在于，所述方法用于在基于HTML5的浏览器中实现智能视频直播，包括以下步骤：
S1.网站服务器根据用户发出的视频直播请求，向用户发送包含视频播放器创建模块和个性化菜单创建模块的组件，并提供视频直播的地址；
S2.用户的浏览器获取所述视频直播的视频流的名称和地址，并调用视频播放器创建模块和个性化菜单创建模块；
S3.视频播放器创建模块基于HTML5视频标签创建视频播放器，获取视频流地址对应的视频流，并根据该视频播放器在所述浏览器页面中播放所述视频流，所述视频播放器包括视频播放区域和视频工具条；
S4.个性化菜单创建模块在所述视频工具条中创建用于控制所述视频流的播放、暂停、音量、显示尺寸、以及发送和显示弹幕信息的个性化菜单。
6.如权利要求5所述的一种在前端实现智能视频直播的方法，其特征在于，步骤S4具体包括：
使用HTML5视频标签在所述视频工具条中创建播放、暂停和音量控制菜单；
在所述视频工具条中创建窗口全屏菜单，窗口全屏菜单将显示尺寸的宽度和高端重新设定为所述浏览器页面的宽度和高度，并使视频播放器在浏览器页面的尺寸范围内播放。
7.如权利要求5所述的一种在前端实现智能视频直播的方法，其特征在于：所述个性化菜单创建模块还包括弹幕信息创建单元，所述弹幕信息创建单元包括弹幕发送器、弹幕管理器和弹幕绘制器，且所述弹幕绘制器设有用于渲染弹幕数据的预设弹幕模型；
步骤S4还包括：
在视频工具条中创建用于发送弹幕的弹幕发送菜单；
弹幕管理器接收弹幕发送器发送的弹幕信息，将弹幕信息转换为弹幕数据后发送给网站服务器；
弹幕绘制器保存从网站服务器接收到的弹幕数据，并在视频播放区域内创建弹幕显示区域，弹幕数据经过预设弹幕模型渲染后在弹幕显示区域显示。
8.如权利要求7所述的一种在前端实现智能视频直播的方法，其特征在于：所述网站服务器包括弹幕服务器，所述弹幕服务器将接收到的所有用户的弹幕数据保存在弹幕数据表中，并将弹幕数据表中所有用户的弹幕数据依据设定发送模型发回给每一个用户的弹幕管理器，弹幕管理器将接收到的弹幕数据发送给弹幕绘制器，弹幕绘制器显示所有用户的弹幕数据；
所述设定发送模型包括对所述弹幕数据表中的弹幕数据进行筛选，并将筛选后的所述弹幕数据分成若干批次或若干小组。
9.如权利要求7所述的一种在前端实现智能视频直播的方法，其特征在于：所述预设弹幕模型包括弹幕队列，所述预设弹幕模型包括设置弹幕数据在弹幕显示区域中的坐标、相邻弹幕数据之间的间距L和停留时间，L>0，所述坐标包括x和y，x≥0，y≥0，所述坐标原点设于所述弹幕显示区域的右下角，所述停留时间通过调用延时递归函数确定。
10.如权利要求9所述的一种在前端实现智能视频直播的方法，其特征在于，在视频播放区域显示弹幕数据包括以下步骤：
步骤A：使用HTML5画布标签在视频播放区域内创建弹幕显示区域；
步骤B：分批次从所述弹幕队列中读取弹幕数据，对每次读取的所述弹幕数据设置不同的坐标y，坐标x均为0，并将读取的弹幕数据按照设置的坐标绘制在弹幕显示区域；
步骤C：在一个所述停留时间后，删除位于弹幕显示区域左边的弹幕数据，将弹幕显示区域内其它的弹幕数据的坐标x更改为x+L，并将所述其它的弹幕数据按照更新后的坐标重新绘制在弹幕显示区域；
步骤D：将位于弹幕显示区域左边的弹幕数据从弹幕队列中除去；
步骤E：检测所述弹幕队列中是否有弹幕数据，若有，进入步骤A，重复步骤A至步骤D，若否，结束。
CN201610482399.0A 2016-06-27 2016-06-27 一种在前端实现智能视频直播的系统及方法 Pending CN106060674A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610482399.0A CN106060674A (zh) 2016-06-27 2016-06-27 一种在前端实现智能视频直播的系统及方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610482399.0A CN106060674A (zh) 2016-06-27 2016-06-27 一种在前端实现智能视频直播的系统及方法

Publications (1)

Publication Number Publication Date
CN106060674A true CN106060674A (zh) 2016-10-26

Family

ID=57165858

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610482399.0A Pending CN106060674A (zh) 2016-06-27 2016-06-27 一种在前端实现智能视频直播的系统及方法

Country Status (1)

Country Link
CN (1) CN106060674A (zh)

Cited By (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106488314A (zh) * 2016-11-30 2017-03-08 上海幻电信息科技有限公司 一种弹幕渲染方法
CN106506525A (zh) * 2016-11-29 2017-03-15 北京旷视科技有限公司 用于在浏览器上播放视频流的方法及装置
CN106534875A (zh) * 2016-11-09 2017-03-22 广州华多网络科技有限公司 弹幕显示控制方法、装置及终端
CN106792225A (zh) * 2016-11-09 2017-05-31 武汉斗鱼网络科技有限公司 前端弹幕控制方法及装置
CN106973329A (zh) * 2017-03-23 2017-07-21 上海幻电信息科技有限公司 一种基于html5的弹幕播放器及其方法
CN107277004A (zh) * 2017-06-13 2017-10-20 重庆扬讯软件技术股份有限公司 一种浏览器无插件视频直播方法
CN108235094A (zh) * 2018-01-09 2018-06-29 武汉斗鱼网络科技有限公司 歌词显示方法、装置、可读存储介质及设备
CN108718416A (zh) * 2018-06-15 2018-10-30 深圳市安佳威视信息技术有限公司 Html5直播嵌入式摄像机音视频系统及其方法
CN108737879A (zh) * 2018-04-04 2018-11-02 北京潘达互娱科技有限公司 一种礼物栏显示方法、装置、电子设备及存储介质
CN109005468A (zh) * 2018-06-29 2018-12-14 武汉斗鱼网络科技有限公司 弹幕消息分发方法、装置、设备及存储介质
CN109218839A (zh) * 2017-07-07 2019-01-15 杭州海康威视数字技术股份有限公司 视频播放方法及装置
CN109309861A (zh) * 2018-10-30 2019-02-05 广州虎牙科技有限公司 一种媒体处理方法、装置、终端设备和存储介质
CN109951741A (zh) * 2017-12-21 2019-06-28 阿里巴巴集团控股有限公司 数据对象信息展示方法、装置及电子设备
CN110536156A (zh) * 2019-08-16 2019-12-03 咪咕文化科技有限公司 信息处理方法、系统、通信设备及计算机可读存储介质
CN111064973A (zh) * 2019-11-28 2020-04-24 湖北工业大学 一种基于ipv9的直播系统
CN111198668A (zh) * 2019-12-26 2020-05-26 成都中科合迅科技有限公司 一种基于浏览器的多屏系统和多屏交互方法
CN111385663A (zh) * 2018-12-28 2020-07-07 广州市百果园信息技术有限公司 一种直播互动方法、装置、设备和存储介质
CN111586486A (zh) * 2020-03-31 2020-08-25 深圳市麦谷科技有限公司 一种基于ijk实现可移植播放控制的方法及系统
CN113613064A (zh) * 2021-07-19 2021-11-05 深圳Tcl新技术有限公司 视频处理方法、装置、存储介质及终端

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103024528A (zh) * 2013-01-07 2013-04-03 杭州浦禾通信技术有限公司 在移动终端上实现流媒体数据发送的方法及移动终端
WO2015103636A2 (en) * 2014-01-06 2015-07-09 Vinja, Llc Injection of instructions in complex audiovisual experiences
CN105100869A (zh) * 2015-07-13 2015-11-25 腾讯科技（深圳）有限公司 弹幕显示方法及装置
CN105373554A (zh) * 2014-08-25 2016-03-02 北京爱声声科技有限公司 基于移动设备网页的弹幕方法及系统
CN105659620A (zh) * 2013-08-30 2016-06-08 斯科林娱乐技术公司 视频显示系统

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103024528A (zh) * 2013-01-07 2013-04-03 杭州浦禾通信技术有限公司 在移动终端上实现流媒体数据发送的方法及移动终端
CN105659620A (zh) * 2013-08-30 2016-06-08 斯科林娱乐技术公司 视频显示系统
WO2015103636A2 (en) * 2014-01-06 2015-07-09 Vinja, Llc Injection of instructions in complex audiovisual experiences
CN105373554A (zh) * 2014-08-25 2016-03-02 北京爱声声科技有限公司 基于移动设备网页的弹幕方法及系统
CN105100869A (zh) * 2015-07-13 2015-11-25 腾讯科技（深圳）有限公司 弹幕显示方法及装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
张淑红: "基于HTML5的网络播放器设计", 《电脑编程技巧与维护》 *

Cited By (26)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106534875A (zh) * 2016-11-09 2017-03-22 广州华多网络科技有限公司 弹幕显示控制方法、装置及终端
CN106792225A (zh) * 2016-11-09 2017-05-31 武汉斗鱼网络科技有限公司 前端弹幕控制方法及装置
WO2018086282A1 (zh) * 2016-11-09 2018-05-17 武汉斗鱼网络科技有限公司 前端弹幕控制方法及装置
CN106506525A (zh) * 2016-11-29 2017-03-15 北京旷视科技有限公司 用于在浏览器上播放视频流的方法及装置
CN106506525B (zh) * 2016-11-29 2019-10-25 北京旷视科技有限公司 用于在浏览器上播放视频流的方法及装置
CN106488314A (zh) * 2016-11-30 2017-03-08 上海幻电信息科技有限公司 一种弹幕渲染方法
CN106488314B (zh) * 2016-11-30 2019-11-22 上海幻电信息科技有限公司 一种弹幕渲染方法
CN106973329A (zh) * 2017-03-23 2017-07-21 上海幻电信息科技有限公司 一种基于html5的弹幕播放器及其方法
CN107277004A (zh) * 2017-06-13 2017-10-20 重庆扬讯软件技术股份有限公司 一种浏览器无插件视频直播方法
CN109218839A (zh) * 2017-07-07 2019-01-15 杭州海康威视数字技术股份有限公司 视频播放方法及装置
CN109218839B (zh) * 2017-07-07 2021-09-03 杭州海康威视数字技术股份有限公司 视频播放方法及装置
CN109951741A (zh) * 2017-12-21 2019-06-28 阿里巴巴集团控股有限公司 数据对象信息展示方法、装置及电子设备
CN108235094A (zh) * 2018-01-09 2018-06-29 武汉斗鱼网络科技有限公司 歌词显示方法、装置、可读存储介质及设备
CN108235094B (zh) * 2018-01-09 2021-07-23 武汉斗鱼网络科技有限公司 歌词显示方法、装置、可读存储介质及设备
CN108737879A (zh) * 2018-04-04 2018-11-02 北京潘达互娱科技有限公司 一种礼物栏显示方法、装置、电子设备及存储介质
CN108718416A (zh) * 2018-06-15 2018-10-30 深圳市安佳威视信息技术有限公司 Html5直播嵌入式摄像机音视频系统及其方法
CN109005468A (zh) * 2018-06-29 2018-12-14 武汉斗鱼网络科技有限公司 弹幕消息分发方法、装置、设备及存储介质
CN109309861A (zh) * 2018-10-30 2019-02-05 广州虎牙科技有限公司 一种媒体处理方法、装置、终端设备和存储介质
CN111385663A (zh) * 2018-12-28 2020-07-07 广州市百果园信息技术有限公司 一种直播互动方法、装置、设备和存储介质
CN110536156A (zh) * 2019-08-16 2019-12-03 咪咕文化科技有限公司 信息处理方法、系统、通信设备及计算机可读存储介质
CN110536156B (zh) * 2019-08-16 2022-10-18 咪咕文化科技有限公司 信息处理方法、系统、通信设备及计算机可读存储介质
CN111064973A (zh) * 2019-11-28 2020-04-24 湖北工业大学 一种基于ipv9的直播系统
CN111198668A (zh) * 2019-12-26 2020-05-26 成都中科合迅科技有限公司 一种基于浏览器的多屏系统和多屏交互方法
CN111198668B (zh) * 2019-12-26 2023-06-16 成都中科合迅科技有限公司 一种基于浏览器的多屏系统和多屏交互方法
CN111586486A (zh) * 2020-03-31 2020-08-25 深圳市麦谷科技有限公司 一种基于ijk实现可移植播放控制的方法及系统
CN113613064A (zh) * 2021-07-19 2021-11-05 深圳Tcl新技术有限公司 视频处理方法、装置、存储介质及终端

Similar Documents

Publication Publication Date Title
CN106060674A (zh) 一种在前端实现智能视频直播的系统及方法
CN103348669B (zh) 在图像显示装置中提供应用菜单的方法及使用该方法的图像显示装置
CN103297327B (zh) 消息推送方法、装置及显示终端
US9836437B2 (en) Screencasting for multi-screen applications
WO2017113730A1 (zh) 复合用户界面控件的生成和控制方法及系统
CN109525850A (zh) 一种直播方法、装置及系统
CN103297855B (zh) 一种应用展示方法以及一种终端
CN101951405A (zh) 一种基于webkit的机顶盒中间件的实现方法
CN103561220A (zh) 一种电视终端及其多屏显示和控制的方法
CN106445486A (zh) 一种构造和生成网页的方法及系统
CN102316384B (zh) 页面多图切换实现方法及网络电视嵌入式浏览器
CN101630329A (zh) 一种网页中视频元素与网页元素互动的方法及系统
CN105573694B (zh) 数字内容的多个显示渲染
CN103150658A (zh) 一种面向终端用户的现实增强定制系统及方法
CN102323882A (zh) 一种应用于Web3D的数据处理装置和方法
CN103514219A (zh) 一种在多个终端间分享Web内容的方法及系统
CN102033943A (zh) 基于移动通讯设备终端的多窗口浏览方法及其系统
CN111741367B (zh) 视频互动方法、装置、电子设备及计算机可读存储介质
CN103209203A (zh) 一种跨平台提供应用的方法以及客户端
CN104899212B (zh) 网页展示方法、服务器及系统
CN102075800A (zh) 基于交互式个人电视机顶盒文件播放控制方法及系统
CN106973329A (zh) 一种基于html5的弹幕播放器及其方法
CN107404663A (zh) 一种电视节目播放方法以及相关的终端设备
CN105874807A (zh) 用于在电视设备上对Web内容远程渲染的方法、系统和介质
CN107566913A (zh) 一种交互式网络电视的界面显示方法、装置及机顶盒

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20161026