CN106658204A - 一种视频直播弹幕播放方法及系统 - Google Patents

Abstract

本发明公开了一种视频直播弹幕播放方法及系统，所述方法包括：预先设置浏览器的CSS属性transtion参数；获取用户发送弹幕内容，将所述弹幕内容发送给所述浏览器；所述浏览器根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。本发明实施例的方案，提供了微信用户视频直播弹幕播放服务，对于微信用户直接通过关注公众号就可以实现视频直播的自定义互动，并且提出了一种简单的利用浏览器功能实现弹幕播放的方案，相对于现有弹幕播放方式，更为简单有效，易于管理，丰富了微信用户的体验，从而极大的提高了用户体验度。

Description

一种视频直播弹幕播放方法及系统

技术领域

本发明涉及互联网技术领域，特别涉及一种视频直播弹幕播放方法及系统。

背景技术

随着互联网技术的发展，交互变的越来越重要。在线的交互，已经成为日益重要的沟通模式。为了满足广大用户信息交互的需要，各种交互软件或者沟通软件应运而生。

微信是腾讯公司推出的一个为智能终端提供即时通讯服务的免费应用程序，微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费(需消耗少量网络流量)语音短信、视频、图片和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件等服务插件。微信提供公众平台、朋友圈、消息推送等功能，用户可以通过“摇一摇”、“搜索号码”、“附近的人”、扫二维码方式添加好友和关注公众平台，同时微信将内容分享给好友以及将用户看到的精彩内容分享到微信朋友圈。

微信作为时下最热门的社交信息平台之一，也是移动端的一大入口，正在演变成为一大商业交易平台，其对营销行业带来的颠覆性变化开始显现。微信商城的开发也随之兴起，微信商城是基于微信而研发的一款社会化电子商务系统，消费者只要通过微信平台，就可以实现商品查询、选购、体验、互动、订购与支付的线上线下一体化服务模式。

微信公众账号是开发者或商家在微信公众平台上申请的应用账号，该帐号与QQ账号互通，通过公众账号，商家可在微信平台上实现和特定群体的文字、图片、语音、视频的全方位沟通、互动。形成了一种主流的线上线下微信互动营销方式。正如线上线下微信互动营销的代表微部落，率先提出标准的行业通用模板和深定制的微信平台开发理念相结合。形成了线上线下微信互动营销的开放应用平台。

用户可以通过自身设备与公众账号进行互动。通过手机向公众账号发送消息，一般需要如下步骤：

首先用你的手机微信关注微信公众账号。然后登陆自己的微信公众平台点击公众账号助手。在公众账号助手设置的第二步选择输入你要绑定的微信号码。然后点击发送微信验证码。你的手机微信会收到一条信息，然后将数字输入到验证码输入框完成验证就完成了绑定了。然后进入通讯录，搜索公众账号助手。然后找到公众账号助手这个联系人这个号码是腾讯官方的账号mphelper(腾讯公众平台的助手账号需要通过它进行消息群发)。关注该账号就可以通过向它发送群发消息了。点击进入聊天界面，然后向其发送消息，然后看你的公众账号的关注用户是否会接受到这条消息。

微信公众账号提供了一种微信与其它系统的后台服务相联系的方案，这一方案可以很好的为微信之外的其它开发者提供充分的开发空间。开发者可以通过微信公众账号将自身开发的服务应用接入微信系统，利用微信庞大的用户资源进行相应的操作。

弹幕播放器通常是指在线视频所用的FLASH播放器，这种播放器与普通的播放器不同，除了最基本的播放功能以外，用户还可以通过播放器进行“弹幕”，同时这些弹幕会被保存起来，在播放器加载的时候会载入以前的弹幕，这样每一个用户都可以看到其他用户的弹幕。相对与传统的播放器来说，弹幕播放器增强了交互性，增强了用户间的交流。

弹幕播放器在载入的时候，会从服务器获取已有的弹幕，并将这些弹幕格式化。在影片播放到有弹幕出现的时间点时，播放器就会将弹幕初始化并根据弹幕的形式覆盖到影片之上。

