CN103914464B - 基于流媒体播放的伴随式评论的互动展示方法和系统 - Google Patents

Abstract

本发明公开了一种基于流媒体播放的伴随式评论的互动展示方法和系统，增加媒体播放时的评论的互动性体验，对于音频的某个时间点上可进行精确评论，以及在某个时间点上的评论可在前端进行呈现。其技术方案为：系统包括：评论预加载装置，在页面载入时预加载坐标化的播放器时间轴和时间轴上的每个区块的评论数据，并根据预加载的结果进行着色；伴随式显示装置，在流媒体播放时以及鼠标移入立体评论区域时动态显示评论内容；立体评论添加装置，在流媒体的播放条的时间点上添加评论。

Description

基于流媒体播放的伴随式评论的互动展示方法和系统

技术领域

本发明涉及媒体播放的评论互动展示方法，尤其涉及基于流媒体播放的伴随式评论的互动展示方法和系统。

背景技术

目前中国已公开上线的产品中，针对声媒体，如MP3播放器、音频播放这种形式的流媒体，能够针对某个具体的时间点进行评论的，并且伴随播放能够动态加载这类评论的产品，还是一个空白；其他类型的媒体类产品，如视频媒体，有类似随视频播放滚动播出评论的方式。但此种模式有一个缺点，评论的内容会极大的影响流媒体本身的观看过程。但声音媒体由于不占用视觉，故而伴随式的声音评论不会对收听本身造成影响。

开发这样一种增强式互动评论体验方法的动力源自于用户的需求，我们认为，现有评论技术的精准性比较缺乏，一个音频的流媒体，精彩部分可能就仅仅是整个音频流的一部分，传统的评论方式只能针对整个音频流进行评论，而不能精准到某个具体的时间点上。

发明内容

本发明的目的在于解决上述问题，提供了一种基于流媒体播放的伴随式评论的互动展示方法和系统，增加媒体播放时的评论的互动性体验，对于音频的某个时间点上可进行精确评论，以及在某个时间点上的评论可在前端进行呈现。

本发明的技术方案为：本发明揭示了一种基于流媒体播放的伴随式评论的互动展示系统，包括评论预加载装置、伴随式显示装置、立体评论添加装置，其中：

评论预加载装置，在页面载入时预加载坐标化的播放器时间轴和时间轴上的每个区块的评论数据，并根据预加载的结果进行着色；

伴随式显示装置，在流媒体播放时以及鼠标移入立体评论区域时动态显示评论内容；

立体评论添加装置，在流媒体的播放条的时间点上添加评论。

根据本发明的基于流媒体播放的伴随式评论的互动展示系统的一实施例，评论预加载装置包括页面加载请求模块、时间轴坐标化模块、时间轴着色模块，其中：

页面加载请求模块，前端向服务器发出加载页面请求，页面加载请求中包含播放器元素，服务器返回页面需要加载的音频标识、播放器时间轴的分块规则、以及每个区块的评论区域所包含的评论数；

时间轴坐标化模块，前端根据服务器返回的播放器时间轴的分块规则坐标化播放器时间轴；

时间轴着色模块，前端根据服务器返回的每个区块的评论区域所包含的评论数，为时间轴着色。

根据本发明的基于流媒体播放的伴随式评论的互动展示系统的一实施例，伴随式显示装置包括播放时伴随式评论显示子装置、鼠标移入时立体评论主动显示子装置，其中：

播放时伴随式评论显示子装置进一步包括当前坐标轮询计算模块、区块评论加载模块、评论显示模块，其中：

当前坐标轮询计算模块，在播放器播放时轮询计算当前时间点对应的播放器坐标位置，根据坐标位置判断该坐标位置所在的区块是否有评论；

区块评论加载模块，通过ajax请求向服务器端加载该区块的评论内容，服务器端返回评论内容、评论时间和评论用户；

评论显示模块，将评论内容浮动显示在播放器时间轴的上方；

