CN108052565A - 一种页面的透明处理方法及装置 - Google Patents

Abstract

本发明公开了一种页面的透明处理方法及装置，包括：在视频播放的过程中，若浏览器接收到web页面的显示指令，加载显示指令对应的目标web页面，对目标web页面进行预显示处理，并获取视频的播放窗口参数。浏览器对目标web页面中的预设的标签层进行渲染后，依据获取到的视频的播放窗口参数对预设的标签层进行透明处理。由此可知，通过对浏览器的改造，在浏览器在加载了目标web页面后，根据正在播放的视频的播放窗口参数，对目标web页面的预设标签层进行渲染，这样生成的目标web页面不仅不会对视频画面造成遮挡，而且，对于一些特殊的web页面，也可以在终端上显示。

Description

一种页面的透明处理方法及装置

技术领域

本发明涉及视频处理领域，尤其涉及一种页面的透明处理及装置。

背景技术

在播放视频时，若需要对web页面进行显示，通常情况下，web页面会覆盖正在播放的视频页面，在这种情况下，用户只能听到视频的声音，而无法看到视频画面。

为了解决以上问题，目前，web页面在开发时，会根据需要，在编写页面代码的时候，会在视频要播放的区域，填充一个透明的背景投片或者将背景样式设置为透明色。这样，当视频和web页面重叠的情况下，就可以通过web页面的透明背景看到视频画面。

但是，这种方式依赖于web页面的开发，对于未进行透明设置的web页面，还是会存在web页面覆盖视频画面的问题。

发明内容

有鉴于此，本发明实施例提供了一种页面的透明处理方法及装置，解决了现有技术中，浏览器在加载了未进行透明设置的web页面后，会存在web页面覆盖视频画面的问题。

本发明实施例公开的一种页面的透明处理方法，包括：

在视频的播放过程中，若浏览器接收到web页面的显示指令，加载所述显示指令对应的目标web页面；

所述浏览器对所述目标web页面进行预显示处理；

所述浏览器获取所述视频的播放窗口参数；

所述浏览器对所述目标web页面的预设的标签层进行渲染，并依据所述视频的播放窗口参数对所述预设的标签层进行透明处理。

可选的，所述播放参数包括：所述视频的播放窗口坐标和尺寸。

可选的，所述预设的标签层为所述目标web页面多个标签层中的最底层。

可选的，所述浏览器对所述目标web页面进行预显示处理，包括：

所述浏览器解析所述目标web页面；

所述浏览器对所述目标web页面进行页面布局。

可选的，所述浏览器对所述目标web页面的预设的标签层进行渲染，并依据所述视频的播放窗口参数对所述预设的标签层进行透明处理，包括：

对所述web页面的预设标签层的背景进行渲染，得到所述预设标签层的背景图像；

依据所述视频的播放窗口参数，确定所述预设标签层的背景图像的透明处理区域；

对所述预设标签层的背景图像的透明处理区域中的各个像素点进行透明处理。

可选的，还包括：

当所述浏览器接收到所述视频的播放指令后，获取所述播放指令的视频播放资源；

所述浏览器保存所述视频的播放资源中视频的播放窗口参数。

本发明实施例公开的一种页面的透明处理装置，包括：

加载单元，用于在视频的播放过程中，若浏览器接收到web页面的显示指令，加载所述显示指令对应的目标web页面；

预显示处理单元，用于所述浏览器对所述目标web页面进行预显示处理；

第一获取单元，用于所述浏览器获取所述视频的播放窗口参数；

透明处理单元，用于所述浏览器对所述目标web页面的预设的标签层进行渲染，并依据所述视频的播放窗口参数对所述预设的标签层进行透明处理。

可选的，所述播放参数包括：所述视频的播放窗口坐标和尺寸。

可选的，所述预设的标签层为所述目标web页面多个标签层中的最底层。

可选的，所述透明处理单元，包括：

渲染子单元，用于对所述web页面的预设标签层的背景进行渲染，得到所述预设标签层的背景图像；

确定子单元，用于依据所述视频的播放窗口参数，确定所述预设标签层的背景图像的透明处理区域；

透明处理子单元，用于对所述预设标签层的背景图像的透明处理区域中的各个像素点进行透明处理。

