CN113676766A - 浏览器视频显示方法及装置、存储介质及电子设备 - Google Patents

Abstract

本公开涉及视频显示技术领域，提供了一种浏览器视频显示方法及装置、计算机可读存储介质和电子设备。其中，该方法包括：在确定浏览器当前待显示页面的播放模式为窗口播放时，获取浏览器当前待显示页面中视频显示区域的位置信息；基于浏览器当前待显示页面对应的渲染层次树，获取当前待显示页面中页面元素的布局信息；在确定页面元素的布局与视频显示区域的位置存在重叠部分时，对存在重叠部分的页面元素进行透明化处理，以得到目标显示页面；基于目标显示页面，在视频显示区域进行视频显示。本方案基于对重叠的页面元素进行透明化处理，可以在小窗口播放时，避免浏览器页面元素对视频的遮挡，提高浏览器视频显示的准确性。

Description

浏览器视频显示方法及装置、存储介质及电子设备

技术领域

本公开涉及视频显示技术领域，具体而言，涉及一种浏览器视频显示方法、浏览器视频显示装置、计算机可读存储介质以及电子设备。

背景技术

视频播放是IPTV(交互式网络电视)浏览器的核心功能。通常，IPTV浏览器的视频播放分为全屏播放和小窗口两种模式。

对于小窗口播放模式而言，存在视频播放区域被页面元素进行遮挡而导致视频画面无法正常显示的问题。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开的目的在于提供一种浏览器视频显示方法、浏览器视频显示装置、计算机可读存储介质、电子设备，进而至少在一定程度上改善浏览器小窗口视频播放时，页面元素对视频显示区域存在遮挡的问题。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开的第一方面，提供了一种浏览器视频显示方法，包括：

在确定浏览器当前待显示页面的播放模式为窗口播放时，获取所述浏览器当前待显示页面中视频显示区域的位置信息；

基于浏览器当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息；

在确定所述页面元素的布局与所述视频显示区域的位置存在重叠部分时，对存在重叠部分的所述页面元素进行透明化处理，以得到目标显示页面；

基于所述目标显示页面，在所述视频显示区域进行视频显示。

在本公开的一种示例性实施例中，基于前述方案，所述对存在重叠部分的所述页面元素进行透明化处理，包括：

根据重叠元素的元素标识和重叠区域的绝对位置坐标以及尺寸信息，对所述元素标识对应的页面元素中的重叠区域进行透明化处理；

其中，所述重叠元素包括与所述视频显示区域的位置存在重叠部分的页面元素。

在本公开的一种示例性实施例中，基于前述方案，所述根据重叠元素的元素标识和重叠区域的绝对坐标以及尺寸信息，对所述元素标识对应的页面元素中的重叠区域进行透明化处理，包括：

将所述重叠元素的元素标识和重叠元素对应的重叠区域的绝对坐标以及尺寸信息确定为预设透明化处理代码的参数，以生成目标透明化处理代码；

获取浏览器的当前运行环境，将所述目标透明化处理代码注入到所述当前运行环境中，以对所述元素标识对应的页面元素的重叠区域进行透明化处理。

在本公开的一种示例性实施例中，基于前述方案，所述获取所述浏览器当前待显示页面中视频显示区域的位置信息，包括：

基于浏览器当前待显示页面对应的页面对象的视频区域设置方法，获取浏览器当前待显示页面中视频显示区域在图形用户界面中的绝对位置坐标和显示尺寸。

在本公开的一种示例性实施例中，基于前述方案，所述基于浏览器当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息，包括：

遍历浏览器当前待显示页面对应的渲染层次树，获取当前待显示页面中每个页面元素在图形用户界面中的绝对位置坐标和显示尺寸。

在本公开的一种示例性实施例中，基于前述方案，所述方法还包括：

在浏览器启动后，对显示浏览器页面元素控件的画板进行透明化处理。

在本公开的一种示例性实施例中，基于前述方案，所述基于所述目标显示页面，在所述视频显示区域进行视频显示，包括：

将浏览器页面元素控件叠加在浏览器视频显示控件上方，以在所述目标显示页面的视频显示区域中进行视频显示。

根据本公开的第二方面，提供了一种浏览器视频显示装置，包括：

视频显示区域确定模块，被配置为在确定浏览器当前待显示页面的播放模式为窗口播放时，获取所述浏览器当前待显示页面中视频显示区域的位置信息；

元素布局信息获取模块，被配置为基于浏览器当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息；

透明化处理模块，被配置为在确定所述页面元素的布局与所述视频显示区域的位置存在重叠部分时，对存在重叠部分的所述页面元素进行透明化处理，以得到目标显示页面；

视频显示模块，被配置为基于所述目标显示页面，在所述视频显示区域进行视频显示。