用户在发新弹幕的时候，弹幕播放器会立刻将该弹幕初始化并设置相应的时间点，同时即使覆盖到影片上，并在后台将此弹幕提交到服务器。

现有技术中，通过微信平台为用户提供各种应用的方案越来越多，在视频直播服务的方案中，用户可以通过微信进行相应的互动。例如，可以发送弹幕等进行实时的互动。但是，目前发送弹幕的方式通常需要系统侧的复杂功能支持，实现较为复杂。因而，亟需要一种新的简单可靠实现弹幕播放的方案，以提高用户体验度。

发明内容

本发明提供一种视频直播弹幕播放方法及系统，用以解决现有技术中弹幕播放实现复杂且不稳定的问题。

本发明提供一种视频直播弹幕播放方法，包括：

预先设置浏览器的CSS属性transtion参数；

获取用户输入弹幕内容，将所述弹幕内容发送给所述浏览器；

所述浏览器根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。

所述方法还包括：

所述transtion参数包括3个属性值：

变换属性，包括：透明、翻转和移动属性；

计时属性，包括所需的时间属性；

过度属性，包括：匀速、变速或其它速度变量属性；

预先设置每个弹幕内容的所述变换属性、计时属性和过度属性。

所述方法还包括：

所述用户输入的弹幕内容，根据不同用户发送的时间顺序进入队列，并携带队列信息发送给所述浏览器。

所述方法还包括：

将所述用户输入弹幕内容作为一个元素发送给所述浏览器；

所述浏览器获取所述元素，作为弹幕播放的一个属性内容进行渲染、播放。

所述方法还包括：

不同的所述用户输入弹幕内容根据用户发送时间、用户级别、用户自行设定发送时间各个参数进行队列排序。

所述方法还包括：

所述用户输入弹幕内容包括但不限于：文字、图片、符号、音频、视频和链接地址。

一种视频直播弹幕播放系统，包括：

设置单元，用于预先设置浏览器的CSS属性transtion参数；

弹幕发送单元，用于获取用户发送弹幕内容，将所述弹幕内容发送给所述浏览器；

弹幕播放单元，用于根据所述浏览器根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。

所述系统还包括浏览器单元，用于根据设置单元的设置进行CSS属性transtion参数设置；并根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。

所述系统还包括队列单元，用于对不同的所述用户发送弹幕内容根据用户发送时间、用户级别、用户自行设定发送时间各个参数进行队列排序。

所述设置单元用于：

预先设置每个弹幕内容的所述变换属性、计时属性和过度属性；

变换属性，包括：透明、翻转和移动属性；

计时属性，包括所需的时间属性；

过度属性，包括：匀速、变速或其它速度变量属性。

本发明实施例中，通过预先设置浏览器的CSS属性transtion参数；获取用户发送弹幕内容，将所述弹幕内容发送给所述浏览器；所述浏览器根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。本发明实施例的方案，提供了微信用户视频直播弹幕播放服务，对于微信用户直接通过关注公众号就可以实现视频直播的自定义互动，并且提出了一种简单的利用浏览器功能实现弹幕播放的方案，相对于现有弹幕播放方式，更为简单有效，易于管理，丰富了微信用户的体验，从而极大的提高了用户体验度。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例1提供的一种视频直播弹幕播放方法原理流程图；

图2为本发明实施例2提供的一种视频直播弹幕播放系统结构示意图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

如图1所示，为本发明实施例1提供的一种视频直播弹幕播放方法原理流程图，其中，

步骤11，预先设置浏览器的CSS属性transtion参数。

本实施例以微信用户关注公众号后的视频直播弹幕播放为例，说明弹幕播放的方案。实际上，本实施例并不限定于微信用户的视频直播，对于各类的弹幕播放器都可适用，或者，对于需要进行弹幕播放的场景都可适用。

微信用户即为普通的微信用户，通过微信服务器进入公众号服务器并关注视频直播公众号。通常情况下，微信用户需要关注相应的公众账号，通过该公众账号接入视频直播服务器。