本发明实施例提供的一种页面的透明处理方法及装置，包括：在视频播放的过程中，若浏览器接收到web页面的显示指令，加载显示指令对应的目标web页面，对目标web页面进行预显示处理，并获取视频的播放窗口参数。浏览器对目标web页面中的预设的标签层进行渲染后，依据获取到的视频的播放窗口参数对预设的标签层进行透明处理。由此可知，通过对浏览器的改造，在浏览器在加载了目标web页面后，根据正在播放的视频的播放窗口参数，对目标web页面的预设标签层进行渲染，这样生成的目标web页面不仅不会对视频画面造成遮挡，而且，对于一些特殊的web页面，也可以在终端上显示。

附图说明

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

图1示出了本发明实施例提供的一种页面的透明处理方法的流程示意图；

图2示出了本发明实施例提供的页面分层的示意图；

图3示出了本发明实施例提供的本发明实施例提供的一种页面透明处理方法的流程示意图；

图4示出了本发明实施例提供的渲染过程的场景示意图；

图5示出了本发明实施例提供的透明处理后的效果示意图；

图6示出了本发明实施例提供的一种页面的透明处理装置的结构示意图。

具体实施方式

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

为了方便理解本方案，对本实施例中遇到的一些技术进行说明：

中间件是机顶盒的核心软件，中间件包括：浏览器、视频播放器和dvb码流解析器。

其中，通过中间件实现的功能可以包括：视频播放和web页面显示；

针对于视频播放，当需要进行视频播放时，浏览器通过解析网页，获取视频播放的地址和其它的视频播放信息，并将视频播放地址和其它的视频播放信息发送给播放器，视频播放器请求视频播放资源，并对待播放的视频进行处理后，输出到视频层对应的相关内存区域中。

针对于web页面显示，当需要显示页面时，浏览器加载页面，对该页面进行解析、页面布局和渲染，将渲染后的图像的像素点输出到OSD层。其中，OSD层为系统划分出来用于保存由浏览器渲染页面，产生的图像的像素点。

OSD层处于视频层的上面，当OSD层和视频层同时有像素数据的情况下，OSD层的图像就会遮挡视频层的图像。

参考图1，示出了本发明实施例提供的一种页面的透明处理方法的流程示意图，在本实施例中，该方法包括：

S101：在视频播放的过程中，若浏览器接收到web页面的显示指令，加载所述显示指令对应的目标web页面；

S102：所述浏览器对所述目标web页面进行预显示处理；

本实施例中，浏览器在接收到web页面的显示指令后，需要加载目标显示页面，但是，在将页面显示在终端设备上之前，还需要对目标显示页面进行页面布局、渲染等操作，具体的，S102包括：

解析所述目标web页面；

对所述目标web页面进行页面布局。

S103：所述浏览器获取所述视频的播放窗口参数；

本实施例中，S103中提到的视频为在浏览器接收到web页面的显示指令时，经过该浏览器处理后正在播放的视频。

为了保证浏览器在对web页面进行透明处理时，可以快速的调取正在播放视频的播放窗口参数，在获取该视频的资源后，保存了该视频的播放窗口参数，具体的，还包括：

当所述浏览器接收到所述视频的播放指令后，获取所述视频的播放资源；

所述浏览器保存所述视频的播放资源中视频的播放窗口参数。

其中，视频的播放窗口参数包括：播放所述视频的播放窗口坐标和窗口尺寸。

举例说明：视频的播放窗口参数可以通过(x,y,w,h)表示，其中x表示：离屏幕左上角左边的像素数，y表示：离屏幕下方的像素数；w表示：窗口的宽度；h表示窗口的高度。通过以上这些参数就可以表示播放视频的窗口的位置和尺寸。

本实施例中，将视频的播放窗口参数保存在浏览器中，当需要根据该播放参数对web页面进行透明处理时，可以方便快捷的调取该视频的播放窗口参数。

需要说明的是，播放窗口参数的获取可以是在执行S102中的解析目标web页面的步骤时，获取到的，具体的，执行过程可以为：

解析所述目标web页面，并获取所述视频的播放窗口参数；

对所述目标web页面进行页面布局；