根据本公开的第三方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上述实施例中第一方面所述的浏览器视频显示方法。

根据本公开实施例的第四方面，提供了一种电子设备，包括：处理器；以及，存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上述实施例中第一方面所述的浏览器视频显示方法。

由上述技术方案可知，本公开示例性实施例中的浏览器视频显示方法、浏览器视频显示装置，以及实现所述浏览器视频显示方法的计算机可读存储介质及电子设备，至少具备以下优点和积极效果：

在本公开的一些实施例所提供的技术方案中，在确定浏览器的播放模式为窗口播放时，首先，获取所述浏览器当前待显示页面中视频显示区域的位置信息；然后，基于浏览器的当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息；其次，在确定所述当前待显示页面中页面元素的布局与所述视频显示区域的位置存在重叠部分时，对存在重叠部分的所述页面元素进行透明化处理，以得到目标显示页面；最后，基于所述目标显示页面，在所述视频显示区域进行视频显示。与相关技术相比，本公开通过判断浏览器的视频显示区域和页面元素的布局是否存在重叠，从而可以在视频显示之前，对存在重叠的页面元素进行透明化处理，进而避免页面元素对视频显示区域造成遮挡，提高浏览器视频显示的准确性。

本公开应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出本公开一示例性实施例中浏览器视频显示方法的流程示意图；

图2示出本公开一示例性实施例中对页面元素进行透明化处理的方法的流程示意图；

图3示出本公开一示例性实施例中的浏览器视频显示装置的结构示意图；

图4示出本公开一示例性实施例中可以应用本公开的浏览器显示方法及装置的浏览器视频显示系统的整体架构图；

图5示出本公开一示例性实施例中的浏览器视频显示系统中的浏览器内核重合解析模块处理时机图；

图6示出本公开一示例性实施例中的另一种浏览器视频显示方法的流程示意图；

图7示出本公开一示例性实施例中基于EPG中间件进行视频显示处理的方法的流程示意图；

图8示出本公开示例性实施例中计算机存储介质的结构示意图；

图9示出本公开示例性实施例中电子设备的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知技术方案以避免喧宾夺主而使得本公开的各方面变得模糊。

本说明书中使用用语“一个”、“一”、“该”和“所述”用以表示存在一个或多个要素/组成部分/等；用语“包括”和“具有”用以表示开放式的包括在内的意思并且是指除了列出的要素/组成部分/等之外还可存在另外的要素/组成部分/等；用语“第一”和“第二”等仅作为标记使用，不是对其对象的数量限制。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。

视频播放是IPTV(交互式网络电视)浏览器的核心功能。通常，IPTV浏览器的视频播放分为全屏播放和小窗口两种模式。

对于小窗口播放模式而言，存在视频播放区域被页面元素进行遮挡而导致视频画面无法正常显示的问题。

在本公开的实施例中，首先提供了一种浏览器视频显示方法，至少在一定程度上克服上述相关技术中存在的缺陷。

图1示出本公开一示例性实施例中的浏览器视频显示方法。参考图1，该方法包括：

步骤S110，在确定浏览器当前待显示页面的播放模式为窗口播放时，获取所述浏览器当前待显示页面中视频显示区域的位置信息；

步骤S120，基于浏览器当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息；

步骤S130，在确定所述页面元素的布局与所述视频显示区域的位置存在重叠部分时，对存在重叠部分的所述页面元素进行透明化处理，以得到目标显示页面；

步骤S140，基于所述目标显示页面，在所述视频显示区域进行视频显示。

在图1所示实施例所提供的技术方案中，确定浏览器的播放模式为窗口播放时，首先，获取所述浏览器当前待显示页面中视频显示区域的位置信息；然后，基于浏览器的当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息；其次，在确定所述当前待显示页面中页面元素的布局与所述视频显示区域的位置存在重叠部分时，对存在重叠部分的所述页面元素进行透明化处理，以得到目标显示页面；最后，基于所述目标显示页面，在所述视频显示区域进行视频显示。与相关技术相比，本公开通过对浏览器的视频显示区域和页面元素的重叠判断，从而可以在视频显示之前，对存在重叠的页面元素进行透明化处理，进而避免存在重叠的页面元素对视频显示区域造成遮挡，提高浏览器视频显示的准确性。

以下对图1所示实施例中各个步骤的具体实施方式进行详细阐述：

在步骤S110中，在确定浏览器当前待显示页面的播放模式为窗口播放时，获取所述浏览器当前待显示页面中视频显示区域的位置信息。

示例性的，由于IPTV规范标准已经定义当存在视频播放时候，会通过扩展的JS对象方法来定义视频的显示区域和视频是否为全屏播放的标志。所以，可以通过获取页面JS(JavaScript)对象是否全屏设置的方法和视频区域设置的方法来分别确定浏览器的播放模式和浏览器中当前视频显示区域的位置信息。

