一种基于HTML5的弹幕播放器及其方法技术

本发明专利技术公开了一种基于HTML5的弹幕播放器的弹幕方法，其包含以下步骤：S1、网站服务器根据用户发出的视频播放请求，在浏览器中创建视频播放器、弹幕容器以及弹幕输入区域，并提供对应的视频流以及弹幕文件；S2、用户播放视频，网站服务器判断播放器的播放状态以及弹幕开关状态，根据用户选择按所需视频播放模式进行视频播放和弹幕。其优点是：使用户在观看视频的同时能够方便地看到其他用户对于该视频当前时间点的评论，提高视频的观看趣味和体验，并可以让用户对弹幕的内容、表现方式进行控制，达到人性化体验。

A barrage player based on HTML5 and its method

The invention discloses a method for HTML5 barrage barrage player based, which comprises the following steps: S1, the web server according to the user request to create video playback, video player, a barrage of containers and input area barrage in the browser, and provides the corresponding video stream and the barrage of documents; S2, user video, web server determine the player state and the barrage of switch state, according to the user's selection for video playback and video playback mode according to the required barrage. The advantage is that users can easily see other user comments for this video at the present time while watching the video, improve video viewing pleasure and experience, and can allow the user to control the content of the barrage and the way of expression, to the human experience.

