CN114697726A - 一种带有视频窗口的页面显示方法和智能机顶盒 - Google Patents

Abstract

本申请公开了一种带有视频窗口的页面显示方法和智能机顶盒，包括：应用程序Java层接收网页信息，并对所述网页信息进行解析。浏览器内核根据解析后的网页信息进行页面布局、渲染与合成，生成页面图层。播放器根据视频信息生成视频图层，并将视频图层输出至所述应用程序Java层。所述应用程序Java层根据所述视频信息的视频位置，将所述页面图层中所述视频位置的像素参数清零，并将清零后的页面图层与所述视频图层合成生成显示图层。本申请通过对页面图层中视频区域位置进行清零，使得页面图层在视频窗口位置为全透明，避免了页面图层对视频图层的遮挡，保证视频正常显示、播放。

Description

一种带有视频窗口的页面显示方法和智能机顶盒

技术领域

本申请涉及通信技术领域，尤其涉及一种带有视频窗口的页面显示方法和智能机顶盒。

背景技术

IPTV是利用计算机或机顶盒和电视完成接收视频点播节目、视频广播及网上冲浪等功能。IPTV能够很好地适应当今网络飞速发展的趋势，充分有效地利用网络资源，且具有良好的交互性，正在被大量广泛于运营商网络。

IPTV产品普遍使用服务器端-浏览器架构，即服务器端设置页面内容，机顶盒端集成浏览器负责展示页面。

在一些带有视频窗口的页面中，视频小窗口的位置经常有某些元素的不透明的背景图片，或者该区域元素的内容设置为非透明，导致播放视频在小窗口的位置透不过来，出现只有声音无视频情况，影响用户体验。

发明内容

本申请提供了一种网页内视频显示方法和显示器，以实现网页内视频窗口正常显示。

为了解决上述技术问题，本申请实施例公开了如下技术方案：

一方面，本申请实施例公开了一种带有视频窗口的页面显示方法，包括：应用程序Java层接收网页信息，并对所述网页信息进行解析；

浏览器内核根据解析后的网页信息进行页面布局、渲染与合成，生成页面图层；

播放器根据视频信息生成视频图层，并将视频图层输出至所述应用程序Java层；

所述应用程序Java层根据所述视频信息的视频位置，对所述页面图层中相应位置进行剪切，将剪切后的页面图层与所述视频图层合成生成显示图层。

另一方面，本申请实施例公开了一种智能机顶盒，包括：播放器，用于根据视频信息创建播放图层；浏览器内核，根据所述解析后的网页信息，创建页面图层；

浏览器Java层，用于根据所述视频信息中的位置信息对所述页面图层进行剪切，将所述页面图层中所述视频位置的像素参数清零，将清零后的页面图层与所述视频图层合成生成显示图层。

本申请的有益效果：

本申请公开了一种带有视频窗口的页面显示方法和智能机顶盒，包括：应用程序Java层接收网页信息，并对所述网页信息进行解析。浏览器内核根据解析后的网页信息进行页面布局、渲染与合成，生成页面图层。播放器根据视频信息生成视频图层，并将视频图层输出至所述应用程序Java层。所述应用程序Java层根据所述视频信息的视频位置，将所述页面图层中所述视频位置的像素参数清零，将清零后的页面图层与所述视频图层合成生成显示图层。本申请通过对页面图层中视频区域位置进行剪切，将页面图层内视频区域位置的像素参数清零，使得页面图层在视频窗口位置为全透明，避免了页面图层对视频图层的遮挡，保证视频正常显示、播放。

附图说明

为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为根据实施例中机顶盒的使用场景的示意图；

图2为本申请实施例提供的一种带有视频窗口的页面显示方法流程示意图；

图3为本申请实施例提供的一种智能机顶盒结构示意图；

图4为本申请实施例提供的一种信令流程示意图。

具体实施方式

为便于对申请的技术方案进行解释，以下首先在对本申请所涉及到的一些概念进行说明。

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

需要说明的是，本申请中对于术语的简要说明，仅是为了方便理解接下来描述的实施方式，而不是意图限定本申请的实施方式。除非另有说明，这些术语应当按照其普通和通常的含义理解。

本申请中说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”等是用于区别类似或同类的对象或实体，而不必然意味着限定特定的顺序或先后次序，除非另外注明。应该理解这样使用的用语在适当情况下可以互换。

术语“包括”和“具有”以及他们的任何变形，意图在于覆盖但不排他的包含，例如，包含了一系列组件的产品或设备不必限于清楚地列出的所有组件，而是可包括没有清楚地列出的或对于这些产品或设备固有的其它组件。

术语“模块”是指任何已知或后来开发的硬件、软件、固件、人工智能、模糊逻辑或硬件或/和软件代码的组合，能够执行与该元件相关的功能。