具体的，如果设置了全屏播放标志，则确定浏览器的当前待显示页面的播放模式为全屏播放，否则，确定浏览器当前待显示页面的播放模式为窗口播放。与此同时，在确定浏览器当前待显示页面的播放模式为窗口播放时，可以进一步通过获取的页面JS对象的视频设置的方法，解析到浏览器视频显示区域的位置信息。

在一种示例性的实施方式中，浏览器当前待显示页面中视频显示区域的位置信息可以包括视频显示区域在图形用户界面中的绝对位置坐标和显示尺寸。其中，绝对位置坐标可以理解为起始坐标也可以理解为中心坐标，其和显示尺寸进行结合，可以确定视频显示区域的唯一位置。绝对位置坐标的类型和坐标值可以在视频区域设置的方法中进行自定义，本示例性实施方式对此不做特殊限定。视频显示区域在图形用户界面中的显示尺寸可以包括其在图形用户界面中的第一方向的显示尺寸和第二方向的显示尺寸，其中，第一方向和第二方向相互垂直。如，显示尺寸可以理解为视频显示区域的宽度值和高度值。

在本公开中，浏览器可以包括移动端浏览器、电脑端浏览器、电视浏览器等，本示例性实施方式对此不做特殊限定。

示例性的，步骤S110的具体实施方式可以是，在确定浏览器当前待显示页面的播放模式为窗口播放时，基于浏览器当前待显示页面对应的页面对象的视频区域设置方法，获取浏览器当前待显示页面中视频显示区域在图形用户界面中的绝对位置坐标和显示尺寸。

举例而言，浏览器通过加载当前待显示页面的URL(Uniform Resource Locator，统一资源定位符)，可以从网页平台下载对应的HTML(Hyper Text Markup Language，超文本标记语言)页面，然后可以对该页面进行解析，判断当前待显示页面是否包含视频播放对象扩展的对象和方法。如果不包含，则可以确定当前待显示页面为纯HTML页面，不包含视频播放，那么，可以不对当前待显示页面进行任何处理，直接进行显示；如果包含，则可以进一步判断当前待显示页面是否为视频和WEB元素的混合页面，如果当前待显示页面是视频和web元素的混合页面，则可以进一步判断当前待显示页面是否为窗口播放。如果是窗口播放，则可以进一步解析获取当前待显示页面中视频显示区域的位置信息。

接下来，在步骤S120中，基于浏览器当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息。

举例而言，浏览器在进行渲染之前，会实时解析当前待显示页面中的元素，以生成节点树和渲染树，并且会基于节点树和渲染树形成渲染层次树。具体的，浏览器会根据页面元素的类别，将属于同一类别的页面元素单独的列为一层，即，渲染层次树中会包含当前待显示页面待绘制的不同层次和各层次的每个元素的布局信息。因此，通过渲染层次树，可以获取到浏览器当前待显示页面中的页面元素的布局信息。

在示例性的实施方式中，页面元素的布局信息可以包括页面元素在图形用户界面中的绝对位置坐标和显示尺寸。

示例性的，步骤S120的具体实施方式可以是，遍历浏览器的当前待显示页面对应的渲染层次树，获取当前待显示页面中每个页面元素在图形用户界面中的绝对位置坐标和显示尺寸。

举例而言，当遍历当前待显示页面对应的渲染层次树时，可以将遍历到的当前待显示页面元素的布局信息与步骤S110中获取的视频显示区域的位置信息进行对比，以判断二者之间是否存在重叠区域。在确定二者之间存在重叠区域时，则可以执行步骤S130。

接下来，在步骤S130中，在确定所述当前待显示页面中的页面元素的布局与所述视频显示区域的位置存在重叠部分时，对存在重叠部分的所述页面元素进行透明化处理，以得到目标显示页面。

示例性的，对存在重叠部分的所述页面元素进行透明化处理，包括：根据重叠元素的元素标识和重叠区域的绝对坐标以及尺寸信息，对所述元素标识对应的页面元素中的重叠区域进行透明化处理；其中，所述重叠元素包括与所述当前视频显示区域的位置信息存在重叠部分的所述页面元素。

举例而言，在当前遍历到的页面元素的布局与视频显示区域的位置存在重叠部分时，可以确定当前遍历到页面元素为重叠元素，基于重叠元素的元素标识以及其对应的重叠区域的绝对坐标以及尺寸信息，对该重叠元素中的重叠区域进行透明化处理。这样，可以在保证视频不被页面元素遮挡的同时，使得页面元素中的非重叠区域可以进行正常显示。

