在网页上分时显示视频信息的方法及装置与流程

本公开涉及互联网应用技术领域，特别涉及一种在网页上分时显示视频信息的方法及装置。

背景技术：

在相关技术中，视频信息包括解析视频内容后得到的图像帧，以及视频片方或观看用户针对视频内容进行描述的文本信息，图像帧和文本信息在不同页面分时显示。

利用与文本信息类型对应的布局器将该文本信息转化为视图，该视图在第一页面显示，当在第一页面上检测到触控事件时，第一页面跳转到嵌入有视频播放器的第二页面，并且生成用于在视频播放器内播放视频内容的指令。

然而，由于当第一页面跳转到第二页面时，需要创建第二页面且视频播放器接收上述指令之后，在视频播放器的画布上才能显示视频内容的图像帧，导致从显示视图到显示图像帧的时间间隔较长。

技术实现要素：

为了解决相关技术中由于不同页面之间跳转，导致视频信息在不同页面上分时显示的时间间隔较长的技术问题，本公开提供了一种在网页上分时显示视频信息的方法及装置。

一种在网页上分时显示视频信息的方法，所述视频信息包括用于描述视频内容的文本信息和解析所述视频内容后得到的图像帧，所述方法包括：

在当前网页内嵌入视频播放器，且在所述视频播放器的画布上显示所述文本信息生成的视图；

当所述视图上的触控事件被触发时，移除所述视图且生成用于播放所述视频内容的指令；

接收所述指令后，在所述画布上显示所述图像帧。

一种在网页上分时显示视频信息的装置，所述装置包括：

视图显示模块，用于在当前网页内嵌入视频播放器，且在所述视频播放器的画布上显示所述文本信息生成的视图；

视图移除模块，用于当所述视图上的触控事件被触发时，移除所述视图且生成用于播放所述视频内容的指令；

图像显示模块，用于接收所述指令后，在所述画布上显示所述图像帧。

本公开的实施例提供的技术方案可以包括以下有益效果：

在当前网页内嵌入视频播放器，且在视频播放器的画布上显示文本信息生成的视图；当视图上的触控事件被触发时，移除视图且生成用于播放视频内容的指令；接收指令后，在画布上显示图像帧。该方法通过在视频播放器的画布上显示用于描述视频的文本信息生成的视图，并在视图上的触控事件被触发时，移除视图且生成用于播放视频的指令，接收指令后，在画布上显示视频的图像帧，从而实现在同一页面分时显示视频信息，而不用进行不同页面之间的跳转，解决了由于不同页面之间跳转，导致视频信息在不同页面上分时显示的时间间隔较长的技术问题。

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

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并于说明书一起用于解释本发明的原理。

图1是根据一示例性实施例示出的一种在网页上分时显示视频信息的方法的流程图；

图2是图1对应实施例的在当前网页内嵌入视频播放器，且在视频播放器的画布上显示文本信息生成的视图在一个实施例的流程图；

图3是图1对应实施例的当视图上的触控事件被触发时，移除视图且生成用于播放视频内容的指令在一个实施例的流程图；

图4是图1对应实施例的接收指令后，在画布上显示图像帧在一个实施例的流程图；

图5是现有技术中用于描述视频内容的文本信息的视图在一个实施例中的示意图；

图6是现有技术中用于显示图像帧的视频播放器的画布在一个实施例中的示意图；

图7是在网页上分时显示视频信息的方法中在视频播放器的画布上显示视图在一个实施例中的示意图；

图8是根据一示例性实施例示出的一种在网页上分时显示视频信息的装置框图；

图9是图8对应实施例的视图显示模块在一个实施例的框图；

图10是图8对应实施例的视图移除模块在一个实施例的框图；

图11是图8对应实施例的图像显示模块在一个实施例的框图。

具体实施方式

这里将详细地对示例性实施例执行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种在网页上分时显示视频信息的方法的流程图。如图1所示，该在网页上分时显示视频信息的方法可以包括以下步骤。

在步骤110中，在当前网页内嵌入视频播放器，且在视频播放器的画布上显示文本信息生成的视图。

其中，网页中含有进行播放视频资源的页面，网页的页面内嵌入的视频播放器用于实现视频资源的播放。通过在页面中初始化视频播放器，将视频播放器嵌入到网页内。

网页内配置加载视频资源并播放视频资源的画布。当触发进行视频资源访问后，进行网页的加载，并显示该网页。并在显示的网页的页面中，显示画布，从而通过画布实现视频的加载和播放。

视图为显示视频资源的描述信息的界面。在视图上显示视频资源的描述信息，比如视频资源的名称，导演介绍，演员介绍，内容简介等等信息。

在显示的页面配置的画布上，显示视图，从而在网页上，同时显示加载并播放视频资源的画布和显示视频资源的描述信息的视图。

在步骤130中，当视图上的触控事件被触发时，移除视图且生成用于播放视频内容的指令。

