CN111459487A - 一种展示控件的方法、装置、设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种展示控件的方法、装置、设备及存储介质，该方法应用于应用程序中，包括：获取视频组件，基于所述视频组件创建第一文本视图组件；基于所述第一文本视图组件创建控件展示样式，并设置所述控件展示样式的样式属性信息；根据所述样式属性信息，将各个控件展示在视频页面上。本发明实施例的技术方案，解决了现有技术中一些按钮等控件被视频播放器覆盖，即按钮无法正常显示，导致用户无法执行进一步操作，导致用户体验较差的技术问题，实现了将各个控件展示在视频播放器播放的视频页面上，以便用户通过触发视频页面上的各个控件，使其执行相应的操作，从而提高了用户体验的技术效果。

Description

一种展示控件的方法、装置、设备及存储介质

技术领域

本发明实施例涉及计算机技术领域，尤其涉及一种展示控件的方法、装置、设备及存储介质。

背景技术

原生组件，即非web组件系统扩展Native组件。使用WebView的WebCore渲染之后体验不佳的诟病一直存在。微信中的各个视频播放小程序上因使用原生的WebView进行渲染，存在无法对web原生标签扩展的情形。基于用户体验和技术限制，小程序提出了原生组件的概念，也就是在WebView上面使用原生组件填充占位元素的方式，但是此种方式存在WebView和原生组件在应用层中不属于一个渲染层级，导致WebView上面的标签无法浮于播放页面之上，导致用户无法触发播放页面上的各个控件，即无法执行与各个控件对应的操作，存在用户体验较差的技术问题。

发明内容

本发明提供一种展示控件的方法、装置、设备及存储介质，以实现便捷的触发播放页面上的各个控件，进而执行对应的操作，提高了用户体验的技术效果。

第一方面，本发明实施例提供了一种展示控件的方法，该方法应用于应用程序中，包括：

获取视频组件，基于所述视频组件创建第一文本视图组件；

基于所述第一文本视图组件创建控件展示样式，并设置所述控件展示样式的样式属性信息；

基于所述样式属性信息，将各个控件展示在视频页面上。

第二方面，本发明实施例还提供了一种展示控件的装置，该装置配置于应用程序中，包括：

第一视图组件创建模块，用于获取视频组件，基于所述视频组件创建第一文本视图组件；

样本属性信息确定模块，用于基于所述第一文本视图组件创建控件展示样式，并设置所述控件展示样式的样式属性信息；

控件展示模块，用于根据所述样式属性信息，将各个控件展示在视频页面上。

第三方面，本发明实施例还提供了一种设备，所述设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明实施例任一所述的展示控件的方法。

第四方面，本发明实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如本发明实施例任一所述的展示控件的方法。

本发明实施例的技术方案，通过在第一文本视图组件中创建控件展示样式，并获取存储的控件展示样式的样式属性信息，基于样式属性信息展示各个控件，解决了现有技术中各个控件会被视频播放器覆盖，导致无法正常显示各个控件，进而无法触发各个控件以使播放器执行与各个控件相对应的操作的问题，实现了基于设置的样式属性信息，将各个控件展示的播放器页面上，以便用户触发从而执行相应的操作，提高了用户体验以及使用便捷的技术效果。

附图说明

为了更加清楚地说明本发明示例性实施例的技术方案，下面对描述实施例中所需要用到的附图做一简单介绍。显然，所介绍的附图只是本发明所要描述的一部分实施例的附图，而不是全部的附图，对于本领域普通技术人员，在不付出创造性劳动的前提下，还可以根据这些附图得到其他的附图。

图1为本发明实施例一所提供的一种展示控件的方法流程示意图；

图2为本发明实施例一所提供的将控件展示在播放页面上的示意图；

图3为本发明实施例一所提供的一种展示控件的方法示意图；

图4为本发明实施例二所提供的一种展示控件的方法另一流程示意图；

图5为本发明实施例二所提供的触发下一视频的示意图；

图6为本发明实施例三所提供的一种展示控件的装置的结构示意图；

图7为本发明实施例四所提供的一种设备结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1为本发明实施例一所提供的一种展示控件的方法流程示意图，本实施例可适用于微信中的各个播放视频的小程序中，可以将各个按键展示在播放器播放页面上的情形，该方法可以由控件展示装置来执行，该装置可以通过软件和/或硬件的形式实现，可选的，PC端、服务器等设备。

为了清楚地了解本发明实施例的技术方案，可以以应用程序中的各个播放视频的小程序为例来介绍。示例性的，可以以微信中的各个播放视频的小程序为例来介绍。也就是说，本技术方案可以解决微信中各个播放视频的小程序中按键或按钮被覆盖的问题。