图1为根据实施例中机顶盒的使用场景的示意图。如图1所示，机顶盒100，是一个连接显示设备200与服务器400的设备。它可以将压缩的数字信号转成电视内容，并在显示装置上显示出来。

显示设备200与服务器400进行数据通信，用户可通过智能设备300或控制装置500操作显示设备200。

在一些实施例中，控制装置500可以是遥控器，遥控器和显示设备的通信包括红外协议通信或蓝牙协议通信，及其他短距离通信方式中的至少一种，通过无线或有线方式来控制显示设备200。用户可以通过遥控器上按键、语音输入、控制面板输入等至少一种输入用户指令，来控制显示设备200。

在一些实施例中，智能设备300可以包括移动终端、平板电脑、计算机、笔记本电脑，AR/VR设备等中的任意一种。

在一些实施例中，也可以使用智能设备300以控制显示设备200。例如，使用在智能设备上运行的应用程序java层控制显示设备200。

在一些实施例中，也可以使用智能设备300和显示设备进行数据的通信。

在一些实施例中，显示设备200还可以采用除了控制装置500和智能设备300之外的方式进行控制，例如，可以通过显示设备200设备内部配置的获取语音指令的模块直接接收用户的语音指令控制，也可以通过显示设备200设备外部设置的语音控制装置来接收用户的语音指令控制。

在一些实施例中，机顶盒还与服务器400进行数据通信。可允许机顶盒100通过局域网(LAN)、无线局域网(WLAN)和其他网络进行通信连接。服务器400可以向机顶盒100提供各种内容和互动。服务器400可以是一个集群，也可以是多个集群，可以包括一类或多类服务器。

在一些实施例中，一个步骤执行主体执行的软件步骤可以随需求迁移到与之进行数据通信的另一步骤执行主体上进行执行。示例性的，服务器执行的软件步骤可以随需求迁移到与之数据通信的显示设备上执行，反之亦然。

控制装置500还可与机顶盒100通信连接，通常控制装置与机顶盒通过红外协议通信，机顶盒接收控制装置的通信信号，完成用户遥控操作。

机顶盒100可以是外设置于显示设备壳体外侧，可也内置于显示设备内部。

在IPTV软件中，播放器和浏览器独立工作，只通过消息通道传递播放器状态。播放器模块输出播放图层，和浏览器模块输出的页面图层，呈现是独立的两个android GL图层，最终在android层叠加输出。播放图层在页面图层之下，这样保证视频不会遮挡页面。

在一些带有小视频窗口的页面里，页面中会有一个div元素来描述视频窗口，此div元素的id名称为video。这个div元素的位置和样式由页面开发者设计。通常，视频以小窗口的样式进行显示，如果页面图层的div元素的位置，具有背景图片，则对视频造成遮挡，影响用户感观。

为解决以上问题，本申请提供了一种带有视频窗口的页面显示方法，适用于机顶盒，也适用于手机、计算机等嵌入式设备。通过将页面图层中播放图层所在位置，进行接剪切，使得页面图层中播放图层所在位置显示为空，避免页面图层对播放图层进行遮挡。

图2为本申请实施例提供的一种带有视频窗口的页面显示方法流程示意图。如图2中所示，本申请公开了一种带有视频窗口的页面显示方法，其流程如下：

服务器端发送网页信息。网页信息为html(超文本)页面。

通常，机顶盒与服务器通信连接，机顶盒内是有浏览器，浏览器对网页信息进行解析，生成节点树结构，节点树结构中的每个节点采用div元素进行表述。div元素是超文本语言里面一个块级元素，元素包括元素地址、位置、透明度信息。

节点树是html页面经过浏览器解析后生产的数据，这个数据结构中，每种html元素的所有属性都通过结构体来描述。

IPTV行业规范中要求超文本页面内含有小窗口视频时，小窗口视频的元素地址采用video来标识。即，本申请中预设小窗口元素标识video，如果节点树结构中存在元素地址为预设小窗口元素标识的元素，则超文本页面内含有小窗口视频，并将元素地址为预设小窗口元素标识的元素命名为视频节点。

浏览器呈现这些元素时，大概的流程是先根据div关系进行解析，创建节点树。针对每个div占用的位置创建各自图层。并将这些图层叠加，最终渲染合成呈现出来，要以下将浏览器最终生成的图层称为页面图层。

浏览器设置应用程序Java层和浏览器内核，应用程序Java层用于对网页信息进行解析、图层输出。浏览器内核负责页面布局、渲染、合成工作。

当浏览器的应用程序Java层解析到页面中javascript代码中有创建播放器和播放的代码时，则通过特定通道通知播放器创建播放器并去根据视频地址去播放。播放器的视频图层是播放器创建的，视频图层是在页面图层的后面。