【技术实现步骤摘要】
一种基于HTML5的弹幕播放器及其方法
本专利技术涉及互联网
，具体涉及一种基于HTML5的弹幕播放器及其方法。
技术介绍
弹幕是指一种在观看视频时，大量以字幕（有且不限于文字和图片）形式呈现的评论与视频同在一个画面的现象。在视频上方大量飘过的评论如密集炮弹一般，故得名弹幕。弹幕会随着视频的播放实时在视频上呈现，这样观看者在观看该视频时能够看到其他观看者和自己发送的弹幕。HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML5本身是由W3C推荐的。<video>是HTML5中的新标签，其作用是在浏览器页面中嵌入视频元素，定义视频，比如电影片段或其他视频流，该标签对外提供一系列的接口方法供外部控制视频Web服务器一般指网站服务器，也称为WWW(WORLDWIDEWEB)服务器，主要功能是提供网上信息浏览服务。可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。
技术实现思路
本专利技术的目的在于提供一种基于HTML5的弹幕播放器及其方法，使用户在观看视频的同时能够方便地看到其他用户对于该视频当前时间点的评论，提高视频的观看趣味和体验，并可以让用户对弹幕的内容、表现方式进行控制，达到人性化体验。为了达到上述目的，本专利技术通过以下技术方案实现：一种基于HTML5的弹幕播放器，其特征是，用于同步实现浏览器中的弹幕与视频播放，该基于HTML5的弹幕播放器包含：视频播放器创建模块，用于在浏览器页面中创建视频标签作为视频播放器，并向网站服务器获取视频ID对应的视频流以及弹幕文件；弹幕容器创建模块，用于在视频播放器上创建一个弹幕容器，供弹幕在视频播放器上展示；弹幕信息输入模块，用于在浏览器页面上创建一个弹幕输入区域，供用户输入弹幕信息，并将用户输入的弹幕信息更新到网站服务器的弹幕文件中；弹幕渲染管理模块，用于将当前用户输入的弹幕信息以及当前视频播放时刻对应的弹幕文件中的弹幕信息转化为弹幕后展示到弹幕容器中，或根据用户要求暂停弹幕展示；网站服务器，用于根据用户发出的视频播放请求，向用户发送视频播放器创建模块、弹幕容器创建模块以及弹幕信息输入模块的创建逻辑文件，并提供视频流地址以及弹幕信息；控制模块，用于创建一个控制区域，用户通过对控制区域的操作来实现所述视频流的播放、暂停、跳转、弹幕开关。上述的基于HTML5的弹幕播放器，其中：所述控制模块还可根据用户操作来控制弹幕显示方位、音量、播放窗口大小、发送弹幕设置、视频设置、弹幕列表。上述的基于HTML5的弹幕播放器，其中：所述的视频播放器为在浏览器页面中占据一个宽度和高度可自由设定的矩形大小的空间。上述的基于HTML5的弹幕播放器，其中：弹幕展现运动方式为在弹幕容器中以一定方向滚动展示或静止在弹幕容器的上/下方或一定时间后消失。上述的基于HTML5的弹幕播放器，其中：所述的弹幕容器为一个与视频播放器大小相同的透明区域。一种基于HTML5的弹幕播放器的弹幕方法，其特征是，包含以下步骤：S1、网站服务器根据用户发出的视频播放请求，在浏览器中创建视频播放器、弹幕容器、弹幕输入区域以及用户控制区域，并提供对应的视频流以及弹幕文件；S2、用户播放视频，网站服务器判断播放器的播放状态以及弹幕开关状态，根据用户选择按所需视频播放模式进行视频播放和弹幕。上述的基于HTML5的弹幕播放器的弹幕方法，其中，所述的步骤S2具体包含：S21、播放器开始播放；S22、网站服务器对每帧都进行一个判断，如果弹幕文件中有当前时间的弹幕，则取出，并展现在弹幕容器上，当用户发送弹幕时，直接展现在弹幕容器中；S23、播放器暂停播放时，停止每帧的判断，并停止当前弹幕容器中的弹幕运动；播放器关闭弹幕时，停止每帧的判断，清除弹幕容器中的弹幕；播放器重新开启弹幕时，重新开始S22中每帧的判断；播放器跳转时间开始播放时，清除弹幕容器中的弹幕，并重新开始S22中每帧的判断；播放器播放完毕时，停止每帧的判断，并停止当前弹幕容器中的弹幕运动本专利技术与现有技术相比具有以下优点：使用户在观看视频的同时能够方便地看到其他用户对于该视频当前时间点的评论，提高视频的观看趣味和体验，并可以让用户对弹幕的内容、表现方式进行控制，达到人性化体验。附图说明图1为本专利技术的系统框图；图2为本专利技术的方法流程图。具体实施方式以下结合附图，通过详细说明一个较佳的具体实施例，对本专利技术做进一步阐述。如图1、2所示，本专利技术公开了一种基于HTML5的弹幕播放器，用于同步实现浏览器中的弹幕与视频播放，该基于HTML5的弹幕播放器具体包含由网站服务器1（或Web服务器）、视频播放器创建模块2、弹幕容器创建模块3、弹幕信息输入模块4、弹幕渲染管理模块5以及控制模块6。所述的网站服务器1用于根据用户发出的视频播放请求，向用户发送视频播放器创建模块、弹幕容器创建模块以及弹幕信息输入模块的创建逻辑文件，并提供视频流地址以及弹幕信息。所述的视频播放器创建模块2用于在浏览器页面中创建视频标签作为视频播放器，并向网站服务器1获取视频ID对应的视频流以及弹幕文件，通常，用户新建稿件时，网站服务器1会分配一个唯一的编号标识此稿件aid，每个稿件可以上传多段视频，每段视频分配一个唯一的编号标识此视频cid，并用此cid生成一个空弹幕列表，在该段视频内发送的弹幕会存储到对应cid的弹幕列表；用户通过稿件aid和视频标识cid访问一个确定视频，网站服务器1返回对应的视频流地址和弹幕文件地址。本专利技术的一实施例中，所述的视频播放器为在浏览器页面中占据一个宽度和高度可自由设定的矩形大小的空间。所述的弹幕容器创建模块3用于在视频播放器上创建一个弹幕容器，供弹幕在视频播放器上展示；弹幕容器可以自定义展示位置，一般是展现层级比视频播放器层级高的一块等宽等高矩形区域，可以是一个普通的div标签元素，也可以是一块canvas画布，弹幕的绘制方式实现了多种不同的方式。本实施例中，所述的弹幕容器为一个与视频播放器大小相同的透明区域。所述的弹幕信息输入模块4用于在浏览器页面上创建一个弹幕输入区域，供用户输入弹幕信息，并将用户输入的弹幕信息更新到网站服务器1的弹幕文件中；从弹幕发送到更新至弹幕文件的过程中有两层可配置的过滤逻辑：第一层是判断用户是否有发送权限，输入的弹幕字数是否超过限制、是否被弹幕的屏蔽规则命中，然后发送到网站服务器1，网站服务器1再进行上述验证，才会添加到弹幕文件。所述的弹幕渲染管理模块5用于将当前用户输入的弹幕信息以及当前视频播放时刻对应的弹幕文件中的弹幕信息转化为弹幕后展示到弹幕容器中，或根据用户要求暂停弹幕展示，弹幕的渲染支持多种方式实现，CSS，CSS3，Canvas，在不同浏览器下的支持程度和效率不一，可以通过浏览器种类选用效率最高的一种，弹幕的展现方式支持多种方式实现，有顶部弹幕、底部弹幕、滚动弹幕、逆向弹幕，其中滚动弹幕使用了碰撞检测方式，可保证优雅的展现方式。本实施例中，弹幕展现运动方式为在弹幕容器中以一定方向滚动展示或静止在弹幕容器的上/下方或一定时间后消失。所述的控制模块用于创建一个控制本文档来自技高网...