其中，触控事件是指对视图上的控件进行触控的行为。视图上的控件包括进行视频资源播放的控件。通过网页上预设的检测区域，对触控事件是否被触发进行检测。

当检测到触控事件时，在网页中，将视图进行移除，并随着视图的移除，在网页的页面上显示配置的画布。之后生成用于播放视频的指令。

播放视频的指令为执行视频资源播放的控制指令。当需进行视频资源的播放时，接收自身发出的播放视频的指令，从而根据指令，实现视频资源的播放。

在步骤150中，接收指令后，在画布上显示图像帧。

其中，网页接收到生成的用于播放视频的指令后，在显示的画布上播放加载后的视频资源，并根据该指令，在画布上播放视频资源。从而实现了在网页的页面上分时显示包含视频信息的视图和播放视频的画布。

此实施例实现了在同一页面分时显示视频信息，从而解决了由于不同页面之间跳转，导致视频信息在不同页面上分时显示的时间间隔较长的技术问题。

图2是根据一示例性实施例示出的对步骤110的细节进行描述。如图2所示，该步骤110可以包括以下步骤。

在步骤111中，在网页的页面中，初始化视频播放器并配置视频播放器所需数据。

其中，视频播放器用于播放视频资源。通过在页面中，通过初始化视频播放器，来做好播放视频资源的准备。初始化视频播放器的过程为通过播放模块为基础在视频播放器创建一个画布来作为视频的载体。

配置所述视频播放器所需数据为将播放所需的视频流和/或音频流地址数据传入视频播放器以供视频播放器调用，从而播放视频数据。

在步骤113中，在视频播放器的画布上显示视图，并使画布的部分区域和视图同时显示。

其中，将视图显示于页面配置的画布上，可在视图显示视频资源的描述信息的同时，在页面中的画布上加载视频资源，为页面播放视频资源提供支持。从而在需要播放视频资源时，节省加载视频资源的时间，在页面中播放加载完毕的视频资源。

画布可对视频资源进行加载，加载视频资源需在画布可见的状态下进行，因此，将视图显示在页面时，使画布的部分区域和视图同时显示，防止视图覆盖画布后，视频资源的加载不能正常进行。

因此根据画布的显示尺寸，调整视图的在画布上的显示尺寸，从而使画布的部分区域和视图同时显示，即画布处于可见状态。

在步骤115中，将图像帧加载到视频播放器。

其中，当画布存在与视图同时显示的区域时，画布可对视频资源进行加载，视频播放器通过下载将要播放的视频资源的数据，实现将视频资源的图像帧加载到视频播放器。将图像帧加载到视频播放器后，通过视频播放器显示图像帧，在画布上实现视频资源的播放。

此实施例实现了使画布的部分区域和视图同时显示，从而实现将图像帧加载到视频播放器。

在一个示例性实施例中，图2对应实施例的在视频播放器的画布上显示视图，并使画布的部分区域和视图同时显示步骤在一个实施例中可以包括以下步骤。

通过设置画布长度大于视图的长度，或/和，画布宽度大于视图的宽度，使画布的部分区域和视图同时显示。

其中，根据画布在页面上的显示的像素长度和/或像素宽度，减小视图的像素长度和/或像素宽度，从而实现画布的部分区域和视图同时显示。

在一个示例性实施例的具体实现中，将视图的像素长度和/或像素宽度配置为比画布在页面上的显示的像素长度和/或像素宽度小一个像素长度和/或像素宽度，从而使画布的部分区域和视图同时显示，且不影响视图的视觉效果。

此实施例实现了画布的部分区域和视图同时显示。

图3是根据一示例性实施例示出的对步骤130的细节进行描述。如图3所示，该步骤130可以包括以下步骤。

在步骤131中，在网页的页面上预设检测区域，在检测区域内检测是否有触控事件被触发。

其中，预设的检测区域为预设的检测视图上的触控事件是否被触发的区域。预设的检测区域可以包括实现触控事件的控件，也可以包括页面上用于检测的空白区域。根据用户对视图上的控件进行的操作，检测视图上的触控事件是否被触发。

在步骤133中，当存在触控事件被触发时，生成用于指示从视频播放器上隐藏视图的属性信息。

其中，属性信息是以触控事件调用的网页脚本运行后返回的字符串表示且用于指示将布局在所述视频播放器上层的视图移除。

检测到触控事件后，生成用于移除视图的属性信息，该属性信息是以触摸事件响应后运行网页脚本程序返回的标识，该标识包括用于指示隐藏视图的标识和用于指示删除视图的标识，进而根据属性信息的调用，实现对视图的移除，从而在页面上显示用于播放图像帧的画布。

其中，在页面上删除视图后，若需要在页面上重新显示视图，则以用于描述视频内容的文本信息重新生成视图，且配置该视图的属性信息为用于指示显示该视图的标识。

在步骤135中，当调用属性信息时，隐藏视图，同时生成用于播放视频的指令。