图2示出本公开一示例性实施例中的对页面元素进行透明化处理的方法的流程示意图。参考图2，该方法可以包括步骤S210至步骤S220。其中：在步骤S210中，将所述重叠元素的元素标识和重叠元素对应的重叠区域的绝对坐标以及尺寸信息确定为预设透明化处理代码的参数，以生成目标透明化处理代码；在步骤S220中，获取浏览器的当前运行环境，将所述目标透明化处理代码注入到所述当前运行环境中，以对所述元素标识对应的页面元素中的重叠区域进行透明化处理。

举例而言，将获取到的重叠区域的页面元素标识(如元素ID)和重叠区域的坐标信息、宽度、高度，作为预设的透明化处理JS代码的入参，以生成目标透明化处理JS代码。然后，获取当前JS运行的上下文环境，并注入目标透明化处理JS代码到当前执行环境中，从而在绘制渲染页面之前，实时刷新当前待显示页面中WEB(World Wide Web，即全球广域网)页面元素的绘制，以对WEB页面元素中的重叠区域进行透明化处理，从而生成目标显示页面。

接下来，在步骤S140中，基于所述目标显示页面，在所述视频显示区域进行视频显示。

在一种示例性的实施方式中，可以将浏览器视频显示控件关联到视频输出显示上，这样，可以将视频画面显示到浏览器视频显示控件上。同时，可以将浏览器页面元素控件关联到浏览器页面元素上，这样，可以基于浏览器页面元素控件显示浏览器页面元素。

示例性的，步骤S140的具体实施方式可以是，将浏览器页面元素控件叠加在浏览器视频显示控件上方，以在目标显示显示页面的视频显示区域中进行视频显示。

在一种示例性的实施方式中，在浏览器启动后，可以对显示浏览器页面元素控件的画板进行透明化处理。这样，可以保证视频显示区域在当前页面没有WEB元素或者WEB元素透明的情况下能正常显示视频画面。

在本公开中，通过对小窗口模式下的存在重叠区域的页面元素中的重叠区域的透明化处理，可以在保证视频播放层次在WEB控件之下的情况下仍然能正常显示出视频画面，进而可以提高浏览器视频显示的准确性。进一步的，在本公开中，由于仅对重叠元素中存在重叠区域的部分进行透明化处理，所以可以在保证浏览器视频显示准确性的同时，使得页面元素中不存在重叠的部分可以正常显示。

图3示出本公开一示例性实施例中的浏览器视频显示装置的结构示意图。参考图3，该装置可以包括视频显示区域确定模块310、元素布局信息获取模块320、透明化处理模块330、以及视频显示模块340。其中：

视频显示区域确定模块310，被配置为在确定浏览器当前待显示页面的播放模式为窗口播放时，获取所述浏览器当前待显示页面中视频显示区域的位置信息；

元素布局信息获取模块320，被配置为基于浏览器当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息；

透明化处理模块330，被配置为在确定所述页面元素的布局与所述视频显示区域的位置存在重叠部分时，对存在重叠部分的所述页面元素进行透明化处理，以得到目标显示页面；

视频显示模块340，被配置为基于所述目标显示页面，在所述视频显示区域进行视频显示。

在本公开的一些示例性实施方式中，基于前述实施例，上述的透明化处理模块330可以被具体配置为：

根据重叠元素的元素标识和重叠区域的绝对位置坐标以及尺寸信息，对所述元素标识对应的页面元素中的重叠区域进行透明化处理；

其中，所述重叠元素包括与所述视频显示区域的位置存在重叠部分的页面元素。

在本公开的一些示例性实施方式中，基于前述实施例，根据重叠元素的元素标识和重叠区域的绝对位置坐标以及尺寸信息，对所述元素标识对应的页面元素中的重叠区域进行透明化处理，包括：

将所述重叠元素的元素标识和重叠元素对应的重叠区域的绝对坐标以及尺寸信息确定为预设透明化处理代码的参数，以生成目标透明化处理代码；

获取浏览器的当前运行环境，将所述目标透明化处理代码注入到所述当前运行环境中，以对所述元素标识对应的页面元素的重叠区域进行透明化处理。

在本公开的一些示例性实施方式中，基于前述实施例，所述视频显示区域确定模块310可以被具体配置为：

基于浏览器当前待显示页面对应的页面对象的视频区域设置方法，获取浏览器当前待显示页面中视频显示区域在图形用户界面中的绝对位置坐标和显示尺寸。

在本公开的一些示例性实施方式中，基于前述实施例，所述元素布局信息获取模块320可以被具体配置为：

遍历浏览器当前待显示页面对应的渲染层次树，获取当前待显示页面中每个页面元素在图形用户界面中的绝对位置坐标和显示尺寸。

在本公开的一些实例性实施方式中，基于前述实施例，所述装置还包括初始化模块，所述初始化模块被具体配置为：

在浏览器启动后，对显示浏览器页面元素控件的画板进行透明化处理。

在本公开的一些示例性实施方式中，基于前述实施例，所述视频显示模块340可以被具体配置为：