如图1，本实施例的方法包括：

S110、获取视频组件，基于所述视频组件创建第一文本视图组件。

需要说明的是，本发明实施例的技术方案可以适用于微信中的播放视频的小程序中，通过微信应用程序可以触发至少一个其他小程序，可选的，游戏小程序、视频播放小程序等。

其中，视频组件可以理解为播放视频的组件。第一文本视图组件可以是cover-view组件，用于存储各个控件的信息，即用于存储与各个按键或者按钮相对应的信息。

具体的，可以在微信应用程序中的视频组件中，创建第一文本视图组件，以在文本视图组件中存储各个控件，以便在检测到播放视频的小程序工作时，可以获取视频组件中基于该视频组件创建的第一文本视图组件。

也就是说，可以在视频组件下创建cover-view组件，即第一文本视图组件，以将各个控件的信息存储在所述第一文本视图组件中。

S120、基于所述第一文本视图组件创建控件展示样式，并获取所述控件展示样式的样式属性信息。

其中，控件展示样式用于控制各个控件的展示方式。展示样式的样式属性信息主要是在控件展示样式中添加对应的属性，可选的，在控件展示样式中加上visibility:visible！Important属性。加入此样式属性信息的好处在于，大部分IOS机型中视频组件下的第一文本视图组件中会被强制的加入style visibility:hidden属性，导致视频播放页面上的各个控件被隐藏，而通过本发明实施例中的添加样式属性信息，可以避免控件被隐藏，进而将各个控件展示在显示页面上。

S130、根据所述样式属性信息，将各个控件展示在视频页面上。其中，各个控件可以是视频播放按钮、视频暂停按钮、图片、或者边框等。

具体的，第一文本视图组件(cover-view组件)的显示和隐藏动作，需要通过展示样式属性中display:none|block控制，以便在部分机型下被视频组件覆盖的问题，即基于样式属性信息中存储的属性信息，以及样式属性信息中已有的属性信息，可以将各个控件展示在视频页面上。

基于本实施例技术方案，将各个播放控件展示在视频播放页面上，可以如图2所示，可以在视频播放器上显示各个按钮控件，以便用户触发各个按钮控件，进而执行与各个按钮相对应的操作。

本发明实施例的技术方案，通过在第一文本视图组件中创建控件展示样式，并获取存储的控件展示样式的样式属性信息，基于样式属性信息展示各个控件，解决了现有技术中各个控件会被视频播放器覆盖，导致无法正常显示各个控件，进而无法触发各个控件以使播放器执行与各个控件相对应的操作的问题，实现了基于设置的样式属性信息，将各个控件展示的播放器页面上，以便用户触发从而执行相应的操作，提高了用户体验以及使用便捷的技术效果。

作为上述实施例的一优先实施例，图3为本发明实施例所提供的展示控件的方法另一流程示意图。

在原生组件中，也就是说视频组件下创建第一文本视图组件，并将各个控件存储到第一文本视图组件中，在第一文本视图组件的创建展示控件中设置控件展示样式的样式属性信息，可选的，控件展示样式中插入visibility:visible！Important，这样设置的好处最爱与，大部分IOS机型中会强制加入style visibility:hidden，因此在style中加上visibility:visible！Important放置控件消失，以确保所有cover-view用到的各个控件一开始均存在。具体是需要显示还是隐藏可以通过控件展示样式中的display:none|block控制。

实施例二

图4为本发明实施例二所提供的一种展示控件的方法另一流程示意图，如图4所示，所述方法包括：

在视频播放器播放视频时，存在从当前视频跳转到下一视频时，即在加载下一视频时存在黑屏状态，黑屏状态可以覆盖原先的预览图，直至下一视频第一秒播放之前会一直处于黑屏状态，存在用户体验不佳的问题，参见图5，在触发下一视频播放时，下一视频的播放过程可以是：页面载入、显示视频组件、加载视频文件-视频组件黑屏-加载完成后，视频开始播放。

也就是说，在将各个控件展示在播放视频的页面上之前，存在视频切换时黑屏的现象。

S210、当检测到触发播放下一视频的操作时，获取预先存储到第二文本视图组件中与预览图相对应的目标属性信息。

其中，第二文本视图组件主要是用于存储预览图信息的组件。目标属性信息可以是与预览图对应的预览图地址。下一视频可以理解为与用户触发操作相对应的待播放视频，可选的，若用户向下滑动，则下一个视频可以是当前视频之后的视频；若用户向上滑动，下一个视频为当前视频的上一视频。预览图可以是下一视频的前几帧图像，可选的，三帧图像。

