一种视频界面显示方法及装置与流程

文档序号:14943049发布日期:2018-07-13 21:34

本发明涉及电子技术领域,尤其涉及一种视频界面显示方法及装置。



背景技术:

视频播放客户端(例如腾讯视频播放客户端)可以向用户播放视频,以满足用户需求。为了支持页面交互,视频播放客户端可以将视频界面和页面元素(例如广告跳转按钮,跳过广告按钮等)合成渲染在同一个待显示页面,则用户在观看视频的同时可以点击广告跳转按钮进入广告页面,或者点击跳过广告按钮显示非广告内容,以实现页面交互。但是不同视频播放客户端配置有不同的播放控制面板,无法向用户提供统一的视频播放界面,播放体验交差。



技术实现要素:

本发明实施例所要解决的技术问题在于,提供一种视频界面显示方法及装置,通过在待显示区域显示视频界面和页面元素,可提高播放体验。

为了解决上述技术问题,本发明实施例提供了一种视频界面显示方法,所述方法包括:

获取待显示页面中的目标区域,所述目标区域包括视频界面和页面元素;

确定所述目标区域在显示屏幕中的待显示区域,并基于所述待显示区域获取所述待显示页面的滚动值;

基于所述待显示页面的滚动值,将所述目标区域移动至所述待显示区域;

在所述显示屏幕中除所述待显示区域以外的其他区域填充预设的显示信息。

相应地,本发明实施例还提供了一种视频界面显示装置,所述装置包括:

获取单元,用于获取待显示页面中的目标区域,所述目标区域包括视频界面和页面元素;

确定单元,用于确定所述目标区域在显示屏幕中的待显示区域,并基于所述待显示区域获取所述待显示页面的滚动值;

移动单元,用于基于所述待显示页面的滚动值,将所述目标区域移动至所述待显示区域;

填充单元,用于在所述显示屏幕中除所述待显示区域以外的其他区域填充预设的显示信息。

实施本发明实施例,通过获取待显示页面中的目标区域,目标区域包括视频界面和页面元素,确定目标区域在显示屏幕中的待显示区域,并基于待显示区域获取待显示页面的滚动值,基于待显示页面的滚动值,将目标区域移动至待显示区域,在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息,可提高播放体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图;

图1是本发明实施例中提供的一种视频界面显示方法的流程示意图;

图2是本发明实施例中提供的一种待显示页面的界面示意图;

图3是本发明另一实施例中提供的一种界面示意图;

图4是本发明另一实施例中提供的一种界面示意图;

图5是本发明实施例中提供的一种视频界面显示装置的结构示意图;

图6是本发明实施例中提供的一种终端的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。

本发明实施例提供了一种视频界面显示方法,获取待显示页面中的目标区域,目标区域包括视频界面和页面元素,确定目标区域在显示屏幕中的待显示区域,并基于待显示区域获取待显示页面的滚动值,基于待显示页面的滚动值,将目标区域移动至待显示区域,在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息,可提高播放体验。

上述视频界面显示方法可以运行在个人电脑、智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑、移动互联网设备(MID,Mobile Internet Devices)或穿戴式智能设备等终端运行的客户端中。客户端可以包括视频播放客户端、即时通信客户端或者SNS(Social Networking Services,社会性网络服务)客户端等,该客户端可以显示视频界面,该视频界面用于播放视频。

请参见图1,图1是本发明实施例公开的一种视频界面显示方法的流程示意图。如图1所示,该视频界面显示方法至少可以包括以下步骤:

S101,获取待显示页面中的目标区域,目标区域包括视频界面和页面元素。

终端可以获取待显示页面中的目标区域,其中目标区域可以包括视频界面和页面元素,视频界面可以用于播放视频,页面元素可以用于描述该视频的相关信息,例如广告剩余播放时长、点击进入广告页面或者跳转广告等。具体实现中,终端可以通过用户输入的关键字搜索得到待显示页面,可选的,终端还可以在检测到用户对访问路径或者地址信息等的点击操作时,获取该访问路径或者地址信息对应的待显示页面。