将浏览器页面元素控件叠加在浏览器视频显示控件上方，以在所述目标显示页面的视频显示区域中进行视频显示。

上述浏览器视频显示装置中各模块的具体细节已经在对应的浏览器视频显示方法中进行了详细的描述，因此此处不再赘述。

图4示出的本公开一示例性实施例中可以应用本公开的浏览器显示方法及装置的浏览器视频显示系统的整体架构图。参考图4，该浏览器视频显示系统可以包括EPG(Electronic Program Guide，电子节目指南)服务子系统41、EPG中间件42、输出显示子系统43。其中，EPG中间件又可以包括视频控件初始化模块421、视频显示区域解析模块422、浏览器内核重合解析模块423、重合区域透明化处理模块424。其中：

EPG服务系统子系统41，用于从服务器请求EPG原始页面，并将其获取的EPG原始页面发送给EPG中间件42；

EPG中间件42，用于对接收的EPG原始页面的语法实时处理和解析，根据当前页面的播放模式实时处理和更新页面的绘制指令；

输出显示子系统43，用于对EPG中间件42生成的绘制指令集合进行输出和显示。

在一种示例性的实施方式中，EPG中间件42可以通过HTTP(Hyper Text TransferProtocol，超文本传输协议)请求EPG服务子系统下发HTML(HyperText Markup Language，超文本标记语言)、CSS(Cascading Style Sheets，层叠样式表，一种用于表示HTML等文件样式的计算机语言)、Javascript组成的Web页面到EPG中间件，等待EPG中间件42中的各模块进行实时的语法和词法的解析。

EPG中间件42接收到WEB页面后，通过判断当前页面是否存在小窗口视频播放区域和页面元素重叠的情况，来确定是否进行透明化处理，从而决定是否生成新的页面绘制指令集合，来达到统一处理窗口视频遮挡的机制。

具体的，当小窗口播放页面加载和显示时，EPG中间件42解析出当前视频播放显示的区域位置并保存。而浏览器会实时解析当前页面元素，生成节点树、渲染树，并形成渲染层次树，具体的，浏览器会根据页面元素的类别进行不同层次的划分，同一类型的元素将单独的列为一层，所以，渲染层次树包含当前页面绘制的不同层次和元素布局信息，当遍历当前渲染层次树，提取当前页面中每层元素的布局信息，并与保存的当前视频播放显示区域的位置进行对比，分析是否有重合区域。当存在重合区域时候，刷新并透明化重合区域中的各层WEB元素的布局元素，最后形成更新后的页面渲染绘制指令，并将更新后的页面渲染绘制指令发送给输出显示子系统43。

输出显示子系统43可以对中间件发送的页面渲染指令集合进行绘制和输出显示，从而完成视频的显示。

举例而言，图4所示的系统的整体工作流程可以为：用户进行新页面切换操作时候，EPG中间件42请求新的页面，EPG服务系统41下发新的页面到EPG中间件42，等待EPG中间件42进行实时的语法和词法的解析；EPG中间件通过其包括的各个模块进行页面的语法和词法解析，来确定是否需要进行透明化处理，如果需要，则进行透明化处理以生成新页面绘制指令集合，进一步的由输出显示子系统43完成新绘制指令的绘制和输出显示。

下面，对EPG中间件42包括的视频控件初始化模块421、视频显示区域解析模块422、浏览器内核重合解析模块423、重合区域透明化处理模块424进行说明。

视频控件初始化模块421主要完成视频显示控件和WEB控件(即上述的浏览器页面元素控件)的初始化。具体的，视频初始化模块421用于将视频显示控件关联到视频输出显示上，这样，可以将视频画面显示到视频显示控件上。初始化模块421还用于将WEB控件关联到WEB元素的输出显示上，这样，可以通过WEB控件显示WEB页面。与此同时，视频控件初始化模块421还用于对WEB控件的画板进行透明化处理，从而保证视频画面显示区域在没有WEB元素或者WEB元素本身透明的情况下能正常显示视频画面。

视频显示区域解析模块422，用于判断当前页面是否为视频播放页面，如果时，进一步解析视频显示区域的绝对坐标、宽度、高度信息，并将解析到的信息进行保存，用于后续的浏览器你内核重合解析模块423中。

浏览器内核重合解析模块423，用于在判断为窗口视频播放页面时，解析当前下发的页面元素的数据，并判断页面元素是否与视频显示区域存在重叠。

示例性的，图5示出本公开一示例性实施例中的浏览器视频显示系统中的浏览器内核重合解析模块处理时机图。

参考图5，在步骤S510中，浏览器获取当前待显示页面对应的HTML页面；在步骤S520和530中，浏览器对当前页面元素进行解析，分别生成节点树和渲染树；在步骤S540中，基于节点树和渲染树生成渲染层次树；在步骤S550中，进行页面绘制；在步骤S560，输出显示。