鼠标移入时立体评论主动显示子装置进一步包括立体评论交互区域显示模块、评论检查模块，评论信息加载模块，其中：

立体评论交互区域显示模块，在播放器的时间轴附近显示立体评论交互区域；

评论检查模块，在鼠标移入立体评论交互区域后，获取鼠标当前位置的坐标，检查当前坐标所在的区块是否有评论；

评论信息加载模块，在当前区块有评论的情况下，向服务器端发出ajax请求，获取评论内容、评论时间和评论用户，展现在立体评论交互区域内。

根据本发明的基于流媒体播放的伴随式评论的互动展示系统的一实施例，立体评论添加装置包括鼠标移入指针效果加载模块、评论请求发起模块、评论内容发送模块、评论区域渲染模块，其中：

鼠标移入指针效果加载模块，在鼠标移入立体评论交互区域时前端加载鼠标移入的指针效果；

评论请求发起模块，当鼠标在区域内点击时计算出鼠标对应的区域坐标，通过ajax请求向服务器端发起评论请求；

评论内容发送模块，向服务器端发送评论用户、评论内容、评论时间和评论区块；

评论区域渲染模块，根据服务器端返回的评论内容对评论区块进行渲染。

本发明还揭示了一种基于流媒体播放的伴随式评论的互动展示方法，包括：

步骤1：在页面载入时预加载坐标化的播放器时间轴和时间轴上的每个区块的评论数据，并根据预加载的结果进行着色；

步骤2：在流媒体播放时以及鼠标移入立体评论区域时动态显示评论内容；

步骤3：在流媒体的播放条的时间点上添加评论。

根据本发明的基于流媒体播放的伴随式评论的互动展示方法的一实施例，步骤1进一步包括：

前端向服务器发出加载页面请求，页面加载请求中包含播放器元素，服务器返回页面需要加载的音频标识、播放器时间轴的分块规则、以及每个区块的评论区域所包含的评论数；

前端根据服务器返回的播放器时间轴的分块规则坐标化播放器时间轴；

前端根据服务器返回的每个区块的评论区域所包含的评论数，为时间轴着色。

根据本发明的基于流媒体播放的伴随式评论的互动展示方法的一实施例，步骤2进一步包括：

在播放器播放时轮询计算当前时间点对应的播放器坐标位置，根据坐标位置判断该坐标位置所在的区块是否有评论；

通过ajax请求向服务器端加载该区块的评论内容，服务器端返回评论内容、评论时间和评论用户；

将评论内容浮动显示在播放器时间轴的上方；

在播放器的时间轴附近显示立体评论交互区域；

在鼠标移入立体评论交互区域后，获取鼠标当前位置的坐标，检查当前坐标所在的区块是否有评论；

在当前区块有评论的情况下，向服务器端发出ajax请求，获取评论内容、评论时间和评论用户，展现在立体评论交互区域内。

根据本发明的基于流媒体播放的伴随式评论的互动展示方法的一实施例，步骤3进一步包括：

在鼠标移入立体评论交互区域时前端加载鼠标移入的指针效果；

当鼠标在区域内点击时计算出鼠标对应的区域坐标，通过ajax请求向服务器端发起评论请求；

向服务器端发送评论用户、评论内容、评论时间和评论区块；

根据服务器端返回的评论内容对评论区块进行渲染。

本发明对比现有技术有如下的有益效果：本发明的方案是在流媒体播放时针对流媒体的某个具体的时间点进行评论，而不是传统的只能针对某一个声音媒体或者视频媒体进行评论。而且在流媒体播放时，随着时间推移，动态播出流媒体时间点上的评论。为了进一步改善用户评论的体验，还可以有如下的实现方式：用户完成对某一时间点的评论后，该时间点附近的时间轴将会从一种颜色变化成另一种颜色，这在视觉上给用户及上传者一种评论已经生效的反馈。当鼠标划过着色时间轴区域时，利用ajax技术动态加载时间区域的评论，浮动显示在时间轴上方。

