电视浏览器的视频播放实现方法及浏览器应用运行方法

摘要

本发明公开了一种基于Android电视浏览器的视频播放实现方法，包括：通过定制浏览器内核词法解析模块，将传统播放流程剥离，解析video标签并创建相应的video节点插入DOM树，解析并存储web逻辑控制的video标签属性及将播放状态同步至应用层；定制内核布局和渲染模块，将词法解析模块创建的DOM节点加入布局，再将渲染树中该区域内容清除，同时将绝对坐标和宽高数据同步至应用层，应用层通过获取词法解析模块、布局和渲染模块的属性和参数实现控制播放。本发明的方法解决了浏览器应用引用外部SDK实现播放功能时视频播放窗口与web悬浮UI存在层级遮挡的问题。

说明书

技术领域

本发明涉及电视浏览器技术领域，特别涉及一种基于Android电视浏览器的视频播放实现方法及浏览器应用运行方法。

背景技术

随着电视资源越来越丰富，传统应用通过海报、文本呈现内容资源的方式已不能满足用户的需求，视频播放窗口与UI融合的交互界面已经成为资源聚合应用的标配功能。

传统浏览器处理视频播放，主要两种方式：

1、web页面使用HTML5标准的video标签加入页面布局，通过video标签的属性控制播放源地址和播放状态，浏览器内核的网络、解码和渲染模块进行处理，最终再与web页面合成，最终呈现出完整的显示效果；

2、浏览器扩展JS播放器对象，web页面逻辑控制Android应用层创建播放器，并且将该播放器关联的输出层布局至应用UI底层，同时将浏览器控件设置为透明，再将web页面涉及到播放窗口区域的元素属性设置为透明，从而将布局底层的播放内容“透出”。

由于视频资源方的限制，Android电视应用播放某些独立版权的视频源时，通常需要引入外部应用的播放SDK，若应用为了交互性更好的显示效果，需要在视频窗口上方的显示悬浮UI，上述两种方案均存在缺陷：

方案1由于无法直接获取视频源的地址设置video标签属性，无法调用标准播放流程；若在应用层调用外部SDK实现播放，video区域又将显示黑色背景遮挡播放窗口；

方案2播放与浏览器解耦独立管理，可以实现播控状态控制，但是当web页面设置实体图片作为背景时，位于浏览器布局下方的播放窗口将被背景图遮挡。

发明内容

本发明的目的是克服上述背景技术中不足，提供一种基于Android电视浏览器的视频播放实现方法及浏览器应用运行方法，解决了浏览器应用引用外部SDK实现播放功能时视频播放窗口与web悬浮UI存在层级遮挡的问题。

为了达到上述的技术效果，本发明采取以下技术方案：

一种基于Android电视浏览器的视频播放实现方法，包括：通过定制浏览器内核词法解析模块，将传统播放流程剥离，解析video标签并创建相应的video节点插入DOM树，解析并存储web逻辑控制的video标签属性及将播放状态同步至应用层；定制内核布局和渲染模块，将词法解析模块创建的DOM节点加入布局，再将渲染树中该区域内容清除，同时将绝对坐标和宽高数据同步至应用层，应用层通过获取词法解析模块、布局和渲染模块的属性和参数实现控制播放；

本发明的方法通过定制浏览器内核处理video标签涉及的解析、布局和渲染模块，将video标签作为一个占位元素，清理低于该元素图层层级的所有显示内容，从浏览器内部实现指定区域透明效果，进而实现调用外部SDK播放的视频窗口上悬浮WebUI的效果。

进一步地，具体包括以下步骤：

A.定制电视浏览器内核词法解析模块；所述词法解析模块用于解析video标签属性，定义扩展方法响应video标准播放定义的player控制事件，定义播放事件存储对象进行存储，维护web逻辑控制的播放状态机；

B.定制电视浏览器内核布局模块；所述布局模块用于通过样式计算获取video节点在可视区域内的绝对位置和宽高数据；

C.定制电视浏览器内核渲染模块；所述渲染模块用于清理渲染树中video节点的所有父节点对应的渲染对象；

D.自定义通信机制用于Android应用层与定制的电视浏览器内核之间交互通信；实现应用层播放控制模块与浏览器内核的属性传递处理和播放状态同步；

E.定制播放控制模块，所述播放控制模块用于处理播放属性和播控事件及执行最终播放操作。

进一步地，所述词法解析模块被配置为：解析web页面中的video标签、创建对应的video节点并插入DOM树中；定义video节点属性值存储对象，对处理的video元素相关属性值进行存储；定义扩展方法响应video标准播放定义的player控制事件，定义播放事件的存储对象并进行存储，维护web逻辑控制的播放状态机。

进一步地，所述布局模块被配置为：根据所述词法解析模块创建的video节点，创建ReplaceElement节点继承video节点属性并加入渲染树布局，及通过样式计算及获取ReplaceElement节点在可视区域内的绝对位置和宽高数据并存储。