【技术保护点】
一种基于HTML5的弹幕播放器，其特征在于，用于同步实现浏览器中的弹幕与视频播放，该基于HTML5的弹幕播放器包含：视频播放器创建模块（2），用于在浏览器页面中创建视频标签作为视频播放器，并向网站服务器（1）获取视频ID对应的视频流以及弹幕文件；弹幕容器创建模块（3），用于在视频播放器上创建一个弹幕容器，供弹幕在视频播放器上展示；弹幕信息输入模块（4），用于在浏览器页面上创建一个弹幕输入区域，供用户输入弹幕信息，并将用户输入的弹幕信息更新到网站服务器（1）的弹幕文件中；弹幕渲染管理模块（5），用于将当前用户输入的弹幕信息以及当前视频播放时刻对应的弹幕文件中的弹幕信息转化为弹幕后展示到弹幕容器中，或根据用户要求暂停弹幕展示；网站服务器（1），用于根据用户发出的视频播放请求，向用户发送视频播放器创建模块（2）、弹幕容器创建模块（3）以及弹幕信息输入模块（4）的创建逻辑文件，并提供视频流地址以及弹幕信息；控制模块（6），用于创建一个控制区域，用户通过对控制区域的操作来实现所述视频流的播放、暂停、跳转、弹幕开关。

【技术特征摘要】
1.一种基于HTML5的弹幕播放器，其特征在于，用于同步实现浏览器中的弹幕与视频播放，该基于HTML5的弹幕播放器包含：视频播放器创建模块（2），用于在浏览器页面中创建视频标签作为视频播放器，并向网站服务器（1）获取视频ID对应的视频流以及弹幕文件；弹幕容器创建模块（3），用于在视频播放器上创建一个弹幕容器，供弹幕在视频播放器上展示；弹幕信息输入模块（4），用于在浏览器页面上创建一个弹幕输入区域，供用户输入弹幕信息，并将用户输入的弹幕信息更新到网站服务器（1）的弹幕文件中；弹幕渲染管理模块（5），用于将当前用户输入的弹幕信息以及当前视频播放时刻对应的弹幕文件中的弹幕信息转化为弹幕后展示到弹幕容器中，或根据用户要求暂停弹幕展示；网站服务器（1），用于根据用户发出的视频播放请求，向用户发送视频播放器创建模块（2）、弹幕容器创建模块（3）以及弹幕信息输入模块（4）的创建逻辑文件，并提供视频流地址以及弹幕信息；控制模块（6），用于创建一个控制区域，用户通过对控制区域的操作来实现所述视频流的播放、暂停、跳转、弹幕开关。2.如权利要求1所述的基于HTML5的弹幕播放器，其特征在于：所述控制模块（6）还可根据用户操作来控制弹幕显示方位、音量、播放窗口大小、发送弹幕设置、视频设置、弹幕列表。3.如权利要求1所述的基于HTML5的弹幕播放器，其特征在于：所述的视频播放器为在浏览器页面中占据一个宽度和高度可自由...

【专利技术属性】
技术研发人员：谭兆歆，蓝帆，
申请(专利权)人：上海幻电信息科技有限公司，
类型：发明
国别省市：上海,31