由于浏览器本身的页面渲染流程中，通过上述的步骤S510至步骤S530后，即渲染树构建完成后会根据渲染树的信息生成绘制指令进而进入绘制流程。为了对小窗口视频显示遮挡问题进行处理，所以，浏览器内核重合解析模块423需要在进入浏览器的正常绘制之前，遍历浏览器的当前渲染层次树，获取当前页面元素的布局信息，将其与上述的视频显示区域解析模块422中保存的视频显示区域的信息对比，以进行重叠区域的分析，进而在透明出处理完成后进行生成新的绘制指令，进入绘制流程，最终进行输出显示。

重合区域透明化处理模块424，用于对存在重叠区域的元素中的重叠区域进行透明化处理。

具体的，浏览器内核重合区域分析模块423可以确定出的存在重叠区域的页面元素的标识和重叠区域的绝对坐标、宽度、高度发送给重合区域透明化处理模块424中的预设透明化处理JS代码，从而生成目标透明化处理JS代码。然后，重合区域透明化处理模块424获取当前JS运行的上下文环境，并注入目标透明化处理JS代码到当前执行环境中，从而基于目标透明化处理代码中的页面元素的标识和重叠区域的信息，对页面元素中的重叠部分进行透明化处理，进而在绘制渲染页面之前，实时刷新当前重叠区域的WEB元素的绘制。

相关技术中，都是在遇到问题后，再通过中间件去适配兼容，是特殊处理，不具有通用性，存在的问题已经发生在用户终端上，影响用户体验的行为已经发生。而本公开中的解决方式是在问题发生之前已经做兼容性适配，到用户终端上均能正常显示。对小窗口视频的遮挡显示问题有通用性,通过浏览器内核实时解析页面下发的WEB元素，并实时处理，也不影响页面小窗口和全屏视频的播放性能，同时极大提高视频显示的兼容性和用户体验。

接下来，参考图6，对基于上述的浏览器视频显示系统进行浏览器显示处理的方法的流程进行说明。参考图6，该方法可以包括步骤S610至步骤S660。

在步骤S610中，响应于客户端的页面触发请求，向EPG服务子系统请求EPG页面。

举例而言，EPG中间件响应于用户在客户端的触发操作，可以发出新的页面请求，以向EPG服务子系统请求EPG页面。EPG服务子系统可以理解为EPG服务器。EPG服务器可以将EPG中间件请求的当前页面下发给EPG中间件。

在步骤S620中，EPG中间件对接收的EPG页面进行实时处理。

在步骤S630中，判断是否生成新的绘制指令，如果判断为是，则转至步S640，否则，转至步骤S650。

在步骤S640中，生成新的绘制指令集合。

在步骤S650中，生成原始绘制指令集合。

在步骤S660中，输出显示子系统根据接收的绘制指令，进行页面绘制和显示。

举例而言，在步骤S620中，EPG中间件可以对接收到的EPG页面进行重叠区域分析，以确定是否需要进行透明化处理。步骤S630可以根据步骤S620的判断结果，确定是否需要生成新绘制指令。具体的，如果在步骤S620中，解析出当前页面元素的布局与小窗口视频播放区域的位置存在重叠，则确定需要对其进行透明化处理，从而在步骤S630中确定需要生成新绘制指令，进而在步骤S640中，对重叠元素中的重叠区域进行透明化处理，以生成新的绘制指令集合，并将其发送给输出显示子系统。如果在步骤S620中，解析出当前页面元素的布局与小窗口视频播放区域的位置不重叠，则确定不需要对其进行透明化处理，从而在步骤S630中确定需要生成原始绘制指令，进而在步骤S650中，不对页面元素进行任何处理，以基于浏览器的当前渲染树生成原始绘制指令集合，并将其发送给输出显示子系统。在步骤S660中，输出显示子系统根据接收到的绘制指令，进行页面的绘制和显示。

下面，结合图7对上述的步骤S620进行详细说明。图7示出本公开一示例性实施例中基于EPG中间件进行视频显示处理的方法的流程示意图。参考图7，该方法可以包括步骤S701至步骤S709。其中：

在步骤S701中，对视频相关控件进行初始化。

在示例性的实施方式中，视频相关控件包括视频显示控件和WEB控件。具体的，系统启动后，视频控件初始化模块从上到下建立控件叠加层次，依次为WEB控件、视频显示控件，同时把视频显示控件关联到视频输出显示上。这样，在默认状态下，视频画面可以显示到视频显示控件上。同时，视频控件初始化模块可以对WEB控件的画板进行透明化，保证视频画面显示区域在没有WEB元素或WEB元素本身透明的情况下能正常显示视频画面。