其中，当调用属性信息时，对视图进行移除操作，使视图处于不可视的状态。在一个示例性实施例中，在页面中，通过透明化处理视图，从而隐藏视图。当视图被隐藏后，页面上配置的画布被显示。同时生成用于播放视频的指令，从而根据指令在页面上配置的画布上，显示视频资源的图像帧，从而实现视频的播放。

此实施例实现了当触控事件被触发后，移除视图，生成用于播放视频的指令。

图4是根据一示例性实施例示出的对步骤150的细节进行描述。如图4所示，该步骤150可以包括以下步骤。

在步骤151中，当在视频播放器上检测到触控事件时，生成用于停止播放视频的指令。

其中，视频播放器上的控件被触发时，视频播放器上的控件检测到触控事件，并在检测到触控事件后，生成用于停止播放视频的指令。

在步骤153中，接收指令后，在画布上重新显示被移除的视图。

其中，视频播放器接收自身发出的用于停止播放视频的指令，从而根据指令，停止视频资源的播放。

在一个示例性实施例的具体实现中，在停止视频资源的播放后，通过调整视图的透明度，重新调出隐藏的视图，将视图返回给页面，并在页面中重新显示视图。根据上述过程，实现了在同一页面上再显示视图的功能。

此实施例实现了停止视频资源的播放，并在同一页面再次显示视图的功能。

图5是现有技术中用于描述视频内容的文本信息的视图在一个实施例中的示意图。

图6是现有技术中用于显示图像帧的视频播放器的画布在一个实施例中的示意图。

图7是在网页上分时显示视频信息的方法中在视频播放器的画布上显示视图在一个实施例中的示意图。

其中，图7通过在图6的画布上显示图5的视图，来实现在网页的页面上分时显示视频信息。在图6的画布上，显示图5的视图，并配置图5的视图的像素长度小于图6画布的像素长度一个像素长度，图7中的示意图为了突出实现方法，将一个像素长度放大，从而更直观的显示在网页的页面上分时显示视频信息的具体实现。当接收到用于播放视频内容的指令后，将图7的示意图中的视图隐藏，变为图6的画布，从而显示图像帧。当接收到用于停止播放视频的指令后，取消视图的隐藏，在图6的画布上，显示图5的视图，此时网页上的显示为图7的示意图。

在一个示例性实施例的具体实现中，配置画布像素长度大于视图的像素长度，或/和，画布像素宽度大于视图的像素宽度一个像素长度。一个像素长度用户难以分辨，从而使得在画布的部分区域和视图同时显示的过程中，用户不被画布影响对视图的浏览和操作。

图8是根据一示例性实施例示出的一种在网页上分时显示视频信息的装置框图。该装置执行图1任一所示的在网页上分时显示视频信息的方法的全部或者部分步骤。如图8所示，该装置包括但不限于：视图显示模块210，视图移除模块230和图像显示模块250。

视图显示模块210用于在当前网页内嵌入视频播放器，且在视频播放器的画布上显示文本信息生成的视图。

视图移除模块230用于当视图上的触控事件被触发时，移除视图且生成用于播放视频内容的指令。

图像显示模块250用于接收指令后，在画布上显示图像帧。

图9是图8对应实施例的视图显示模块在一个实施例的框图。如图9所示，该视图显示模块210包括但不限于：初始化单元211，显示单元213和加载单元215。

初始化单元211用于在网页的页面中，初始化视频播放器并配置视频播放器所需数据。

显示单元213用于在视频播放器的画布上显示视图，并使画布的部分区域和视图同时显示。

加载单元215用于将图像帧加载到视频播放器。

在一个示例性实施例中，图9对应实施例的显示单元包括但不限于：

像素配置单元，用于通过设置画布长度大于视图的长度，或/和，画布宽度大于视图的宽度，使画布的部分区域和视图同时显示。

图10是图8对应实施例的视图移除模块在一个实施例的框图。如图10所示，该视图移除模块230包括但不限于：检测单元231，信息生成单元233和移除单元235。

检测单元231用于在网页的页面上预设检测区域，在检测区域内检测是否有触控事件被触发。

信息生成单元233用于当存在触控事件被触发时，生成用于指示从视频播放器上隐藏视图的属性信息。

移除单元235用于当调用属性信息时，隐藏视图，同时生成用于播放视频的指令。

图11是图8对应实施例的图像显示模块在一个实施例的框图。如图11所示，该图像显示模块250包括但不限于：停止播放指令生成单元251和显示移除单元253。

停止播放指令生成单元251用于当在视频播放器上检测到触控事件时，生成用于停止播放视频的指令。

显示移除单元253用于接收指令后，在画布上重新显示被移除的视图。

上述装置中各个模块的功能和作用的实现过程详见上述在网页上分时显示视频信息的方法中对应步骤的实现过程，在此不再赘述。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本发明的范围仅由所附的权利要求来限制。