附图说明

图1示出了本发明的基于流媒体播放的伴随式评论的互动展示系统的较佳实施例的原理图。

图2A、2B、2C分别示出了图1所示的系统中的评论预加载装置、伴随式显示装置、立体评论添加装置的细化原理图。

图3示出了本发明的基于流媒体播放的伴随式评论的互动展示方法的较佳实施例的流程图。

图4A、4B、4C分别示出了图3所示的方法中步骤S10、步骤S12和步骤S14的细化流程图。

具体实施方式

下面结合附图和实施例对本发明作进一步的描述。

图1示出了本发明的基于流媒体播放的伴随式评论的互动展示系统的较佳实施例的原理。请参见图1，本实施例的系统包括：评论预加载装置1、伴随式显示装置2、立体评论添加装置3。

评论预加载装置1在页面载入时预加载坐标化的播放器时间轴和时间轴上的每个区块的评论数据，并根据预加载的结果进行着色。

请同时参见图2A，评论预加载装置1包括页面加载请求模块10、时间轴坐标化模块11、时间轴着色模块12。

页面加载请求模块10中，前端5向服务器4发出加载页面请求，页面加载请求中包含播放器元素，服务器4返回页面需要加载的音频标识、播放器时间轴的分块规则、以及每个区块的评论区域所包含的评论数。

时间轴坐标化模块11中，前端5根据服务器4返回的播放器时间轴的分块规则坐标化播放器时间轴。时间轴着色模块12中，前端5根据服务器4返回的每个区块的评论区域所包含的评论数进行渲染，为时间轴着色。

伴随式显示装置2在流媒体播放时以及鼠标移入立体评论区域时动态显示评论内容。

请参见图2B，伴随式显示装置2包括播放时伴随式评论显示子装置20、鼠标移入时立体评论主动显示子装置22。其中播放时伴随式评论显示子装置20进一步包括当前坐标轮询计算模块200、区块评论加载模块201、评论显示模块202。鼠标移入时立体评论主动显示子装置22进一步包括立体评论交互区域显示模块220、评论检查模块221，评论信息加载模块222。

当前坐标轮询计算模块200中，在播放器播放时使用JavaScript函数轮询计算当前时间点对应的播放器坐标位置，根据坐标位置判断该坐标位置所在的区块是否有评论。区块评论加载模块201中，通过ajax请求向服务器端加载该区块的评论内容，服务器端返回评论内容、评论时间和评论用户。评论显示模块202中，将评论内容以JS弹出框的方式浮动显示在播放器时间轴的上方，评论框宽度固定，高度随着评论内容自增到最大高度后变成右侧滚动条拖动，并且在评论框内可针对评论进行回复或浏览。

立体评论交互区域显示模块220中，在播放器的时间轴附近主动显示专门的矩形区域，作为立体评论交互区域。评论检查模块221中，在鼠标移入立体评论交互区域后，获取鼠标当前位置的坐标，检查当前坐标所在的区块是否有评论。评论信息加载模块222中，在当前区块有评论的情况下，向服务器4端发出ajax请求，获取评论内容、评论时间和评论用户，展现在宽度固定、高度自增有上限的立体评论交互区域内。

立体评论添加装置3在流媒体的播放条的时间点上添加评论。

请参见图2C，立体评论添加装置3包括鼠标移入指针效果加载模块30、评论请求发起模块31、评论内容发送模块32、评论区域渲染模块33。鼠标移入指针效果加载模块30在鼠标移入立体评论交互区域时前端加载鼠标移入的指针效果。评论请求发起模块31当鼠标在区域内点击时计算出鼠标对应的区域坐标，通过ajax请求向服务器端发起评论请求。评论内容发送模块32向服务器端发送评论用户、评论内容、评论时间和评论区块。评论区域渲染模块33根据服务器端返回的评论内容对评论区块进行渲染，若该区域已经评论过，则将新评论添加到现有评论之后进行显示。