微信公众服务号(公众账号)是公众平台的一种账号类型，旨在为用户提供服务。服务号一个月内仅可以发送四条群发消息。服务号发给用户的消息，会显示在用户的聊天列表中。并且，在发送消息给用户时，用户将收到即时的消息提醒。

订阅号是公众平台的一种账号类型，为用户提供信息和资讯。订阅号每天可以发送一条群发消息。订阅号发给用户的消息，将会显示在用户的订阅号文件夹中。在发送消息给用户时，用户不会收到即时消息提醒。在用户的通讯录中，订阅号将被放入订阅号文件夹中。

微信公众账号的用途非常广泛，政府，媒体，企业，明星等都开始纷纷建立独立的微信公众账号平台。在上面进行个人企业等文化活动的宣传营销。

可以在设置里面绑定一个私人微信号，利用微信公众账号助手群发消息，随时查看消息群发状态。利用公众账号平台进行自媒体活动，简单来说就是进行一对多的媒体性行为活动，如商家通过基于微信公众平台对接的微信会员云营销系统展示商家微官网、微会员、微推送、微支付、微活动，已经形成了一种主流的线上线下微信互动营销方式。

实际上，微信公众账号提供了一种微信用户与后台第三方服务器之间的沟通渠道，公众账号用户可以与普通微信用户进行互动，借助微信平台，可以非常方便的进行业务推广、服务提供等。

本实施例中，可以利用微信公众平台的公众账号服务，视频直播服务器通过申请微信公众账号来接入微信服务器。微信用户关注和订阅该公众账号后，可以以微信用户的方式登录微信服务器，微信服务器将该用户的信息转发视频直播服务器。当微信用户与视频直播服务器互动时，微信服务器从中转发互动信息。

微信用户接入视频直播服务器后，可以与视频直播服务器互动。互动的方式主要是视频直播服务器提供相应的视频直播过程中的弹幕播放。

本实施例主要利用了现有浏览器支持的CSS属性中的transtion参数的设置。在CSS中，Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能。可通过transtions属性来使用Transtions功能。

W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

transtions属性的使用方法如下所示：

transtion:property duration timing-function

其中property表示属性进行平滑过渡，duraton表示在多长时间内完成属性值的平滑过渡，tinming-function表示通过什么方法来进行平滑过渡。

div{width:120px；height:90px；background:blue；transition:background-color2s linear；}

div:hover{background:orange；}

上面的实例中，把div元素的蓝色背景在2秒钟之内平滑过渡到橙色背景。

当然还有另外一种使用Transitions功能的方法，就是将Transitions属性中的参数分开来写，例如下面的代码：

transtion-property:backgroud-color；transtion-duration:1s；tarnstion-timing-function:linear；

使用Transitions功能同时对于多个属性值进行平滑过渡:

div{width:120px；height:90px；background:blue；-moz-transition:background-color 1s linear,height 1s linear；}

div:hover{height:240px；background:orange；}

上面的实例中，元素从背景为蓝色、高度为120像素平滑过渡到背景为橙色，高度为240像素。

使用Transitions功能实现元素的移动与旋转动画：

img{position:absolute；top:270px；left:10px；-moz-transform:rotate(0deg)；-moz-transition:left 5s linear,-moz-transform 1s linear；}

img:hover{left:230px；-moz-transform:rotate(15deg)；}

上面的实例中，使定位图片元素从距左边距10像素、旋转角度为0状态平滑过渡到距左边距230像素、旋转15度。

本实施例中，实际上是预先设置好浏览器的CSS属性transtion参数，也就是预先设置好播放弹幕内容时候的各种参数，然后在接收到用户发送的弹幕内容时，直接根据这些参数进行播放。从而省去了对弹幕的调试内容，统一格式直接播放。

实际上，对于CSS属性transtion参数的设置，需要根据实际弹幕播放所需要的各种展示形式来设置，而CSS属性transtion参数本身正是解决各种动画播放问题的。具体来说，transtion参数笼统的可以包括3个属性值：