对所述页面布局后的目标web页面进行分层渲染。

S104：所述浏览器对所述目标web页面的预设的标签层进行渲染，并依据所述视频的播放窗口参数对所述预设的标签层进行透明处理。

本实施例中，在对目标web页面进行渲染时，会根据页面的各个元素的属性和各个属性的从属关系，将目标web页面分成多个标签层，并分层对目标web页面进行渲染，具体的，是从下往上一层一层的渲染。渲染后，渲染之后上面的标签层会覆盖下面的标签层。

举例说明：参考图2，假设目标页面分层后的结果包括：最下层为body标签层，中间层为div标签层，最上层为text标签层；在进行分层渲染时，渲染顺序可以为：body标签层-div标签层-text标签层。

其中，对每一标签层进行渲染时，也要根据每层包含的不同内容对每个标签层进行渲染。具体的，对某一层进行渲染时，可以是先渲染该层的背景图片或者背景色，然后渲染该标签层的前景图片、前景色或者文字等信息。

为了保证目标web页面不遮挡视频画面，可以对目标web页面进行透明处理，为了保证在视频播放的同时，对于出现的提示框等特殊页面也可以进行显示，在对目标web页面渲染的过程中，只对其中的一个标签层或者多个标签层进行透明处理。优选的，在本实施例中，可以只对目标web页面的多个标签层中的最底层进行透明处理，即预设标签层为目标页面中的多个标签层的最底层。

本实施例中，每个标签层又包括：背景、前景、文字等信息，在本实施例中可以只对预设标签层中的背景进行透明处理，具体的，参考图3，包括：

S201：对所述web页面的预设标签层的背景进行渲染，得到所述预设标签层的背景图像；

S202：依据所述视频的播放窗口参数，确定所述预设标签层的背景图像的透明处理区域；

S203：对所述预设标签层的背景图像的透明处理区域中的各个像素点进行透明处理。

参考图4，对预设标签层渲染时，先对预设标签层的背景进行渲染，渲染后得到预设标签层的背景图像。根据视频的播放窗口的位置和尺寸等参数，在背景图像中找到与视频的播放窗口的位置和尺寸相对应的区域，即透明处理区域，并将该透明处理区域的各个像素点进行透明处理。

举例说明：假设视频的播放窗口位置和尺寸信息为(100,100,200,200)，即离屏幕左上角左边100像素，离屏幕下边100像素，窗口宽度为200像素，窗口高度为200像素。在背景图像中找到(100,200,200,200)相对应的位置，该位置为透明处理区域，并对该透明处理区域中的各个像素点进行透明处理。

其中，每个像素点的像素值可以表示为(A，R，G，B)，R,G,B表示三原色的值，取值范围为0-255，A表示透明位，取值范围为0-255,0表示该像素点为透明，255表示该像素点不透明，在确定了透明处理区域后，可以将透明处理区域中的所有像素点的透明位置0。

本实施例中，如图5所示，当对目标web页面的预设标签层中的背景图像进行透明处理后，不会遮挡这在播放的视频画面。并且，若出现其他层的提示框，提示框仍然会进行显示，不会导致提示框用户无法查看的情况。

本实施例中，在视频播放的过程中，若浏览器接收到web页面的显示指令，加载显示指令对应的目标web页面，对目标web页面进行预显示处理，并获取视频的播放窗口参数。浏览器对目标web页面中的预设的标签层进行渲染后，依据获取到的视频的播放窗口参数对预设的标签层进行透明处理。由此可知，通过对浏览器的改造，在浏览器在加载了目标web页面后，根据正在播放的视频的播放窗口参数，对目标web页面的预设标签层进行渲染，这样生成的目标web页面不仅不会对视频画面造成遮挡，而且，对于一些特殊的web页面，也可以在终端上显示。

参考图6，示出了本发明实施例提供的一种页面的透明处理装置的结构示意图，在本实施例中，该装置包括：

加载单元301，用于在视频的播放过程中，若浏览器接收到web页面的显示指令，加载所述显示指令对应的目标web页面；

预显示处理单元302，用于所述浏览器对所述目标web页面进行预显示处理；

第一获取单元303，用于所述浏览器获取所述视频的播放窗口参数；