本系统适用于各种有音频播放器的网络平台和移动平台（比如iphone、android手机平台等）。可能的变化例比如对时间轴划分的分段数不同，如每秒一个评论区段，或按播放器长度固定区段划分；鼠标交互方式也有可能作不同程度的更改，如单击改为右击，自动显示改为手动显示等等。

图3示出了本发明的基于流媒体播放的伴随式评论的互动展示方法的较佳实施例的流程。请参见图3，下面是对本实施例的互动展示方法的实施步骤的详细描述。

步骤S10：在页面载入时预加载坐标化的播放器时间轴和时间轴上的每个区块的评论数据，并根据预加载的结果进行着色。

步骤S12：在流媒体播放时以及鼠标移入立体评论区域时动态显示评论内容。

步骤S14：在流媒体的播放条的时间点上添加评论。

请同时参见图4A，是对步骤S10的细化。

步骤S100：前端向服务器发出加载页面请求，页面加载请求中包含播放器元素，服务器返回页面需要加载的音频标识、播放器时间轴的分块规则、以及每个区块的评论区域所包含的评论数。

步骤S102：前端根据服务器返回的播放器时间轴的分块规则坐标化播放器时间轴。

步骤S104：前端根据服务器返回的每个区块的评论区域所包含的评论数，为时间轴着色。

请同时参见图4B，是对步骤S12的细化。

步骤S120：在播放器播放时轮询计算当前时间点对应的播放器坐标位置，根据坐标位置判断该坐标位置所在的区块是否有评论。

步骤S121：通过ajax请求向服务器端加载该区块的评论内容，服务器端返回评论内容、评论时间和评论用户。

步骤S122：将评论内容浮动显示在播放器时间轴的上方。

步骤S123：在播放器的时间轴附近显示立体评论交互区域。

步骤S124：在鼠标移入立体评论交互区域后，获取鼠标当前位置的坐标，检查当前坐标所在的区块是否有评论。

步骤S125：在当前区块有评论的情况下，向服务器端发出ajax请求，获取评论内容、评论时间和评论用户，展现在立体评论交互区域内。

请同时参见图4C，是对步骤S14的细化。

步骤S140：在鼠标移入立体评论交互区域时前端加载鼠标移入的指针效果。

步骤S142：当鼠标在区域内点击时计算出鼠标对应的区域坐标，通过ajax请求向服务器端发起评论请求。

步骤S144：向服务器端发送评论用户、评论内容、评论时间和评论区块。

步骤S146：根据服务器端返回的评论内容对评论区块进行渲染。

上述实施例是提供给本领域普通技术人员来实现和使用本发明的，本领域普通技术人员可在不脱离本发明的发明思想的情况下，对上述实施例做出种种修改或变化，因而本发明的保护范围并不被上述实施例所限，而应该是符合权利要求书所提到的创新性特征的最大范围。

Claims (6)

1.一种基于流媒体播放的伴随式评论的互动展示系统，包括评论预加载装置、伴随式显示装置、立体评论添加装置，其中：

评论预加载装置，在页面载入时预加载坐标化的播放器时间轴和时间轴上的每个区块的评论数据，并根据预加载的结果进行着色；

伴随式显示装置，在流媒体播放时以及鼠标移入立体评论区域时动态显示评论内容；

立体评论添加装置，在流媒体的播放条的时间点上添加评论；

其中评论预加载装置包括页面加载请求模块、时间轴坐标化模块、时间轴着色模块，其中：

页面加载请求模块，前端向服务器发出加载页面请求，页面加载请求中包含播放器元素，服务器返回页面需要加载的音频标识、播放器时间轴的分块规则、以及每个区块的评论区域所包含的评论数；

时间轴坐标化模块，前端根据服务器返回的播放器时间轴的分块规则坐标化播放器时间轴；

时间轴着色模块，前端根据服务器返回的每个区块的评论区域所包含的评论数，为时间轴着色。