变换属性，包括：透明、翻转和移动属性等；

计时属性，包括所需的时间属性等；

过度属性，包括：匀速、变速或其它速度变量属性等；

预先设置每个弹幕内容的所述变换属性、计时属性和过度属性。

当然，对于transtion参数实际包含设置内容要复杂的多，本实施例仅做原则性的描述。

步骤12，获取用户发送弹幕内容，将所述弹幕内容发送给所述浏览器。

浏览器设置完成后，在播放视频直播的过程中，用户可以根据需要发送弹幕消息。弹幕消息的内容，也就是弹幕内容，是由用户输入的。用户输入弹幕内容包括但不限于：文字、图片、符号、音频、视频和链接地址等。

在接收到用户输入的弹幕内容后，首先，不同的所述用户输入弹幕内容根据用户发送时间、用户级别、用户自行设定发送时间各个参数进行队列排序。也就是，由于同时发送弹幕内容的用户可能很多，因而需要一个队列。队列的顺序需要考虑用户发送的时间、用户自身的级别以及用户是否设置了定时发送等选项。

排序之后的弹幕内容逐一发送给浏览器进行后续的发送准备。实际上，可以将所述用户输入弹幕内容作为一个元素发送给所述浏览器；

所述浏览器获取所述元素，作为弹幕播放的一个属性内容进行渲染、播放。

用户输入的弹幕内容，根据不同用户发送的时间顺序进入队列，并携带队列信息发送给所述浏览器。

步骤13，浏览器根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。

通常，视频直播是由播放器来完成的，而播放器可以内嵌于浏览器中，或者，根据浏览器的编译调用视频播放器。视频直播通常还需要用到视频直播服务器。

视频直播服务器的主要功能是为用户提供视频直播服务。视频直播服务不仅在于根据需要设定视频直播的内容和形式，还需要设定用户参与视频直播的互动形式。对于视频直播的内容和展示形式等，可以根据实际的需要灵活设定，本实施例不做限定。

本实施例中的视频直播服务器在接收到微信用户的互动操作请求后，首先需要验证用户的视频直播弹幕播放权限。通常用户仅有普通的权限，也就是普通的用户互动操作可以进行。

弹幕视频，中文词语。弹幕指直接显现在视频上的评论，可以以滚动、停留甚至更多动作特效方式出现在视频上，是观看视频的人发送的简短评论。“弹幕视频”顾名思义即带有“弹幕”的视频。很多网站提供视频发送弹幕的功能，如niconico、acfun、bilibili、dilili、tucao、弹幕主义、爆点TV等。

一般情况，该类网站能允许观看视频者发表评论或感想，但与普通视频分享网站只在播放器下专用点评区显示不同，其会以滑动字幕的方式实时出现在视频画面上，保证所有观看者都能注意到，从而实现观看者间的互动，甚至可以一起表达对作品的赞叹或批评，增加观看乐趣。一些弹幕系统利用脚本语言能提供特定的弹幕形式，如弹幕特定位置出现或消失，控制弹幕弹出速度，弹幕位置等。配合纯色或画面变化较少的视频和特定背景音乐能实现弹幕演示表演。除外，在画面底部或顶部固定出现的弹幕也会作为非本地化没字幕视频的字幕使用。

具体来说，浏览器根据用户输入弹幕内容，调用预先设置的transtion参数属性对弹幕内容进行渲染播放。

本发明实施例中，通过预先设置浏览器的CSS属性transtion参数；获取用户发送弹幕内容，将所述弹幕内容发送给所述浏览器；所述浏览器根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。本发明实施例的方案，提供了微信用户视频直播弹幕播放服务，对于微信用户直接通过关注公众号就可以实现视频直播的自定义互动，并且提出了一种简单的利用浏览器功能实现弹幕播放的方案，相对于现有弹幕播放方式，更为简单有效，易于管理，丰富了微信用户的体验，从而极大的提高了用户体验度。