在步骤S702中，浏览器内核实时解析页面内容。

示例性的，浏览器通过加载当前页面URL，从网页平台下载对应的HTML页面，浏览器内核页面解析模块可以解析HTML页面的内容，进入步骤S703；

在步骤S703中，判断当前页面是否为视频播放页面，若否，则转至步骤S704，若是，转至步骤S705。

示例性的，可以通过判断当前页面是否存在视频播放对象扩展的对象和方法，来判断当前页面是否为视频播放页面。具体的，如果当前页面不存在视频播放对象扩展的对象和方法，则表明当前页面为纯HTML页面，即不属于视频播放页面，否则，确定当前页面为视频播放页面。

在步骤S704中，确定当前页面为纯HTML页面，不做任何处理，跳转到步骤S709。

在步骤S705中，判断当前页面是否为窗口视频播放，如果是，则转至步骤S706，否则，转至步骤S707。

举例而言，在确定当前页面为视频播放页面时，可以在步骤S705中进一步判断当前页面是否为视频和WEB元素的混合页面，即是否为窗口视频播放。具体的，可以获取页面JS对象的视频区域设置方法和是否全屏的设置方法，由于本身IPTV规范标准已经定义标准是当存在视频播放时候，会通过扩展的JS对象方法来定义视频的显示区域和视频是否为全屏播放的标志。所以可以通过获取页面JS对象的视频区域设置方法和是否全屏的设置方法，来确定当前页面中的视频显示区域的位置信息和当前页面是否为窗口视频播放。如果设置了全屏播放标志，判断为全屏播放，否则，判断为窗口视频播放。

在步骤S706中，对重叠元素中的重叠区域进行透明化处理，跳转至到步骤S708。

举例而言，若当前页面设置的为小窗口视频播放，则可以进一步获取视频显示区域的绝对坐标和视频显示区域的宽度值、高度值，同时遍历当前渲染层次树获取每层元素的布局信息，与保存的视频显示区域的信息进行对比，以判断是否存在重叠元素，如果存在重叠元素，则浏览器内核重合解析模块可以获取到当前与视频显示区域重合的web元素的ID，元素名称，以及重叠区域的信息，并将其发送给页面元素透明化处理模块。页面元素透明化模块获取当前JS运行的上下文环境，并注入透明化处理JS代码到当前执行环境中，从而在绘制渲染页面之前，实时刷新的当前重叠区域的WEB元素的绘制，达到重叠区域的透明化处理，透明化处理完毕后，跳转到步骤S708。

在步骤S707中，确定当前为全屏播放视频，不做任何处理，跳转至步骤S709。

在本公开中，全屏显示时，需要把页面播控元素放置在最顶层，同时，会默认将页面播控元素设置为隐藏状态。此外，在全屏显示时，不会存放多余的页面元素，比如图片资源等，从而保证全屏视频画面的正常显示，且不存在其他多余页面元素遮挡视频画面的情况。所以全屏不存在视频遮挡问题，不做任何处理，从而直接按照将页面播放元素设置为隐藏状态的原有方式显示页面和视频。

当然，也可以不设置全屏显示时的显示方式，即不预先设置全屏显示时页面播控元素为隐藏状态。在判断当前页面为全屏显示时，直接对当前页面元素全部进行透明化处理，以避免页面元素对全屏播放的视频进行遮挡的情况出现。

在步骤S708中，将视频显示区域和透明化处理后的重叠元素对应的页面进行叠加显示。

在步骤S709中，按照原有方式显示页面和视频。

目前，EPG承载显示主流方式是基于浏览器，对于任何的基于浏览器承载的IPTVEPG页面的处理而言，通过上述的如6和图7所示的实施例，当新的EPG页面加载还未真正显示到终端时，可以实时分析和解析视频类页面，做兼容性处理，从而避免异常页面的显示。

本领域技术人员可以理解实现上述实施方式的全部或部分步骤被实现为由CPU执行的计算机程序。在该计算机程序被CPU执行时，执行本发明提供的上述方法所限定的上述功能。所述的程序可以存储于一种计算机可读存储介质中，该存储介质可以是只读存储器，磁盘或光盘等。

此外，需要注意的是，上述附图仅是根据本公开示例性实施方式的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、移动终端、或者网络设备等)执行根据本公开实施方式的方法。

在本公开示例性实施方式中，还提供了一种能够实现上述方法的计算机存储介质。其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施例中，本公开的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。

参考图8所示，描述了根据本公开的实施方式的用于实现上述方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本公开的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本公开操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，在本公开的示例性实施例中，还提供了一种能够实现上述方法的电子设备。

所属技术领域的技术人员能够理解，本公开的各个方面可以实现为系统、方法或程序产品。因此，本公开的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