应用程序Java层设置数据解析模块，用于对网页信息进行解析，生成解析后网页信息。

浏览器的应用程序Java层将视频地址发送至播放器，播放器创建播放器实例，视频图层根据视频地址进行视频的播放。

为了明确视频窗口在显示屏中的准确位置，本申请根据视频节点的信息，计算视频区域在显示屏中的位置信息。

视频节点中包含视频的位置信息，该位置信息通常为相对于原始网页的位置参数，进行显示时，将该位置信息转换为相对于显示屏幕的绝对位置参数。具体的，按照IPTV规范描述播放器信息的脚本代码的函数中找到视频区域在屏幕的绝对位置的四个参数X、Y、Width、Height。视频区域为小窗口视频的播放区域。

其中，X为视频区域在显示屏幕的左位置起点位置，Y为视频区域在显示屏幕中上端位置起点。Width即视频区域的宽度，Height即视频区域的高度。因此，可知视频区域的坐上起始位置，及长度、宽度，即可知道视频区域在显示屏幕的绝对位置。

播放器接收视频地址和视频节点信息，创建播放器实例。播放器根据javascript中代码创建播放器实例，并根据播放来源的参数开始播放节目，同时根据位置参数X、Y、Width、Height，将视频缩小到播放区域，形成播放图层。播放图层中视频的播放区域为视频区域在显示屏幕的绝对位置。

浏览器的应用程序Java层设置位置监听模块，根据播放区域的位置信息判断视频窗口是否为小窗口视频。如果，视频窗口是否为小窗口视频，浏览器的应用程序Java层对页面图层进行剪切，将视频窗口所在的播放区域内图层剪切掉，形成空白区域。

具体的，浏览器的应用程序Java层设置位置监听模块，通过播放区域的位置信息与网页位置信息进行比对，如果播放区域的位置信息与网页位置信息一致，则视频窗口不是小窗口视频。如果播放区域的位置信息与网页位置信息不一致，则视频窗口是小窗口视频。

浏览器的应用程序Java层设置glScissor接口，将浏览器输出的每一帧页面图层的位置都进行剪切。在本申请的一些实施例中，应用程序Java层通过glScissor接口对每一帧页面图层中对应播放区域进行清零。

在本申请实施例中，应用程序Java层使用glsurfaceview类绑定绘制浏览器输出，因此浏览器输入图层任何的变化，都会回调执行Glsurfaceview的一个方法onDrawFrame。在onDrawFrame函数内，执行浏览器的绘制函数接口drawgl()实现浏览器内容最终绘制。

在本申请实施例中，应用程序Java层生成显示页面后，即执行drawgl()后，则需要再调用glScissor接口，播放视频的四个位置参数作为glScissor函数的四个参数，glScissor函数执行后，被清零的区域图层的像素参数A(alpha)、R(red)、G(green)、B(blue)参数都被修改为0，实现了对绘制后的图层进行剪切的效果。

通过以上实施例，浏览器的应用程序Java层设置位置监听模块，当播放区域的位置信息与网页位置信息不一致时，将页面图层中播放图层所在位置，进行接剪切，使得页面图层中播放图层所在位置显示为空，避免页面图层对播放图层进行遮挡。

应用程序Java层接收到停止播放指令，不对页面图层进行剪切。

另一方面，本申请还公开了一种智能机顶盒，包括：浏览器和播放器，其中，浏览器包括：应用程序Java层和浏览器内核，应用程序Java层用于对网页信息进行解析、图层输出。浏览器内核负责页面布局、渲染、合成工作。播放器与应用程序Java层和浏览器内核通信连接。如图3中所示。

图3为本申请实施例提供的智能机顶盒结构示意图，图4为本申请实施例提供的智能机顶盒的带有视频窗口的页面显示信令流程图。如图中所示，应用程序Java层接收服务器发送的网页信息，并对网页信息进行解析。网页信息为html(超文本)页面。应用程序Java层将解析后的网页信息发送至浏览器内核，浏览器内核根据解析后的网页信息进行页面布局、渲染与合成，生成页面图层。应用程序Java层将解析后的视频信息发送至播放器，视频信息包括视频地址和播放器位置信息。播放器根据视频信息生成视频图层，并将视频图层输出至应用程序Java层，应用程序Java层根据播放器位置信息对页面图层进行剪切，剪切后的页面图层和视频图层进行合成，并将合成后的显示图层输出至显示屏幕。

在本申请实施例中，为对页面图层进行剪切，应用程序Java层还设置位置监听模块，根据播放区域的位置信息判断视频窗口是否为小窗口视频。如果，视频窗口是否为小窗口视频，浏览器的应用程序Java层对页面图层进行剪切，将视频窗口所在的播放区域内图层剪切掉，形成空白区域。

