[发明专利]视频窗口组件半透明显示方法、装置以及计算机设备

说明书

本发明公开了一种视频窗口组件半透明显示方法，该方法包括：获取视频窗口组件的尺寸，以及终端设备的屏幕分辨率；根据所述视频窗口组件的尺寸以及所述屏幕分辨率将原始背景图像编辑为DIV图层；将所述DIV图层导入到canvas元素，然后进行半透明显示设置；将半透明设置后的canvas元素填充到所述视频窗口组件。本发明还提供一种视频窗口组件半透明显示装置、服务器及计算机可读存储介质。本发明提供的视频窗口组件半透明显示方法、装置、计算机设备及计算机可读存储介质能够实现基于视频网页页面自身元素的视频窗口组件半透明化，从而不需要额外加载ActiveX控件，而且适应性更强，应用效果更好。

技术领域

本发明涉及UI设计技术领域，尤其涉及一种视频窗口组件半透明显示方法、装置、计算机设备及计算机可读存储介质。

背景技术

随着HTML技术的发展，在终端的浏览器页面上进行视频播放的功能越来越简易方便。在实际应用中，往往会在视频播放的窗口部分区域设置悬浮的半透明组件，用于显示菜单栏位或者其他功能模块，这样使得用户同时观看全屏视频以及进行菜单功能选择和操作。然而，现有的半透明组件一般都是利用加载ActiveX控件的方式将RGB(Red、Green、Blue，红、绿、蓝)三原色值定义出的半透明图像整合到视频播放窗口组件，因此需要额外加载ActiveX控件。另外，ActiveX控件并不能与所有运行环境完美兼容，以加载ActiveX控件的方式形成的半透明组件在缩放大小时显示出来的效果并不完全与页面同步。因此，有必要提供一种新的视频窗口组件半透明显示方法。

发明内容

有鉴于此，本发明提出一种视频窗口组件半透明显示方法、装置、计算机设备及计算机可读存储介质，能够获取视频窗口组件的尺寸以及运行该视频页面的终端设备的屏幕分辨率；然后编辑视频窗口背景图像形成DIV图层；接着将DIV图层导入canvas元素，并进行半透明设置，最后再将半透明canvas元素填充到视频窗口组件，从而实现基于视频网页页面自身元素的视频窗口组件半透明化。其中，DIV图层，全称为DIVision，在HTML中用于为显示的内容提供结构和背景的元素；canvas元素在HTML中用于提供图形绘制的元素，相当于一块画布，可以通过Javascript脚本语言直接在canvas元素上绘制图形，或者将已绘制好的图像或者元素直接导入canvas元素。通过以上方式，不需要额外加载ActiveX控件，而且适应性更强，应用效果更好。

首先，为实现上述目的，本发明提供一种视频窗口组件半透明显示方法，该方法应用于终端设备的网页页面，所述方法包括：

获取视频窗口组件的尺寸，以及终端设备的屏幕分辨率；将视频窗口组件的原始背景图像导入DIV图层模板得到对应所述视频窗口组件的尺寸以及所述终端设备的屏幕分辨率的DIV图层；将DIV图层导入到canvas元素，再对所述canvas元素进行半透明显示设置；将半透明显示设置后的canvas元素填充到所述视频窗口组件。

可选地，所述“获取视频窗口组件的尺寸，以及终端设备的屏幕分辨率”的步骤，包括：通过查询所述视频页面的API从而获得视频窗口组件的尺寸；通过查询终端系统配置信息从而获得终端设备的屏幕分辨率。

可选地，所述“将视频窗口组件的原始背景图像导入DIV图层模板得到对应所述视频窗口组件的尺寸以及所述终端设备的屏幕分辨率的DIV图层”的步骤包括：根据所述视频窗口组件的尺寸建立DIV图层模板；根据所述屏幕分辨率和所述视频窗口组件的尺寸将原始背景图像进行相应的尺寸和分辨率的调整；将调整后的背景图像导入到所述DIV图层模板得到DIV图层。

可选地，所述“将DIV图层导入到canvas元素，再对所述canvas元素进行半透明显示设置”的步骤包括：将所述DIV图层导入到canvas元素模板；根据预先设置的半透明配置参数将所述canvas元素进行半透明设置。

此外，为实现上述目的，本发明还提供一种视频窗口组件半透明显示装置，所述装置包括：