具体的，当检测到触发播放下一视频的操作时，可以获取预选存储到第二文本视图组件中与预览图相对应的目标属性信息，即获取与预览图相对应的预览图地址。

在获取预先存储到第二文本视图组件中与预览图相对应的目标属性信息之前，还包括：加载视频控件，并将视频组件中的预览图属性信息设置为目标属性信息；基于视频组件创建第二文本视图组件，并将目标属性信息导入至第二文本视图组件；其中，目标属性信息中包括预览图的地址信息。

也就是说，在获取第二文本视图组件中存储的属性信息之前，需要预先创建第二文本视图组件，并基于所述第二文本视图组件存储目标属性信息。

具体的，在视频组件中，创建第二文本视图组件。第二文本视图组件中的poster属性，即预览图属性，可以写入预览图地址。进一步的，在视频组件下创建cover-view组件(微信小程序中的官方组件)，将与预览图对应的目标属性信息，即与预览图相对应的目标地址存储到第二文本视图组件中。

为了进一步存储与预览图相对应的目标属性信息，可以在第二文本视图组件中创建预览图存储组件cover-image组件，以将与所述预览图对应的目标属性信息存储到预览图存储组件中。

也就是说，在第二文本视图组件中创建预览图存储组件，即cover-image组件后，可以将与预览图对应的目标属性信息，即将与预览图相对应的地址存储到cover-image组件中。

S220、基于与预览图信息相对应的目标属性信息，播放下一视频，并基于第一文本视图组件中存储的样式属性信息，将各个控件展示在下一视频的视频页面上。

具体的，可以获取与预览图信息相对应的目标属性信息，即在加载下一视频时，可以基于预览图地址播放预览图，避免在加载下一视频时出现黑屏的情形，在加载下一视频时，也可以基于第一文本视图组件中存储的样式属性信息，将各个控件展示在下视频的视频播放页面上。

本实施例的技术方案，通过检测到触发播放下一视频的操作时，获取预选存储的与预览图相对应的预览图地址信息，在加载下一视频的过程中，基于预览图地址信息播放预览图信息，避免了在等待加载视频的过程中出现黑屏的情况，也实现在视频播放器播放视频时，将各个控件展示在视频播放页面上的情形。

实施例三

图6为本发明实施例三提供的一种展示控件的结构示意图，该装置包括：第一视图组件创建模块310、样本属性信息确定模块320和控件展示模块330；其中，

第一视图组件创建模块310，用于获取视频组件，基于所述视频组件创建第一文本视图组件；样本属性信息确定模块320，用于基于所述第一文本视图组件创建控件展示样式，并设置所述控件展示样式的样式属性信息；控件展示模块330，用于根据所述样式属性信息，将各个控件展示在视频页面上。

本发明实施例的技术方案，通过在第一文本视图组件中创建控件展示样式，并获取存储的控件展示样式的样式属性信息，基于样式属性信息展示各个控件，解决了现有技术中各个控件会被视频播放器覆盖，导致无法正常显示各个控件，进而无法触发各个控件以使播放器执行与各个控件相对应的操作的问题，实现了基于设置的样式属性信息，将各个控件展示的播放器页面上，以便用户触发从而执行相应的操作，提高了用户体验以及使用便捷的技术效果。

在上述各技术方案的基础上，所述第一视图组件创建模块，在用于获取视频组件，基于所述视频组件创建第一文本视图组件之后，还用于：

将各个控件存储在所述第一文本视图组件中；

其中，各个控件包括：按键、图片、以及边框中的至少一个。

在上述各技术方案的基础上，所述装置还包括：

目标属性信息确定模块，用于当检测到触发播放下一视频的操作时，获取预先存储到第二文本视图组件中与预览图相对应的目标属性信息；

视频播放模块，用于基于与所述预览图信息相对应的目标属性信息，播放下一视频，并基于所述第一文本视图组件中存储的所述样式属性信息，将所述各个控件展示在所述下一视频的视频页面上。

在上述各技术方案的基础上，所述目标属性信息确定模块，还用于：

加载所述视频控件，并将所述视频组件中的预览图属性信息设置为目标属性信息；基于所述视频组件创建所述第二文本视图组件，并将所述目标属性信息导入至所述第二文本视图组件；其中，所述目标属性信息中包括预览图的地址信息。

在上述各技术方案的基础上，所述目标属性信息确定模块，还用于：基于所述视频组件创建所述第二文本视图组件，并基于所述第二文本视图组件创建预览图存储组件，以将与所述预览图对应的目标属性信息存储到所述预览图存储组件中。