以图2所示的待显示页面的界面示意图为例,待显示页面可以包括菜单栏、视频界面、页面元素以及该视频界面的关联信息。其中,菜单栏可以位于待显示页面的顶端,菜单栏可以包括视频播放客户端的客户端标识、用于指示登录视频播放服务器的登录按钮或者搜索引擎等。视频界面和页面元素可以位于待显示页面的同一区域中,例如视频界面和页面元素位于菜单栏的下方。该视频界面的关联信息可以位于视频界面的下方,关联信息可以包括该视频界面所播放视频的视频名称、当前播放集数或者该视频界面的播放次数总和等。终端获取到待显示页面之后,可以获取待显示页面中包含视频界面和页面元素的区域,并将该区域作为目标区域。

S102,确定目标区域在显示屏幕中的待显示区域,并基于待显示区域获取待显示页面的滚动值。

终端可以确定目标区域在显示屏幕中的待显示区域,并基于待显示区域获取待显示页面的滚动值。其中,滚动值用于指示待显示页面中各个区域的位置,基于待显示区域获取的待显示页面的滚动值可以为更新后的待显示页面的滚动值。

示例性的,在待显示页面的排版中,菜单栏位于待显示页面的顶端,目标区域位于菜单栏的下方,基于待显示页面的初始滚动值,终端在显示屏幕中显示的待显示页面可以如图1所示。待显示页面的高度大于显示屏幕的高度,显示屏幕无法完整显示整个待显示页面,为了提高播放体验,终端可以将目标区域显示在显示屏幕的待显示区域,其中待显示区域可以为终端预先设置的区域,例如待显示区域可以为显示屏幕的中间区域,进一步的,终端可以获取目标区域位于待显示区域时待显示页面的滚动值。

可选的,终端可以基于待显示区域对待显示页面的滚动值进行更新,得到待显示页面更新后的滚动值。

以图3所示的界面示意图为例,第一区域可以表示完整的待显示页面,例如网页;第二区域可以表示目标区域,即包含视频界面和页面元素的区域;第三区域可以表示待显示区域,作为待显示页面显示的视口,位于待显示区域的页面内容可以显示在显示屏幕中。终端可以基于待显示区域对待显示页面的滚动值进行更新,得到待显示页面更新后的滚动值,例如终端可以将待显示页面进行移动,使得目标区域位于待显示区域。

可选的,待显示页面更新后的滚动值可以表示如下:

newScrollyY=videoY-(webviewHeight-videoHeight)/2

newScrollyX=videoX-(webviewLength-videoLength)/2

其中,newScrollyY表示待显示页面更新后的滚动值中的Y值,videoY表示目标区域的原Y值,webviewHeight表示显示屏幕的高度,videoHeight表示目标区域的高度;newScrollyX表示待显示页面更新后的滚动值中的X值,videoX表示目标区域的原X值,webviewLength表示显示屏幕的长度,videoLength表示目标区域的长度。

可选的,待显示页面更新后的滚动值可以表示如下:

newScrollyY′=min(max(0,newScrollyY),webHeight)

newScrollyX′=min(max(0,newScrollyX),webLength)

其中,newScrolYly表示待显示页面最近更新后的滚动值中的Y值,newScrollyY表示待显示页面上一次更新后的滚动值中的Y值,webHeight表示待显示页面的高度;newScrollyX′表示待显示页面最近更新后的滚动值中的X值,newScrollyX表示待显示页面上一次更新后的滚动值中的X值,webLength表示待显示页面的长度。

本发明实施例通过再次对待显示页面的滚动值进行更新,可确保基于更新后的待显示页面的滚动值,目标区域位于待显示页面中。

可选的,终端基于待显示区域对待显示页面的滚动值进行更新之后,当基于更新后的滚动值确定目标区域位于显示屏幕的其他区域中时,终端可以对目标区域进行移动,使得移动后的目标区域位于显示屏幕的待显示区域中。

以图3所示的界面示意图为例,终端基于更新后的待显示页面的滚动值对图3中处于第一状态的待显示页面进行移动,移动后的待显示页面可以如图3中处于第二状态的待显示页面所示,终端可以确定移动后的待显示页面中第二区域位于显示屏幕的上方,并非位于显示屏幕的中间区域,即第二区域位于显示屏幕的其他区域,则终端可以对第二区域进行移动,使得移动后的第二区域位于显示屏幕的待显示区域中。

