一种带有视频窗口的页面显示方法和网关设备与流程

1.本技术涉及通信技术领域，尤其涉及一种带有视频窗口的页面显示方法和网关设备。


背景技术：

2.iptv是利用计算机或机顶盒和电视完成接收视频点播节目、视频广播及网上冲浪等功能。iptv能够很好地适应当今网络飞速发展的趋势，充分有效地利用网络资源，且具有良好的交互性，正在被大量广泛于运营商网络。
3.iptv产品普遍使用服务器端-浏览器架构，即服务器端设置页面内容，机顶盒端集成浏览器负责展示页面。
4.在一些带有视频窗口的页面中，视频小窗口的位置经常有某些元素的不透明的背景图片，或者该区域元素的内容设置为非透明，导致播放视频在小窗口的位置透不过来，出现只有声音无视频情况，影响用户体验。


技术实现要素：

5.本技术提供了一种网页内视频显示方法和显示器，以实现网页内视频窗口正常显示。
6.为了解决上述技术问题，本技术实施例公开了如下技术方案：
7.一方面，本技术实施例公开了一种带有视频窗口的页面显示方法，包括：
8.接收网页信息，并对所述网页信息进行解析，生成节点树结构；
9.根据所述节点树结构中的视频节点，建立播放节点，所述播放节点与所述视频节点同级；
10.根据所述播放节点建立播放图层，建立结构指针，所述结构指针的一端指向所述播放图层，另一端与播放器视频输出端口连接。
11.另一方面，本技术实施例公开了一种网关设备，包括：
12.浏览器，用于接收网页信息进行解析，生成节点树结构；建立播放节点，所述播放节点与所述节点树结构中的视频元素节点同级，建立播放图层和结构指针；
13.播放器，用于根据视频信息建立播放实例；
14.所述结构指针的一端指向所述播放图层，另一端与所述播放器视频输出端口连接。
15.本技术的有益效果：
16.本技术公开了一种带有视频窗口的页面显示方法和网关设备，包括：接收网页信息，并对所述网页信息进行解析，生成节点树结构；根据所述节点树结构中的视频节点，建立播放节点，所述播放节点与所述视频节点同级；根据所述播放节点建立播放图层，建立结构指针，所述结构指针的一端指向所述播放图层，另一端与播放器视频输出端口连接。本技术通过结构指针将播放器的视频内容直接输出在一个浏览器内部的播放图层，新建播放图
层是和视频节点元素同级，因此背景层在浏览器合成时都会在新建播放图层的后面，合成时后不会被背景图片遮挡。
附图说明
17.为了更清楚地说明本技术的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
18.图1为根据实施例中机顶盒的使用场景的示意图；
19.图2为本技术实施例提供的一种带有视频窗口的页面显示方法流程示意图；
20.图3为本技术实施例提供的一种信令流程示意图。
具体实施方式
21.为便于对申请的技术方案进行解释，以下首先在对本技术所涉及到的一些概念进行说明。
22.为了使本技术领域的人员更好地理解本技术中的技术方案，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本技术保护的范围。
23.需要说明的是，本技术中对于术语的简要说明，仅是为了方便理解接下来描述的实施方式，而不是意图限定本技术的实施方式。除非另有说明，这些术语应当按照其普通和通常的含义理解。
24.本技术中说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”等是用于区别类似或同类的对象或实体，而不必然意味着限定特定的顺序或先后次序，除非另外注明。应该理解这样使用的用语在适当情况下可以互换。
25.术语“包括”和“具有”以及他们的任何变形，意图在于覆盖但不排他的包含，例如，包含了一系列组件的产品或设备不必限于清楚地列出的所有组件，而是可包括没有清楚地列出的或对于这些产品或设备固有的其它组件。
26.术语“模块”是指任何已知或后来开发的硬件、软件、固件、人工智能、模糊逻辑或硬件或/和软件代码的组合，能够执行与该元件相关的功能。
27.图1为根据实施例中机顶盒的使用场景的示意图。如图1所示，机顶盒100，是一个连接显示设备200与服务器400的设备。它可以将压缩的数字信号转成电视内容，并在显示装置上显示出来。
28.显示设备200与服务器400进行数据通信，用户可通过智能设备300或控制装置500操作显示设备200。
29.在一些实施例中，控制装置500可以是遥控器，遥控器和显示设备的通信包括红外协议通信或蓝牙协议通信，及其他短距离通信方式中的至少一种，通过无线或有线方式来控制显示设备200。用户可以通过遥控器上按键、语音输入、控制面板输入等至少一种输入用户指令，来控制显示设备200。
30.在一些实施例中，智能设备300可以包括移动终端、平板电脑、计算机、笔记本电脑，ar/vr设备等中的任意一种。
31.在一些实施例中，也可以使用智能设备300以控制显示设备200。例如，使用在智能设备上运行的应用程序java层控制显示设备200。
32.在一些实施例中，也可以使用智能设备300和显示设备进行数据的通信。
33.在一些实施例中，显示设备200还可以采用除了控制装置500和智能设备300之外的方式进行控制，例如，可以通过显示设备200设备内部配置的获取语音指令的模块直接接收用户的语音指令控制，也可以通过显示设备200设备外部设置的语音控制装置来接收用户的语音指令控制。
34.在一些实施例中，机顶盒还与服务器400进行数据通信。可允许机顶盒100通过局域网(lan)、无线局域网(wlan)和其他网络进行通信连接。服务器400可以向机顶盒100提供各种内容和互动。服务器400可以是一个集群，也可以是多个集群，可以包括一类或多类服务器。
35.在一些实施例中，一个步骤执行主体执行的软件步骤可以随需求迁移到与之进行数据通信的另一步骤执行主体上进行执行。示例性的，服务器执行的软件步骤可以随需求迁移到与之数据通信的显示设备上执行，反之亦然。
36.控制装置500还可与机顶盒100通信连接，通常控制装置与机顶盒通过红外协议通信，机顶盒接收控制装置的通信信号，完成用户遥控操作。
37.机顶盒100可以是外设置于显示设备壳体外侧，可也内置于显示设备内部。
38.在iptv软件中，播放器模块和浏览器模块独立工作，只通过消息通道传递播放器状态。播放器模块输出播放图层，和浏览器模块输出的页面图层，呈现是独立的两个android gl图层，最终在android层叠加输出。播放图层在页面图层之下，这样保证视频不会遮挡页面。
39.在一些带有小视频窗口的页面里，页面中会有一个div元素来描述视频窗口，此div元素的id名称为video。这个div元素的位置和样式由页面开发者设计。通常，视频以小窗口的样式进行显示，如果页面图层的div元素的位置，具有背景图片，则对视频造成遮挡，影响用户感观。
40.为解决以上问题，本技术提供了一种带有视频窗口的页面显示方法，适用于机顶盒等网关设备，浏览器对接收到的网页信息进行解析，生成节点树结构。在节点树结构中查找视频节点，根据视频节点中视频信息建立播放节点，其中，播放节点与视频节点在结构树中同级，且具有位置信息为视频区域在显示屏中的位置信息。根据播放节点信息建立播放图层，建立结构指针，结构指针的一端指向播放图层，另一端与播放器的输出端口连接。播放器中生成播放实例，播放实例在播放图层进行播放。本技术中修改播放器的原有图层机制，去掉原来创建的图层。将播放器视频输出绑定到新建的播放图层传出的结构指针，播放器的视频内容输出，就会作为浏览器内部的一个图层输出，其内容显示也被浏览器刷新机制来负责更新。
41.图2为本技术实施例提供的一种带有视频窗口的页面显示方法流程示意图，如图2中所示，对超文本页面进行解析，生成节点树结构，节点树结构的节点采用div元素进行表述。
42.服务器端发送网页信息。网页信息为html(超文本)页面。
43.通常，机顶盒与服务器通信连接，机顶盒内是有浏览器，浏览器对网页信息进行解析，生成节点树结构，节点树结构中的每个节点采用div元素进行表述。div元素是超文本语言里面一个块级元素，元素包括元素地址、位置、透明度信息。
44.节点树是html页面经过浏览器解析后生产的数据，这个数据结构中，每种html元素的所有属性都通过结构体来描述。
45.iptv行业规范中要求超文本页面内含有小窗口视频时，小窗口视频的元素地址采用video来标识。即，本技术中预设小窗口元素标识video，如果节点树结构中存在元素地址为预设小窗口元素标识的元素，则超文本页面内含有小窗口视频，并将元素地址为预设小窗口元素标识的元素命名为视频节点。
46.节点树结构中的节点均具有父子关系或兄弟关系，也即上下级或同级关系，根据网页信息，浏览器对页面中各个元素在转换为图层后，在显示屏中呈现时前后层逻辑：“元素的父子关系主要决定了各元素在同一个位置上呈现时的前后位置。通常父元素在后，子元素在前，同级元素先定义在后，后定义在前。”47.以下为常见的div元素的布局的例子：
[0048][0049]
以上代码中：父子元素占据的位置是基本有重叠的。兄弟元素的占用位置通过参数指定后是可以重叠的，但子元素的位置不会超过父元素位置。
[0050]
在本例中：通过style描述的位置参数可以看到，id为1和id为2的两个div元素占据的位置并不重叠，但id为3的div和前两个都会有重叠。
[0051]
浏览器呈现这些元素时，大概的流程是先根据div关系进行解析，创建节点树。针对每个div占用的位置创建各自图层。并将这些图层叠加，最终渲染合成呈现出来。即，根据浏览器对页面中各个元素在转换为图层后，在显示屏中呈现时前后层逻辑，以上实例中重叠位置上显示的是id为3的div，其他被遮挡。
[0052]
为了明确视频窗口在显示屏中的准确位置，本技术根据视频节点的信息，计算视频区域在显示屏中的位置信息。
[0053]
具体的，按照iptv规范描述播放器信息的脚本代码的函数中找到视频区域在屏幕的绝对位置的四个参数x、y、width、height。视频区域为小窗口视频的播放区域。
[0054]
其中，x为视频区域在显示屏幕的左位置起点位置，y为视频区域在显示屏幕中上端位置起点。width即视频区域的宽度，height即视频区域的高度。因此，可知视频区域的坐上起始位置，及长度、宽度，即可知道视频区域在显示屏幕的绝对位置。
[0055]
浏览器建立播放节点，播放节点与视频元素节点同级，且播放节点的位置信息为视频区域在显示屏中位置信息，播放节点的地址为新建地址，透明度等其他信息与视频节点信息相同。
[0056]
在本技术实施例中，同级指的是和id为video的元素在同一级的兄弟关系。html页面中，各个div经常存在父子关系和兄弟关系。也就是在同一个屏幕区域可能有多个div。浏览器内部根据div的父子关系建立图层时会有前后关系。播放节点建立过程使用浏览器中具体函数。
[0057]
根据播放节点信息建立播放图层，建立结构指针，指向播放图层。将新建的播放图层，通过浏览器的内部进程通信以及android通道，将图层指针转换为结构指针。结构指针的一端指向播放图层，另一端与播放器视频输出端口连接，将播放器的播放端口绑定到新建图层传出的结构指针。
[0058]
播放器设置视频输出端口与浏览器的结构指针连接，通过结构指针将播放器的视频内容直接输出在一个浏览器内部的播放图层。
[0059]
播放器通过浏览器解析后的信息，查找视频信息，对视频信息进行解码生成播放实例。
[0060]
播放器根据结构指针的指向，将视频在播放图层进行播放。通常同一显示位置的元素基本都是视频(id为video)元素的父元素，而我们新建播放图层是和视频div元素同级，因此背景层在浏览器合成时都会在新建播放图层的后面，合成时后不会被背景图片遮挡。同理，在视频区域做的一些提示等，按设计思路，基本都是视频div的子元素，或者在其后定义。因此基本也都会呈现在新建播放图层的前面，保证不被播放图层遮挡。
[0061]
基于以上内容，本技术还提供一种网关设备，包括：第一通信接口，用于接收网页信息。
[0062]
浏览器，接收网页信息并对网页信息进行解析，生成节点树结构。根据节点树结构中视频节点信息，建立播放节点，并根据播放节点信息建立播放图层。建立结构指针。结构指针的一端指向播放图层，另一端与播放器的输出端口连接。浏览器还用于根据节点树结构形成网页图层。播放器，与浏览器通信连接，根据节点树结构生成播放实例。播放器中生成播放实例，播放实例在播放图层进行播放。本技术中修改播放器的原有图层机制，去掉原来创建的图层。将播放器视频输出绑定到新建的播放图层传出的结构指针，播放器的视频内容输出，就会作为浏览器内部的一个图层输出，其内容显示也被浏览器刷新机制来负责更新。
[0063]
图3为本技术实施例提供的一种信令流程示意图，如图3中所示，服务器端发送网页信息。其中网页信息为超文本页面。
[0064]
浏览器对网页信息进行解析，生成节点树结构。节点树结构中的每个节点采用div元素进行表述。div元素是超文本语言里面一个块级元素，元素包括元素地址、位置、透明度信息。
[0065]
浏览器建立播放节点，播放节点与节点树结构中的视频元素节点同级。
[0066]
在本技术实施例中，播放节点的位置信息为视频区域在显示屏中位置信息，播放节点的地址为新建地址，透明度等其他信息与视频节点信息相同。为了明确视频窗口在显示屏中的准确位置，本技术根据视频节点的信息，计算视频区域在显示屏中的位置信息。
[0067]
具体的，按照iptv规范描述播放器信息的脚本代码的函数中找到视频区域在屏幕的绝对位置的四个参数x,y,width,height。视频区域为小窗口视频的播放区域。
[0068]
其中，x为视频区域在显示屏幕的左位置起点位置，y为视频区域在显示屏幕中上端位置起点。width即视频区域的宽度，height即视频区域的高度。因此，可知视频区域的坐上起始位置，及长度、宽度，即可知道视频区域在显示屏幕的绝对位置。
[0069]
浏览器根据播放节点信息建立播放图层，建立结构指针，结构指针的一端指向播放图层，另一端与播放器视频输出端口连接。
[0070]
播放器通过浏览器解析后的信息，查找视频信息，对视频信息进行解码生成播放实例。
[0071]
进一步，浏览器包括java软件层和浏览器内核，java软件层对网页信息进行解析，生成节点树结构。浏览器内核解析后数据生成网页图层。播放器接收java层中视频地址信息，根据视频地址信息从服务器端获取视频数据，生成播放实例。
[0072]
播放器通过浏览器解析后的信息，查找视频信息，对视频信息进行解码生成播放实例。播放器设置视频输出端口与浏览器的结构指针连接，通过结构指针将播放器的视频内容直接输出在一个浏览器内部的播放图层。播放器根据结构指针的指向，将视频在播放图层进行播放。java软件层将浏览器内部多个图层合成，生成显示图层，显示设备接收浏览器合成的显示图层，对网页进行显示。通常同一显示位置的元素基本都是视频(id为video)元素的父元素，而我们新建播放图层是和视频div元素同级，因此背景层在浏览器合成时都会在新建播放图层的后面，合成时后不会被背景图片遮挡。
[0073]
综上，本技术公开了一种带有视频窗口的页面显示方法，适用于机顶盒、或手机等嵌入式设备，浏览器对接收到的网页信息进行解析，生成节点树结构。在节点树结构中查找视频节点，根据视频节点中视频信息建立播放节点，其中，播放节点与视频节点在结构树中同级，且具有位置信息为视频区域在显示屏中的位置信息。根据播放节点信息建立播放图层，建立结构指针，结构指针的一端指向播放图层，另一端与播放器的输出端口连接。播放器中生成播放实例，播放实例在播放图层进行播放。本技术中修改播放器的原有图层机制，去掉原来创建的图层。将播放器视频输出绑定到新建的播放图层传出的结构指针，播放器的视频内容输出，就会作为浏览器内部的一个图层输出，其内容显示也被浏览器刷新机制来负责更新。
[0074]
由于以上实施方式均是在其他方式之上引用结合进行说明，不同实施例之间均具有相同的部分，本说明书中各个实施例之间相同、相似的部分互相参见即可。在此不再详细阐述。
[0075]
本领域技术人员在考虑说明书及实践本技术的公开后，将容易想到本技术的其他
实施方案。本技术旨在涵盖本技术的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本技术的一般性原理并包括本技术未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本技术的真正范围和精神由权利要求的内容指出。
[0076]
以上所述的本技术实施方式并不构成对本技术保护范围的限定。