具体的，浏览器的应用程序Java层设置位置监听模块，通过播放区域的位置信息与网页位置信息进行比对，如果播放区域的位置信息与网页位置信息一致，则视频窗口不是小窗口视频。如果播放区域的位置信息与网页位置信息不一致，则视频窗口是小窗口视频。

浏览器的应用程序Java层设置glScissor接口，将浏览器输出的每一帧页面图层的位置都进行剪切。在本申请的一些实施例中，应用程序Java层通过glScissor接口对每一帧页面图层中对应播放区域进行剪切。应用程序Java根据播放器位置信息对页面图层进行剪切，剪切后的页面图层和视频图层进行合成，并将合成后的显示图层输出至显示屏幕。合成时，页面图层位于视频图层的上方。通过对页面图层中视频区域位置进行剪切，避免页面图层对视频的遮挡。

由于以上实施方式均是在其他方式之上引用结合进行说明，不同实施例之间均具有相同的部分，本说明书中各个实施例之间相同、相似的部分互相参见即可。在此不再详细阐述。

本领域技术人员在考虑说明书及实践本申请的公开后，将容易想到本申请的其他实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由权利要求的内容指出。

以上所述的本申请实施方式并不构成对本申请保护范围的限定。

Claims (10)

1.一种带有视频窗口的页面显示方法，其特征在于，包括：

应用程序Java层接收网页信息，并对所述网页信息进行解析；

浏览器内核根据解析后的网页信息生成页面图层；

播放器根据视频信息生成视频图层，并将视频图层输出至所述应用程序Java层；

所述应用程序Java层根据所述视频信息的视频位置，将所述页面图层中所述视频位置的像素参数清零，将清零后的页面图层与所述视频图层合成生成显示图层。

2.根据权利要求1所述的带有视频窗口的页面显示方法，其特征在于，所述所述页面图层中所述视频位置的像素参数清零，包括：

所述应用程序Java层调用glScissor接口，将所述页面图层中所述视频位置参数内对应的像素参数修改为0，所述像素参数包括像素颜色和像素透明度。

3.根据权利要求1所述的带有视频窗口的页面显示方法，其特征在于，所述播放器根据视频信息生成视频图层，包括：

所述播放器接收视频信息，所述视频信息包括视频地址和位置信息；

所述播放器根据所述视频地址创建播放实例；

所述播放器将所述播放实例显示至所述位置信息对应的位置。

4.根据权利要求1所述的带有视频窗口的页面显示方法，其特征在于，所述播放器根据视频信息生成视频图层，包括：

所述播放器接收视频信息，所述视频信息包括视频地址和绝对位置参数；

所述播放器根据所述视频地址创建播放实例；

所述播放器将所述播放实例显示至所述绝对位置参数对应的位置，所述绝对位置参数为所述播放器在显示屏幕的位置参数。

5.根据权利要求4所述的带有视频窗口的页面显示方法，其特征在于，所述对所述页面图层中相应位置进行剪切还包括：

所述应用程序Java层将所述绝对位置参数与显示屏幕参数进行比对；

所述绝对位置参数与显示屏幕参数一致，则对所述页面图层中相应位置进行剪切；

所述绝对位置参数与显示屏幕参数不一致，则不对所述页面图层中相应位置进行剪切。

6.根据权利要求4所述的带有视频窗口的页面显示方法，其特征在于，所述应用程序Java层根据所述视频信息的视频位置，对所述页面图层中相应位置进行剪切包括：

应用程序Java层接收所述绝对位置参数，对所述页面图层的所述绝对位置参数对应的区域进行剪切。

7.根据权利要求1所述的带有视频窗口的页面显示方法，其特征在于，还包括：所述清零后的页面图层设置于所述视频图层的下方，所述清零后的页面图层与所述视频图层合成生成显示图层。

8.一种智能机顶盒，其特征在于，包括：

播放器，用于根据视频信息创建播放图层；

浏览器内核，根据解析后的网页信息创建页面图层；

浏览器Java层，用于根据所述视频信息中的位置信息对所述页面图层进行剪切，将所述播放图层与剪切后的页面图层合成为显示图层。

9.根据权利要求8所述的智能机顶盒，其特征在于，所述浏览器Java层包括：位置监听模块，用于获取所述播放图层中，视频在显示屏幕的绝对位置参数；

glScissor接口，用于将所述页面图层中所述绝对位置参数对应位置的像素参数修改为0，所述像素参数包括像素颜色和像素透明度。

10.根据权利要求8所述的智能机顶盒，其特征在于，所述浏览器Java层包括：数据解析模块，用于接收网页信息，并对所述网页信息进行解析。

Images