可选的,目标区域更新后的滚动值可以表示如下:

int offsetY=(webviewHeight-videoHeight)/2-videoY+ScrollY

int offsetX=(webviewLength-videoLength)/2-videoX+ScrollX

其中,int offsetY表示目标区域更新后的滚动值中的Y值,webviewHeight表示显示屏幕的高度,videoHeight表示目标区域的高度,videoY表示目标区域的原Y值,ScrollY表示待显示页面的滚动值中的Y值;int offsetX表示目标区域更新后的滚动值中的X值,webviewLength表示显示屏幕的长度,videoLength表示目标区域的长度,videoX表示目标区域的原X值,ScrollX表示待显示页面的滚动值中的X值。

可选的,终端可以基于待显示区域,对目标区域的滚动值进行更新,得到目标区域更新后的滚动值。具体实现中,终端可以基于待显示区域,对目标区域的滚动值进行更新,使得基于目标区域更新后的滚动值,目标区域可以移动至待显示区域。

可选的,终端基于待显示区域,对目标区域的滚动值进行更新之后,当基于目标区域更新后的滚动值确定目标区域位于显示屏幕的其他区域中时,终端可以对待显示页面的滚动值进行更新,得到待显示页面更新后的滚动值。

需要说明的是,本发明实施例将目标区域移动至待显示区域的方式包含但不局限于:对待显示页面的滚动值进行更新;或者对目标区域相对待显示页面的位置进行更新;或者对待显示页面的滚动值进行更新之后,对目标区域相对待显示页面的位置进行更新;或者对目标区域相对待显示页面的位置进行更新之后,对待显示页面的滚动值进行更新。

S103,基于待显示页面的滚动值,将目标区域移动至待显示区域。

终端可以基于待显示页面的滚动值,将目标区域移动至待显示区域。以图3所示的界面示意图为例,移动至第三区域的第二区域可以如图3中第三状态的待显示页面所示。

S104,在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息。

终端可以在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息。其中,预设的显示信息可以为黑块占位符,例如将显示屏幕中除待显示区域以外的其他区域填充黑色。可选的,预设的显示信息可以为预先设定的图片或者文字等,终端可以在显示屏幕中除待显示区域以外的其他区域填充待显示页面对应的显示信息,例如对于不同待显示页面,可以在显示屏幕中除待显示区域以外的其他区域填充不同的显示信息。

以图4所示的界面示意图为例,终端将目标区域移动至待显示区域,并在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息,填充预设的显示信息的待显示页面可以如图4所示,在视频界面使用同层绘制的方式显示页面元素,使得视频界面和页面元素位于同一区域,实现页面交互,另外将视频界面居中显示,同时隐藏其他区域,可提高播放体验。

本发明实施例中,获取待显示页面中的目标区域,确定目标区域在显示屏幕中的待显示区域,并基于待显示区域获取待显示页面的滚动值,基于待显示页面的滚动值,将目标区域移动至待显示区域,在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息,通过在待显示区域显示视频界面和页面元素,可提高播放体验。

请参见图5,图5是本发明实施例中提供的一种视频界面显示装置的结构示意图,如图所示本实施例中的视频界面显示装置至少可以包括获取单元501、确定单元502、移动单元503以及填充单元504,其中:

获取单元501,用于获取待显示页面中的目标区域,所述目标区域包括视频界面和页面元素。

确定单元502,用于确定所述目标区域在显示屏幕中的待显示区域,并基于所述待显示区域获取所述待显示页面的滚动值。

移动单元503,用于基于所述待显示页面的滚动值,将所述目标区域移动至所述待显示区域。

填充单元504,用于在所述显示屏幕中除所述待显示区域以外的其他区域填充预设的显示信息。

可选的,所述确定单元502基于所述待显示区域获取所述待显示页面的滚动值,具体用于:

基于所述待显示区域对所述待显示页面的滚动值进行更新,得到所述待显示页面更新后的滚动值。