在上述各技术方案的基础上，所述目标属性信息确定模块，还用于：从第二文本视图组件的预览图存储组件中，获取与预览图相对应的目标属性信息，以基于所述目标属性信息播放所述预览图。

本发明实施例所提供的展示控件的装置可执行本发明任意实施例所提供的展示控件的方法，具备执行方法相应的功能模块和有益效果。

值得注意的是，上述装置所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明实施例的保护范围。

实施例四

图7为本发明实施例五提供的一种设备的结构示意图。图7示出了适于用来实现本发明实施例实施方式的示例性设备40的框图。图7显示的设备40仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，设备40以通用计算服务器的形式表现。设备40的组件可以包括但不限于：一个或者多个处理器或者处理单元401，系统存储器402，连接不同系统组件(包括系统存储器402和处理单元401)的总线403。

总线403表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

设备40典型地包括多种计算机系统可读介质。这些介质可以是任何能够被设备40访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器402可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)404和/或高速缓存存储器405。设备40可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统406可以用于读写不可移动的、非易失性磁介质(图7未显示，通常称为“硬盘驱动器”)。尽管图7中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线403相连。存储器402可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块407的程序/实用工具408，可以存储在例如存储器402中，这样的程序模块407包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块407通常执行本发明所描述的实施例中的功能和/或方法。

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

处理单元401通过运行存储在系统存储器402中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的展示控件的方法。

实施例五

本发明实施例五还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行展示控件的方法。

该方法包括：

获取视频组件，基于所述视频组件创建第一文本视图组件；

基于所述第一文本视图组件创建控件展示样式，并设置所述控件展示样式的样式属性信息；

根据所述样式属性信息，将各个控件展示在视频页面上。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

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

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

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

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种展示控件的方法，其特征在于，应用于应用程序中，包括：

获取视频组件，基于所述视频组件创建第一文本视图组件；

基于所述第一文本视图组件创建控件展示样式，并设置所述控件展示样式的样式属性信息；

基于所述样式属性信息，将各个控件展示在视频页面上。

2.根据权利要求1所述的方法，其特征在于，在所述获取视频组件，以及基于所述视频组件创建第一文本视图组件之后，还包括：

将各个控件存储在所述第一文本视图组件中；

其中，各个控件包括：按键、图片、以及边框中的至少一个。

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

当检测到触发播放下一视频的操作时，获取预先存储到第二文本视图组件中与预览图相对应的目标属性信息；

基于与所述预览图信息相对应的目标属性信息，播放下一视频，并基于所述第一文本视图组件中存储的所述样式属性信息，将所述各个控件展示在所述下一视频的视频页面上。

4.根据权利要求3所述的方法，其特征在于，在所述获取预先存储到第二文本视图组件中与预览图相对应的目标属性信息之前，还包括：

加载所述视频组件，并将所述视频组件中的预览图属性信息设置为目标属性信息；

基于所述视频组件创建所述第二文本视图组件，并将所述目标属性信息导入至所述第二文本视图组件；

其中，所述目标属性信息中包括预览图的地址信息。

5.根据权利要求4所述的方法，其特征在于，所述基于所述视频组件创建所述第二文本视图组件，并将所述目标属性信息导入至所述第二文本视图组件，包括：

基于所述视频组件创建所述第二文本视图组件，并基于所述第二文本视图组件创建预览图存储组件，以将与所述预览图对应的目标属性信息存储到所述预览图存储组件中。

6.根据权利要求5所述的方法，其特征在于，所述获取预先存储到第二文本视图组件中与预览图相对应的目标属性信息，包括：

从第二文本视图组件的预览图存储组件中，获取与预览图相对应的目标属性信息，以基于所述目标属性信息播放所述预览图。

7.一种展示控件的装置，其特征在于，配置于应用程序中，包括：

第一视图组件创建模块，用于获取视频组件，基于所述视频组件创建第一文本视图组件；

样本属性信息确定模块，用于基于所述第一文本视图组件创建控件展示样式，并设置所述控件展示样式的样式属性信息；

控件展示模块，用于根据所述样式属性信息，将各个控件展示在视频页面上。

8.根据权利要求7所述的装置，其特征在于，所述第一视图组件创建模块，在用于获取视频组件，基于所述视频组件创建第一文本视图组件之后，还用于：

将各个控件存储在所述第一文本视图组件中；

其中，各个控件包括：按键、图片、以及边框中的至少一个。

9.一种设备，所述设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一所述的展示控件的方法。

10.一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-6中任一所述的展示控件的方法。

Images