下面参照图9来描述根据本公开的这种实施方式的电子设备900。图9显示的电子设备900仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图9所示，电子设备900以通用计算设备的形式表现。电子设备900的组件可以包括但不限于：上述至少一个处理单元910、上述至少一个存储单元920、连接不同系统组件(包括存储单元920和处理单元910)的总线930以及显示单元940。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元910执行，使得所述处理单元910执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。例如，所述处理单元910可以执行如图1中所示的：步骤S110，在确定浏览器当前待显示页面的播放模式为窗口播放时，获取所述浏览器当前待显示页面中视频显示区域的位置信息；步骤S120，基于浏览器当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息；步骤S130，在确定所述页面元素的布局与所述视频显示区域的位置存在重叠部分时，对存在重叠部分的所述页面元素进行透明化处理，以得到目标显示页面；步骤S140，基于所述目标显示页面，在所述视频显示区域进行视频显示。

存储单元920可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)9201和/或高速缓存存储单元9202，还可以进一步包括只读存储单元(ROM)9203。

存储单元920还可以包括具有一组(至少一个)程序模块8205的程序/实用工具9204，这样的程序模块9205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线930可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备900也可以与一个或多个外部设备1000(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备900交互的设备通信，和/或与使得该电子设备900能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口950进行。并且，电子设备900还可以通过网络适配器960与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器960通过总线930与电子设备900的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备900使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施方式的方法。

此外，上述附图仅是根据本公开示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

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

Claims (10)

1.一种浏览器视频显示方法，其特征在于，包括：

在确定浏览器当前待显示页面的播放模式为窗口播放时，获取所述浏览器当前待显示页面中视频显示区域的位置信息；

基于浏览器当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息；

在确定所述页面元素的布局与所述视频显示区域的位置存在重叠部分时，对存在重叠部分的所述页面元素进行透明化处理，以得到目标显示页面；

基于所述目标显示页面，在所述视频显示区域进行视频显示。

2.根据权利要求1所述的浏览器视频显示方法，其特征在于，所述对存在重叠部分的所述页面元素进行透明化处理，包括：

根据重叠元素的元素标识和重叠区域的绝对位置坐标以及尺寸信息，对所述元素标识对应的页面元素中的重叠区域进行透明化处理；

其中，所述重叠元素包括与所述视频显示区域的位置存在重叠部分的页面元素。

3.根据权利要求2所述的浏览器视频显示方法，其特征在于，所述根据重叠元素的元素标识和重叠区域的绝对坐标以及尺寸信息，对所述元素标识对应的页面元素中的重叠区域进行透明化处理，包括：

将所述重叠元素的元素标识和重叠元素对应的重叠区域的绝对坐标以及尺寸信息确定为预设透明化处理代码的参数，以生成目标透明化处理代码；

获取浏览器的当前运行环境，将所述目标透明化处理代码注入到所述当前运行环境中，以对所述元素标识对应的页面元素的重叠区域进行透明化处理。

4.根据权利要求1所述的浏览器视频显示方法，其特征在于，所述获取所述浏览器当前待显示页面中视频显示区域的位置信息，包括：

基于浏览器当前待显示页面对应的页面对象的视频区域设置方法，获取浏览器当前待显示页面中视频显示区域在图形用户界面中的绝对位置坐标和显示尺寸。

5.根据权利要求1所述的浏览器视频显示方法，其特征在于，所述基于浏览器当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息，包括：

遍历浏览器当前待显示页面对应的渲染层次树，获取当前待显示页面中每个页面元素在图形用户界面中的绝对位置坐标和显示尺寸。

6.根据权利要求1所述的浏览器视频显示方法，其特征在于，所述方法还包括：

在浏览器启动后，对显示浏览器页面元素控件的画板进行透明化处理。

7.根据权利要求6所述的浏览器视频显示方法，其特征在于，所述基于所述目标显示页面，在所述视频显示区域进行视频显示，包括：

将浏览器页面元素控件叠加在浏览器视频显示控件上方，以在所述目标显示页面的视频显示区域中进行视频显示。

8.一种浏览器视频显示装置，其特征在于，包括：

视频显示区域确定模块，被配置为在确定浏览器当前待显示页面的播放模式为窗口播放时，获取所述浏览器当前待显示页面中视频显示区域的位置信息；

元素布局信息获取模块，被配置为基于浏览器当前待显示页面对应的渲染层次树，获取所述当前待显示页面中页面元素的布局信息；

透明化处理模块，被配置为在确定所述页面元素的布局与所述视频显示区域的位置存在重叠部分时，对存在重叠部分的所述页面元素进行透明化处理，以得到目标显示页面；

视频显示模块，被配置为基于所述目标显示页面，在所述视频显示区域进行视频显示。

9.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1至7中任一项所述的浏览器视频显示方法。

10.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1至7中任一项所述的浏览器视频显示方法。

Images