透明处理单元304，用于所述浏览器对所述目标web页面的预设的标签层进行渲染，并依据所述视频的播放窗口参数对所述预设的标签层进行透明处理。

可选的，所述播放参数包括：所述视频的播放窗口坐标和尺寸。

可选的，所述预设的标签层为所述目标web页面多个标签层中的最底层。

可选的，所述透明处理单元，包括：

渲染子单元，用于对所述web页面的预设标签层的背景进行渲染，得到所述预设标签层的背景图像；

确定子单元，用于依据所述视频的播放窗口参数，确定所述预设标签层的背景图像的透明处理区域；

透明处理子单元，用于对所述预设标签层的背景图像的透明处理区域中的各个像素点进行透明处理。

通过本实施例的装置，在浏览器在加载了目标web页面后，根据正在播放的视频的播放窗口参数，对目标web页面的预设标签层进行渲染，这样生成的目标web页面不仅不会对视频画面造成遮挡，而且，对于一些特殊的web页面，也可以在终端上显示。

可选的，所述预显示处理单元，具体用于：

所述浏览器解析所述目标web页面；

所述浏览器对所述目标web页面进行页面布局。

可选的，还包括：

第二获取单元，用于当所述浏览器接收到所述视频的播放指令后，获取所述播放指令的视频播放资源；

保存单元，用于所述浏览器保存所述视频的播放资源中视频的播放窗口参数。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种页面的透明处理方法，其特征在于，包括：

在视频的播放过程中，若浏览器接收到web页面的显示指令，加载所述显示指令对应的目标web页面；

所述浏览器对所述目标web页面进行预显示处理；

所述浏览器获取所述视频的播放窗口参数；

所述浏览器对所述目标web页面的预设的标签层进行渲染，并依据所述视频的播放窗口参数对所述预设的标签层进行透明处理。

2.根据权利要求1所述的方法，其特征在于，所述播放参数包括：所述视频的播放窗口坐标和尺寸。

3.根据权利要求1所述的方法，其特征在于，所述预设的标签层为所述目标web页面多个标签层中的最底层。

4.根据权利要求1所述的方法，其特征在于，所述浏览器对所述目标web页面进行预显示处理，包括：

所述浏览器解析所述目标web页面；

所述浏览器对所述目标web页面进行页面布局。

5.根据权利要求1所述的方法，其特征在于，所述浏览器对所述目标web页面的预设的标签层进行渲染，并依据所述视频的播放窗口参数对所述预设的标签层进行透明处理，包括：

对所述web页面的预设标签层的背景进行渲染，得到所述预设标签层的背景图像；

依据所述视频的播放窗口参数，确定所述预设标签层的背景图像的透明处理区域；

对所述预设标签层的背景图像的透明处理区域中的各个像素点进行透明处理。

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

当所述浏览器接收到所述视频的播放指令后，获取所述播放指令的视频播放资源；

所述浏览器保存所述视频的播放资源中视频的播放窗口参数。

7.一种页面的透明处理装置，其特征在于，包括：

加载单元，用于在视频的播放过程中，若浏览器接收到web页面的显示指令，加载所述显示指令对应的目标web页面；

预显示处理单元，用于所述浏览器对所述目标web页面进行预显示处理；

第一获取单元，用于所述浏览器获取所述视频的播放窗口参数；

透明处理单元，用于所述浏览器对所述目标web页面的预设的标签层进行渲染，并依据所述视频的播放窗口参数对所述预设的标签层进行透明处理。

8.根据权利要求7所述的装置，其特征在于，所述播放参数包括：所述视频的播放窗口坐标和尺寸。

9.根据权利要求7所述的装置，其特征在于，所述预设的标签层为所述目标web页面多个标签层中的最底层。

10.根据权利要求7所述的装置，其特征在于，所述透明处理单元，包括：

渲染子单元，用于对所述web页面的预设标签层的背景进行渲染，得到所述预设标签层的背景图像；

确定子单元，用于依据所述视频的播放窗口参数，确定所述预设标签层的背景图像的透明处理区域；

透明处理子单元，用于对所述预设标签层的背景图像的透明处理区域中的各个像素点进行透明处理。