2.根据权利要求1所述的基于流媒体播放的伴随式评论的互动展示系统，其特征在于，伴随式显示装置包括播放时伴随式评论显示子装置、鼠标移入时立体评论主动显示子装置，其中：

播放时伴随式评论显示子装置进一步包括当前坐标轮询计算模块、区块评论加载模块、评论显示模块，其中：

当前坐标轮询计算模块，在播放器播放时轮询计算当前时间点对应的播放器坐标位置，根据坐标位置判断该坐标位置所在的区块是否有评论；

区块评论加载模块，通过ajax请求向服务器端加载该区块的评论内容，服务器端返回评论内容、评论时间和评论用户；

评论显示模块，将评论内容浮动显示在播放器时间轴的上方；

鼠标移入时立体评论主动显示子装置进一步包括立体评论交互区域显示模块、评论检查模块，评论信息加载模块，其中：

立体评论交互区域显示模块，在播放器的时间轴附近显示立体评论交互区域；

评论检查模块，在鼠标移入立体评论交互区域后，获取鼠标当前位置的坐标，检查当前坐标所在的区块是否有评论；

评论信息加载模块，在当前区块有评论的情况下，向服务器端发出ajax请求，获取评论内容、评论时间和评论用户，展现在立体评论交互区域内。

3.根据权利要求2所述的基于流媒体播放的伴随式评论的互动展示系统，其特征在于，立体评论添加装置包括鼠标移入指针效果加载模块、评论请求发起模块、评论内容发送模块、评论区域渲染模块，其中：

鼠标移入指针效果加载模块，在鼠标移入立体评论交互区域时前端加载鼠标移入的指针效果；

评论请求发起模块，当鼠标在区域内点击时计算出鼠标对应的区域坐标，通过ajax请求向服务器端发起评论请求；

评论内容发送模块，向服务器端发送评论用户、评论内容、评论时间和评论区块；

评论区域渲染模块，根据服务器端返回的评论内容对评论区块进行渲染。

4.一种基于流媒体播放的伴随式评论的互动展示方法，包括：

步骤1：在页面载入时预加载坐标化的播放器时间轴和时间轴上的每个区块的评论数据，并根据预加载的结果进行着色；

步骤2：在流媒体播放时以及鼠标移入立体评论区域时动态显示评论内容；

步骤3：在流媒体的播放条的时间点上添加评论；

其中步骤1进一步包括：

前端向服务器发出加载页面请求，页面加载请求中包含播放器元素，服务器返回页面需要加载的音频标识、播放器时间轴的分块规则、以及每个区块的评论区域所包含的评论数；

前端根据服务器返回的播放器时间轴的分块规则坐标化播放器时间轴；

前端根据服务器返回的每个区块的评论区域所包含的评论数，为时间轴着色。

5.根据权利要求4所述的基于流媒体播放的伴随式评论的互动展示方法，其特征在于，步骤2进一步包括：

在播放器播放时轮询计算当前时间点对应的播放器坐标位置，根据坐标位置判断该坐标位置所在的区块是否有评论；

通过ajax请求向服务器端加载该区块的评论内容，服务器端返回评论内容、评论时间和评论用户；

将评论内容浮动显示在播放器时间轴的上方；

在播放器的时间轴附近显示立体评论交互区域；

在鼠标移入立体评论交互区域后，获取鼠标当前位置的坐标，检查当前坐标所在的区块是否有评论；

在当前区块有评论的情况下，向服务器端发出ajax请求，获取评论内容、评论时间和评论用户，展现在立体评论交互区域内。

6.根据权利要求5所述的基于流媒体播放的伴随式评论的互动展示方法，其特征在于，步骤3进一步包括：

在鼠标移入立体评论交互区域时前端加载鼠标移入的指针效果；

当鼠标在区域内点击时计算出鼠标对应的区域坐标，通过ajax请求向服务器端发起评论请求；

向服务器端发送评论用户、评论内容、评论时间和评论区块；

根据服务器端返回的评论内容对评论区块进行渲染。