进一步地，所述渲染模块被配置为：同步所述布局模块中ReplaceElement节点的绝对坐标和宽高数据，获取对应可视窗口内矩形区域，清理得到矩形区域的ReplaceElement节点的所有父节点渲染对象。

进一步地，所述步骤C中自定义的通信机制具体是通过使用Android的JNI机制进行所述应用层与浏览器内核之间通信。

进一步地，所述步骤C中自定义的通信机制被配置为：

将浏览器内核处理的video标签对应的ReplaceElement节点在可视区域的绝对位置和宽高数据传递至应用层；

将浏览器内核处理video标签设置的属性参数和player事件传递至应用层用于播放控制；

将应用层的播放状态同步至浏览器内核以维护播放状态机。

进一步地，所述播放控制模块被配置为：

接收所述通信机制传递的video标签对应的ReplaceElement节点在可视区域的绝对位置和宽高数据；

通过调用播放SDK模块API进行指定区域播放操作；

定义播放事件响应服务，接收所述通信机制传递的属性参数和player事件进行播放控制。

同时，本发明公开了一种Android电视浏览器应用运行方法，基于权利要求1-8中任一所述的一种基于Android电视浏览器的视频播放实现方法实现，其特征在于，包括以下步骤：

S1.浏览器内核进行初始化并启动浏览器进程，进入步骤S2及步骤S3；

S2.调用外部播放SDK进行播放功能初始化，进入步骤S4；

S3.调用loadUrl接口加载web页面，进入步骤S5；

S4.由播放控制模块创建播放控制处理流程，等待处理播放窗口的位置区域参数和播控事件，进行应用播放控制；

S5.浏览器通过网络模块获取到web页面数据并进入定制的词法解析模块，将video标签处理为video节点并加入DOM树，分别进入步骤S6及步骤S7；

S6.临时存储词法解析模块解析的video属性，使用定制的通信机制将临时存储的video属性传递至步骤S4创建的播放控制处理流程，实现播放器的属性和状态控制；

S7.由浏览器的布局模块处理video节点，通过样式计算获取video节点在可视区域内的绝对坐标和区域大小数据，分别进入步骤S8及步骤S9；

S8.通过定制的通信机制将绝对坐标和区域大小数据传递至步骤S4创建的播放控制处理流程，对播放窗口数据进行设置和更新；

S9.将web页面布局逻辑中层叠与video元素下方的所有元素在重合区域内设置透明，实现该区域显示底层的播放窗口，层叠与video元素上方的UI元素正常渲染显示。

本发明与现有技术相比，具有以下的有益效果：

通过本发明的基于Android电视浏览器的视频播放实现方法及浏览器应用运行方法，通过定制浏览器内核处理video标签涉及的解析、布局和渲染模块，将video标签作为一个占位元素，清理低于该元素图层层级的所有显示内容，从浏览器内部实现指定区域透明效果，进而实现调用外部SDK播放的视频窗口上悬浮WebUI的效果；从而有效解决了基于浏览器应用引用外部SDK实现播放功能，视频播放窗口与web悬浮UI存在层级遮挡的问题，为电视应用实现更多元化显示交互效果提供了技术保障，达到进一步提高用户体验的有益效果。

附图说明

图1是本发明的一个实施例的浏览器的应用层UI布局示意图。

图2是本发明的一个实施例的浏览器应用运行方法流程示意图。

具体实施方式

下面结合本发明的实施例对本发明作进一步的阐述和说明。

实施例：

实施例一：

目前，浏览器应用为了播放具有版权保护的视频资源，必须通过调用外部SDK进行播放，同时加载带有实体背景图片的WebUI悬浮于视频播放窗口之上。现有技术采用的手段需要在浏览器内核中创建video标签对应的播放器进行播放，或者创建完全独立于浏览器的播放器进行播放，上述方式均无法满足视频播放窗口上显示悬浮WebUI的需求，针对浏览器应用引用外部SDK实现播放功能时视频播放窗口与web悬浮UI存在层级遮挡的问题，本实施例公开了一种基于Android电视浏览器的视频播放实现方法。

本实施例的基于Android电视浏览器的视频播放实现方法本实施例以Android电视浏览器应用调用外部SDK播放视频，同时加载web页面显示悬浮UI的运行流程作为具体的实现过程说明，其中心思想为：通过定制浏览器内核词法解析模块，将传统播放流程剥离，解析video标签并创建相应的video节点插入DOM树，解析并存储web逻辑控制的video标签属性及将播放状态同步至应用层；定制内核布局和渲染模块，将词法解析模块创建的DOM节点加入布局，再将渲染树中该区域内容清除，同时将绝对坐标和宽高数据同步至应用层，应用层通过获取词法解析模块、布局和渲染模块的属性和参数实现控制播放；