如图2所示，为本发明实施例2提供的一种视频直播弹幕播放系统结构示意图，其中，

设置单元21，用于预先设置浏览器的CSS属性transtion参数；

弹幕发送单元22，用于获取用户发送弹幕内容，将所述弹幕内容发送给所述浏览器；

弹幕播放单元23，用于根据所述浏览器根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。

进一步的，所述系统还包括浏览器单元24，用于根据设置单元21的设置进行CSS属性transtion参数设置；并根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。

进一步的，所述系统还包括队列单元25，用于对不同的所述用户发送弹幕内容根据用户发送时间、用户级别、用户自行设定发送时间各个参数进行队列排序。

进一步的，所述设置单元21用于：

预先设置每个弹幕内容的所述变换属性、计时属性和过度属性；

变换属性，包括：透明、翻转和移动属性；

计时属性，包括所需的时间属性；

过度属性，包括：匀速、变速或其它速度变量属性。

综上所述，本发明实施例中，通过预先设置浏览器的CSS属性transtion参数；获取用户发送弹幕内容，将所述弹幕内容发送给所述浏览器；所述浏览器根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。本发明实施例的方案，提供了微信用户视频直播弹幕播放服务，对于微信用户直接通过关注公众号就可以实现视频直播的自定义互动，并且提出了一种简单的利用浏览器功能实现弹幕播放的方案，相对于现有弹幕播放方式，更为简单有效，易于管理，丰富了微信用户的体验，从而极大的提高了用户体验度。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种视频直播弹幕播放方法，其特征在于，包括：

预先设置浏览器的CSS属性transtion参数；

获取用户输入弹幕内容，将所述弹幕内容发送给所述浏览器；

所述浏览器根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。

2.如权利要求1所述的方法，其特征在于，所述方法还包括：

所述transtion参数包括3个属性值：

变换属性，包括：透明、翻转和移动属性；

计时属性，包括所需的时间属性；

过度属性，包括：匀速、变速或其它速度变量属性；

预先设置每个弹幕内容的所述变换属性、计时属性和过度属性。

3.如权利要求1所述的方法，其特征在于，所述方法还包括：

所述用户输入的弹幕内容，根据不同用户发送的时间顺序进入队列，并携带队列信息发送给所述浏览器。

4.如权利要求1所述的方法，其特征在于，所述方法还包括：

将所述用户输入弹幕内容作为一个元素发送给所述浏览器；

所述浏览器获取所述元素，作为弹幕播放的一个属性内容进行渲染、播放。

5.如权利要求1所述的方法，其特征在于，所述方法还包括：

不同的所述用户输入弹幕内容根据用户发送时间、用户级别、用户自行设定发送时间各个参数进行队列排序。

6.如权利要求1所述的方法，其特征在于，所述方法还包括：

所述用户输入弹幕内容包括但不限于：文字、图片、符号、音频、视频和链接地址。

7.一种视频直播弹幕播放系统，其特征在于，包括：

设置单元，用于预先设置浏览器的CSS属性transtion参数；

弹幕发送单元，用于获取用户发送弹幕内容，将所述弹幕内容发送给所述浏览器；

弹幕播放单元，用于根据所述浏览器根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。

8.如权利要求7所述的系统，其特征在于，所述系统还包括浏览器单元，用于根据设置单元的设置进行CSS属性transtion参数设置；并根据所述弹幕内容的队列信息进行队列选择，并根据所述transtion参数自行调用CSS属性对所述弹幕内容进行渲染、播放。

9.如权利要求7所述的系统，其特征在于，所述系统还包括队列单元，用于对不同的所述用户发送弹幕内容根据用户发送时间、用户级别、用户自行设定发送时间各个参数进行队列排序。

10.如权利要求7所述的系统，其特征在于，所述设置单元用于：

预先设置每个弹幕内容的所述变换属性、计时属性和过度属性；

变换属性，包括：透明、翻转和移动属性；

计时属性，包括所需的时间属性；

过度属性，包括：匀速、变速或其它速度变量属性。