可选的,所述确定单元502,还用于基于所述待显示区域对所述待显示页面的滚动值进行更新之后,当基于所述更新后的滚动值确定所述目标区域位于所述显示屏幕的其他区域中时,对所述目标区域进行移动,使得移动后的目标区域位于所述显示屏幕的待显示区域中。

可选的,所述待显示页面更新后的滚动值表示如下:

newScrollyY=videoY-(webviewHeight-videoHeight)/2

newScrollyX=videoX-(webviewLength-videoLength)/2

其中,newScrollyY表示所述待显示页面更新后的滚动值中的Y值,videoY表示所述目标区域的原Y值,webviewHeight表示所述显示屏幕的高度,videoHeight表示所述目标区域的高度;newScrollyX表示所述待显示页面更新后的滚动值中的X值,videoX表示所述目标区域的原X值,webviewLength表示所述显示屏幕的长度,videoLength表示所述目标区域的长度。

可选的,所述待显示页面更新后的滚动值表示如下:

newScrollyY′=min(max(0,newScrollyY),webHeight)

newScrollyX′=min(max(0,newScrollyX),webLength)

其中,newScrollyY′表示所述待显示页面最近更新后的滚动值中的Y值,newScrollyY表示所述待显示页面上一次更新后的滚动值中的Y值,webHeight表示所述待显示页面的高度;newScrollyX′表示所述待显示页面最近更新后的滚动值中的X值,newScrollyX表示所述待显示页面上一次更新后的滚动值中的X值,webLength表示所述待显示页面的长度。

可选的,所述确定单元502基于所述待显示区域获取所述待显示页面的滚动值,具体用于:

基于所述待显示区域,对所述目标区域的滚动值进行更新,得到所述目标区域更新后的滚动值。

可选的,所述确定单元502,还用于基于所述待显示区域,对所述目标区域的滚动值进行更新之后,当基于所述目标区域更新后的滚动值确定所述目标区域位于所述显示屏幕的其他区域中时,对所述待显示页面的滚动值进行更新,得到所述待显示页面更新后的滚动值。

可选的,所述目标区域更新后的滚动值表示如下:

int offsetY=(webviewHeight-videoHeight)/2-videoY+ScrollY

int offsetX=(webviewLength-videoLength)/2-videoX+ScrollX

其中,int offsetY表示所述目标区域更新后的滚动值中的Y值,webviewHeight表示所述显示屏幕的高度,videoHeight表示所述目标区域的高度,videoY表示所述目标区域的原Y值,ScrollY表示所述待显示页面的滚动值中的Y值;int offsetX表示所述目标区域更新后的滚动值中的X值,webviewLength表示所述显示屏幕的长度,videoLength表示所述目标区域的长度,videoX表示所述目标区域的原X值,ScrollX表示所述待显示页面的滚动值中的X值。

本发明实施例中,获取单元501获取待显示页面中的目标区域,目标区域包括视频界面和页面元素,确定单元502确定目标区域在显示屏幕中的待显示区域,并基于待显示区域获取待显示页面的滚动值,移动单元503基于待显示页面的滚动值,将目标区域移动至待显示区域,填充单元504在显示屏幕中除待显示区域以外的其他区域填充预设的显示信息,可提高播放体验。

请参见图6,图6为本发明实施例提供的一种终端的结构示意图,本发明实施例提供的终端可以用于实施上述图1所示的本发明实施例实现的方法,为了便于说明,仅示出了与本发明实施例相关的部分,具体技术细节未揭示的,请参照图1所示的本发明实施例。

如图6所示,该终端包括:至少一个处理器601,例如CPU,至少一个输入装置603,至少一个输出装置604,存储器605,至少一个通信总线602。其中,通信总线602用于实现这些组件之间的连接通信。其中,输入装置603具体可以为网络接口等,用于获取待显示页面。其中,输出装置604具体可以为显示屏幕等,用于显示视频界面和页面元素。其中,存储器605可能包含高速RAM存储器,也可能还包括非不稳定的存储器,例如至少一个磁盘存储器,具体用于存储待显示页面等。存储器605可选的可以包含至少一个位于远离前述处理器601的存储装置。处理器601可以结合图5所示的视频界面显示装置。存储器605中存储一组程序代码,且处理器601、输入装置603以及输出装置604调用存储器605中存储的程序代码,用于执行以下操作:

处理器601获取待显示页面中的目标区域,所述目标区域包括视频界面和页面元素。

处理器601确定所述目标区域在显示屏幕中的待显示区域,并基于所述待显示区域获取所述待显示页面的滚动值。

处理器601基于所述待显示页面的滚动值,将所述目标区域移动至所述待显示区域。

处理器601在所述显示屏幕中除所述待显示区域以外的其他区域填充预设的显示信息。

可选的,处理器601基于所述待显示区域获取所述待显示页面的滚动值,具体可以为:

基于所述待显示区域对所述待显示页面的滚动值进行更新,得到所述待显示页面更新后的滚动值。

可选的,处理器601基于所述待显示区域对所述待显示页面的滚动值进行更新之后,还可以执行以下操作:

当基于所述更新后的滚动值确定所述目标区域位于所述显示屏幕的其他区域中时,对所述目标区域进行移动,使得移动后的目标区域位于所述显示屏幕的待显示区域中。

可选的,所述待显示页面更新后的滚动值表示如下:

newScrollyY=videoY-(webviewHeight-videoHeight)/2

newScrollyX=videoX-(webviewLength-videoLength)/2

其中,newScrollyY表示所述待显示页面更新后的滚动值中的Y值,videoY表示所述目标区域的原Y值,webviewHeight表示所述显示屏幕的高度,videoHeight表示所述目标区域的高度;newScrollyX表示所述待显示页面更新后的滚动值中的X值,videoX表示所述目标区域的原X值,webviewLength表示所述显示屏幕的长度,videoLength表示所述目标区域的长度。

可选的,所述待显示页面更新后的滚动值表示如下:

newScrollyY′=min(max(0,newScrollyY),webHeight)

newScrollyX′=min(max(0,newScrollyX),webLength)

其中,newScrollyY′表示所述待显示页面最近更新后的滚动值中的Y值,newScrollyY表示所述待显示页面上一次更新后的滚动值中的Y值,webHeight表示所述待显示页面的高度;newScrollyX′表示所述待显示页面最近更新后的滚动值中的X值,newScrollyX表示所述待显示页面上一次更新后的滚动值中的X值,webLength表示所述待显示页面的长度。

可选的,处理器601基于所述待显示区域获取所述待显示页面的滚动值,具体可以为:

基于所述待显示区域,对所述目标区域的滚动值进行更新,得到所述目标区域更新后的滚动值。

可选的,处理器601基于所述待显示区域,对所述目标区域的滚动值进行更新之后,还可以执行以下操作:

当基于所述目标区域更新后的滚动值确定所述目标区域位于所述显示屏幕的其他区域中时,对所述待显示页面的滚动值进行更新,得到所述待显示页面更新后的滚动值。

可选的,所述目标区域更新后的滚动值表示如下:

int offsetY=(webviewHeight-videoHeight)/2-videoY+ScrollY

int offsetX=(webviewLength-videoLength)/2-videoX+ScrollX

其中,int offsetY表示所述目标区域更新后的滚动值中的Y值,webviewHeight表示所述显示屏幕的高度,videoHeight表示所述目标区域的高度,videoY表示所述目标区域的原Y值,ScrollY表示所述待显示页面的滚动值中的Y值;int offsetX表示所述目标区域更新后的滚动值中的X值,webviewLength表示所述显示屏幕的长度,videoLength表示所述目标区域的长度,videoX表示所述目标区域的原X值,ScrollX表示所述待显示页面的滚动值中的X值。

具体的,本发明实施例中介绍的终端可以用以实施本发明结合图1介绍的方法实施例中的部分或全部流程。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory,ROM)或随机存储记忆体(Random Access Memory,RAM)等。

以上所揭露的仅为本发明较佳实施例而已,当然不能以此来限定本发明之权利范围,因此依本发明权利要求所作的等同变化,仍属本发明所涵盖的范围。

再多了解一些
当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1