即通过定制浏览器内核处理video标签涉及的解析、布局和渲染模块，将video标签作为一个占位元素，清理低于该元素图层层级的所有显示内容，从浏览器内部实现指定区域透明效果，进而实现调用外部SDK播放的视频窗口上悬浮WebUI的效果。其中，如图1所示为本方案中应用层UI布局示意，即在本方案中浏览器应用通过的UI布局为RelativeLayout，将播放输出层层叠于浏览器WebUI层下方，确保WebUI悬浮在播放窗口之上。

具体的，上述方法流程具体包括以下步骤：

步骤1.定制电视浏览器内核词法解析模块。

词法解析模块用于解析video标签属性，定义扩展方法响应video标准播放定义的player控制事件，定义播放事件存储对象进行存储，维护web逻辑控制的播放状态机。

具体的，本实施例中，词法解析模块被配置为：解析web页面中的video标签、创建对应的video节点并插入DOM树中；定义video节点属性值存储对象，对处理的video元素相关属性值进行存储；定义扩展方法响应video标准播放定义的player控制事件，定义播放事件的存储对象并进行存储，维护web逻辑控制的播放状态机。

步骤2.定制电视浏览器内核布局模块。

布局模块用于通过样式计算获取video节点在可视区域内的绝对位置和宽高数据。

具体的，本实施例中，布局模块被配置为：根据词法解析模块创建的video节点，创建ReplaceElement节点继承video节点属性并加入渲染树布局，及通过样式计算及获取ReplaceElement节点在可视区域内的绝对位置和宽高数据并存储。

步骤3.定制电视浏览器内核渲染模块。

渲染模块用于清理渲染树中video节点的所有父节点对应的渲染对象。

具体的，本实施例中，渲染模块被配置为：同步布局模块中ReplaceElement节点的绝对坐标和宽高数据，获取对应可视窗口内矩形区域，清理得到矩形区域的ReplaceElement节点的所有父节点渲染对象，从而实现该区域背景“透明”。

步骤4.自定义通信机制用于Android应用层与定制的电视浏览器内核之间交互通信；实现应用层播放控制模块与浏览器内核的属性传递处理和播放状态同步。

具体的，本实施例中，自定义的通信机制具体是通过使用Android的JNI机制进行应用层与浏览器内核之间通信，且自定义的通信机制被配置为：将浏览器内核处理的video标签对应的ReplaceElement节点在可视区域的绝对位置和宽高数据传递至应用层；将浏览器内核处理video标签设置的属性参数和player事件传递至应用层用于播放控制；将应用层的播放状态同步至浏览器内核以维护播放状态机。

步骤5.定制播放控制模块，播放控制模块用于处理播放属性和播控事件及执行最终播放操作。

具体的，本实施例中，播放控制模块被配置为：

接收通信机制传递的video标签对应的ReplaceElement节点在可视区域的绝对位置和宽高数据；通过调用播放SDK模块API进行指定区域播放操作；定义播放事件响应服务，接收通信机制传递的属性参数和player事件进行播放控制。

实施例二

本实施例中具体公开了完成上述配置的Android电视浏览器的一种具体的浏览器应用运行方法，如图2所示，具体包括以下步骤：

S1.浏览器内核进行初始化并启动浏览器进程，进入步骤S2及步骤S3；

S2.调用外部播放SDK进行播放功能初始化，进入步骤S4；

S3.调用loadUrl接口加载web页面，进入步骤S5；

S4.由播放控制模块创建播放控制处理流程，等待处理播放窗口的位置区域参数和播控事件，进行应用播放控制；

S5.浏览器通过网络模块获取到web页面数据并进入定制的词法解析模块，将video标签处理为video节点并加入DOM树，分别进入步骤S6及步骤S7；

S6.临时存储词法解析模块解析的video属性，使用定制的通信机制将临时存储的video属性传递至步骤S4创建的播放控制处理流程，实现播放器的属性和状态控制；

S7.由浏览器的布局模块处理video节点，通过样式计算获取video节点在可视区域内的绝对坐标和区域大小数据，分别进入步骤S8及步骤S9；

S8.通过定制的通信机制将绝对坐标和区域大小数据传递至步骤S4创建的播放控制处理流程，对播放窗口数据进行设置和更新；

S9.将web页面布局逻辑中层叠与video元素下方的所有元素在重合区域内设置透明，实现该区域显示底层的播放窗口，层叠与video元素上方的UI元素正常渲染显示。

综上可知，本发明的技术方案可有效解决浏览器应用引用外部SDK实现播放功能时视频播放窗口与web悬浮UI存在层级遮挡的问题。

可以理解的是，以上实施方式仅仅是为了说明本发明的原理而采用的示例性实施方式，然而本发明并不局限于此。对于本领域内的普通技术人员而言，在不脱离本发明的精神和实质的情况下，可以做出各种变型和改进，这些变型和改进也视为本发明的保护范围。