阅读说明：本技术 控制视频中页面元素的布局的方法、系统及存储介质 (Method, system and storage medium for controlling layout of page elements in video ) 是由 王群 于 2019-04-30 设计创作，主要内容包括：本发明涉及视频处理技术领域,公开一种控制视频中页面元素的布局的方法、系统及机器可读存储介质,该控制视频中页面元素的布局的方法包括：配置视频中各个预设时间段对应的页面元素的布局,其中,所述页面元素的布局与对应预设时间段呈现的视频内容相适配；以及获取视频的当前播放时间,并触发展示与所述当前播放时间相匹配的所述预设时间段对应的所述页面元素的布局。该控制视频中页面元素的布局的方法实现了页面元素会根据播放时间的自动调整。(The invention relates to the technical field of video processing, and discloses a method, a system and a machine-readable storage medium for controlling the layout of page elements in a video, wherein the method for controlling the layout of the page elements in the video comprises the following steps: configuring the layout of page elements corresponding to each preset time period in a video, wherein the layout of the page elements is matched with video content presented corresponding to the preset time period; and acquiring the current playing time of the video, and triggering and displaying the layout of the page elements corresponding to the preset time period matched with the current playing time. The method for controlling the layout of the page elements in the video realizes the automatic adjustment of the page elements according to the playing time.)

控制视频中页面元素的布局的方法、系统及存储介质

技术领域

本发明涉及视频处理技术领域，特别涉及一种控制视频中页面元素的布局的方法、系统及存储介质。

背景技术

随着互联网视频技术的发展，视频网页作为一种重要的视频内容承载方式有着非常便捷和友好的传播性，是用户与视频交互的主要载体。

现阶段视频中的页面元素在视频播放的过程中一般都固定在一个相同的位置，并没有对页面元素进行位置或样式的调整。在播放视频的过程中，视频的内容常常会处于页面元素的下层而被页面元素所遮挡，除此之外，页面元素的颜色和视频内容的颜色也常常相同，使得页面元素的部分无法正常的显示。上述的问题对于用户的体验来说显得非常不友好。

发明内容

本发明提出一种控制视频中页面元素的布局的方法，该控制视频中页面元素的布局的方法实现了页面元素会根据播放时间的自动调整，以避免出现遮挡视频内容和与视频内容重色等问题。

为达到上述目的，本发明的技术方案是这样实现的：

本发明提供一种控制视频中页面元素的布局的方法，该控制视频中页面元素的布局的方法包括：配置视频中各个预设时间段对应的页面元素的布局，其中，所述页面元素的布局与对应预设时间段呈现的视频内容相适配；以及获取视频的当前播放时间，并触发展示与所述当前播放时间相匹配的所述预设时间段对应的所述页面元素的布局。

优选地，配置视频中各个预设时间段对应的页面元素的布局，包括：在视频中的各个预设时间段中预设时间片数据，且所述时间片数据包括所述页面元素的布局。

优选地，触发展示与所述当前播放时间相匹配的所述预设时间段对应的所述页面元素的布局，包括：确定与所述当前播放时间相匹配的所述预设时间段，调用所匹配的预设时间段中预设的所述时间片数据以触发展示所述页面元素的布局。

优选地，所述页面元素的布局包括有以下至少之一者：页面元素增加、页面元素删除、页面元素修改；其中，所述页面元素修改包括：所述页面元素的样式修改和所述页面元素的位置修改。

优选地，该控制视频中页面元素的布局的方法还包括：获取所述页面元素的预设布局限制条件，根据所述预设布局限制条件与所触发展示的所述页面元素的布局来重新确定所述页面元素的实际布局。

相对于现有技术，本发明的控制视频中页面元素的布局的方法，根据当前视频的播放时间控制确定所述视频中所述页面元素的布局，避免了页面元素遮挡视频内容，也避免了页面元素与视频内容重色的问题。

本发明还提供一种控制视频中页面元素的布局的系统，该控制视频中页面元素的布局的系统包括：视频处理模块，用于配置视频中各个预设时间段对应的页面元素的布局，其中，所述页面元素的布局与对应预设时间段呈现的视频内容相适配；以及页面元素控制器，用于获取视频的当前播放时间，并触发展示与所述当前播放时间相匹配的所述预设时间段对应的所述页面元素的布局。

优选地，所述视频处理模块，还用于在视频中的各个预设时间段中预设时间片数据，且所述时间片数据包括所述页面元素的布局。

优选地，所述页面元素控制器，还用于确定与所述当前播放时间相匹配的所述预设时间段，调用所匹配的预设时间段中预设的所述时间片数据以触发展示所述页面元素的布局。

优选地，所述页面元素控制器还用于获取所述页面元素的预设布局限制条件，并根据所述预设布局限制条件与所确定的确定所述页面元素的布局来重新确定所述页面元素的布局。

所述控制视频中页面元素的布局的系统与控制视频中页面元素的布局的方法相对于现有技术所具有的优势相同，在此不再赘述。

为达到上述目的，本发明的技术方案是还可以通过这样来实现：

本发明还提供一种机器可读存储介质，该机器可读存储介质上存储有指令，该指令用于使得机器执行上述的控制视频中页面元素的布局的方法。

所述机器可读存储介质与控制视频中页面元素的布局的方法相对于现有技术所具有的优势相同，在此不再赘述。

本发明的其它特征和优点将在随后的

具体实施方式

部分予以详细说明。

附图说明

构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施方式及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1为本发明的控制视频中页面元素的布局的方法的流程图；

图2为本发明的控制视频中页面元素的布局的方法的另一种实施方式的流程图；

图3a为本发明的元素组件显示层和视频层的位置关系示意图；

图3b为本发明的图3a中的元素组件显示层中的元素组件A、元素组件B或元素组件C的结构示意图；以及

图4为本发明的一种控制视频中页面元素的布局的系统的拓扑结构框图。

附图标记说明：

1、视频处理模块； 2、页面元素控制器；

3、元素组件显示层； 4、视频层；

5、位置接口； 6、样式接口。

具体实施方式

以下结合附图对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。

本发明实施方式实际是在可以获得视频的页面元素的编辑权限和视频ID的基础上来进行的。例如，在使用本发明实施方式的方案之前先获得视频的页面元素的编辑权限和视频的ID，获得相应的页面元素的编辑权限之后才能进行页面元素的布局，在获得视频ID之后才能得到视频内容播放时间，才能实现本发明实施方式的下述方案。

在本发明的一种具体实施方式中，如图1所示，为了实现页面元素的布局，避免页面元素遮挡视频内容，也避免页面元素与视频内容重色的问题，提出一种控制视频中页面元素的布局的方法，该控制视频中页面元素的布局的方法可以包括：步骤S101，配置视频中各个预设时间段对应的页面元素的布局，其中，所述页面元素的布局与对应预设时间段呈现的视频内容相适配；以及步骤S102，获取视频的当前播放时间，并触发展示与所述当前播放时间相匹配的所述预设时间段对应的所述页面元素的布局。

举例而言，用户在观看现有的视频时，界面还会显示页面元素，而该页面元素包括有“视频作者”、“关注”等快捷按键，上述的页面元素设置于视频的上部，由于显示的问题，页面元素很容易遮挡住视频本身，造成用户无法观看到视频内容。现有技术对此并未有任何处理，用户体验会变得较差。采用本发明实施方式的方法之后，预先配置视频中各个预设时间段对应的上述页面元素的布局，例如配置视频播放至某一特定时间后，“关注”按键隐藏或与当前页面的颜色相适配，再例如还可以改变页面元素的位置以避免其在该特定时间遮挡视频。然后，获取视频的当前播放时间，若为这里的特定时间，则触发页面布局按预设的布局进行调整并展示。该调整后展示的布局方式使得用户观看视频内容时页面元素不会遮挡用户的观看。

因此，相对于现有技术，本发明的控制视频中页面元素的布局的方法可以实现页面元素的布局的配置，并能够根据所采集的当前播放时间和所配置的页面元素的布局，最终使得用户在观看视频时，随着用户观看视频内容的变化，页面元素会根据视频的当前播放时间改变页面元素布局，避免出现现有技术中的出现遮挡视频内容和与视频内容重色的问题。

在优选的实施方式中，对于步骤S101，配置视频中各个预设时间段对应的页面元素的布局可以包括：在视频中的各个预设时间段中预设时间片数据，且所述时间片数据包括所述页面元素的布局。其中，时间片数据包括了页面元素的布局，而页面元素布局还包括了页面元素的增、删、改、移动等变化方式。通过实时判断当前视频播放时间是否存在相应控制信息，根据控制信息以调用并使用时间片数据。另外，可以将时间片数据存储在云端或者存储在预设数据库中，方便后续使用的调用，但时间片数据的格式必须统一，必须根据需求进行规定。在本发明的实施例中，时间片数据主要是根据离线人工标注相应信息而产生的，离线人工标注为人工将相应视频ID对应的时间片数据按格式存入数据表中，从而方便调用。

在该种实施方式中，对于步骤S102，触发展示与所述当前播放时间相匹配的所述预设时间段对应的所述页面元素的布局，可以包括：确定与所述当前播放时间相匹配的所述预设时间段，调用所匹配的预设时间段中预设的所述时间片数据以触发展示所述页面元素的布局。其中，时间片数据被调用之后，最终用于展示所述页面元素的布局，时间片数据中包含的所述页面元素的布局可以包括有以下至少之一者：页面元素增加、页面元素删除、页面元素修改。其中，所述页面元素修改可以包括：所述页面元素的样式修改和所述页面元素的位置修改。在上述的实施例中，页面元素的样式修改即为改变页面元素的字体颜色、字体样式等，页面元素的位置修改为页面元素所在视频页面的位置的改变，例如可以在页面的顶部或者也可以在页面的底部。

在本发明的另一种实施方式中，如图2所示，该控制视频中页面元素的布局的方法可以包括：步骤S201，配置视频中各个预设时间段对应的页面元素的布局，其中，所述页面元素的布局与对应预设时间段呈现的视频内容相适配；步骤S202，获取视频的当前播放时间，并得到待触发展示与所述当前播放时间相匹配的所述预设时间段对应的所述页面元素的布局；步骤S203，获取所述页面元素的预设布局限制条件，根据所述预设布局限制条件与所待触发展示的所述页面元素的布局来重新确定所述页面元素的实际布局。其中，布局限制条件为预设的规定某些页面元素不能进行改变的限制条件，即当规定某个页面元素不能改变时，即使上述方法中的视频的当前播放时间到达预设时间段的情况下，也不能对页面元素进行改变，例如规定的用户所设置的字体，不能自动进行改变，需要用户根据自身的需求自行改变。当然，该种预设的方式可以是用户自行设定，例如用户自行设定某个字体颜色或样式必须为黑色和宋体，其自行设定为不能更改，那么在本发明执行的过程中，即使设置有时间片数据需要对该页面元素进行修改，也不能对其进行更改，要保持原始的黑色和宋体的样式，只有在用户未有限定的情况下，才能对其进行修改。

在此，还需强调的是，本发明中实际将页面元素通过页面元素控制组件来进行控制，实际上上述的页面元素控制组件为执行组件，主要用于执行页面元素的位置调整和颜色改变。例如，如图3a所示，视频页面分成两侧，在下层的为视频层4，在上层的为元素组件显示层3，且在所述元素组件显示层3上设置有两个对外接口，以便于控制信息与其进行友好的衔接和数据输入。其中，如图3b所示的两个对外接口，一个是位置接口5，一个是样式接口6，元素组件是显示还是隐藏以及元素组件的颜色、形状等样式的改变方式都要基于样式接口6所接收到的控制信息。根据所接收到的控制信息，实现页面元素的位置和样式的改变。

在本发明的一种最优选的实施例中，继续参考图3a，例如有一个长达70s的视频文件中，用户在观看过程中在10s-20s、20s-50s、50s-70s分别会出现不同的页面元素遮挡和重色的问题，而视频中包括有元素组件A、元素组件B、元素组件C三种元素组件。基于此，采用本发明的上述方法，预先配置视频文件中的时间片数据，并预先对视频页面中的区域位置进行切分，其切分为多个位置坐标，如下所述，

当前时间段1：{

元素组件A：{位置：{top1，left1}，颜色：blue}，

元素组件B：{位置：{top2，left2}，颜色：#fff}}；

当前时间段2：{

元素组件A：{位置：{top3，left3}，颜色：blue}，

元素组件B：{位置：{top4，left4}，颜色：#fff}}；

当前时间段3：{

元素组件A：{位置：{top3，left3}，颜色：red}，

元素组件B：{位置：{top4，left4}，颜色：#fff}

元素组件C：{位置：{top5，left5}，颜色：#fff}}；

例如当前时间段1为10s-20s这个区间，元素组件A的颜色由初始的颜色变换为蓝色，且位置由初始位置调整为{top1，left1}的位置；元素组件B的颜色由初始的颜色变换为预设的一个颜色(根据实际预设，本实施例用#fff来代替)，且位置由初始位置调整为{top2，left2}的位置，元素组件C由于没有修改权限，根据预设布局限制条件无法进行修改。当前时间段2为20s-50s这个区间，元素组件A的颜色由初始的颜色依然为蓝色，且位置由坐标{top1，left1}的位置调整为{top3，left3}的位置；元素组件B的颜色依然为上述预设的一个颜色(根据实际预设，本实施例用#fff来代替)，且位置由{top2，left2}的位置调整为{top4，left4}的坐标位置，元素组件C由于没有修改权限，根据预设布局限制条件无法进行修改。当前时间段3为50s-70s这个区间，元素组件A的颜色由蓝色变换为红色，且位置继续保持在坐标{top3，left3}的位置；元素组件B的颜色依然为上述预设的一个颜色(根据实际预设，本实施例用#fff来代替)，且位置继续保持在坐标{top4，left4}的位置，元素组件C在该种时间段下也可以进行调整，元素组件C由初始的颜色变换为预设的一个颜色(根据实际预设，本实施例用#fff来代替)，且位置由初始位置调整为{top5，left5}的位置。通过上述的实施例，使得用户在观看视频时，观看到10s、20s、50s时，页面元素的位置和颜色都会做出相应的改变，让用户可以获得更加优化的视频体验。另外，在本发明的上述实施例中，所述当前播放时间与所述预设时间段相匹配的判断方式可以通过下述的方式来实现，比如在当前时间段1的10s-20s这个区间中，在当前播放时间处在10s-12s时，可以认为得到触发，控制展示页面元素的位置和颜色做出相应的改变；在当前时间段2的20s-50s这个区间中，在当前播放时间处在20s-22s时，可以认为得到触发，控制展示页面元素的位置和颜色做出相应的改变，在当前时间段3的50s-70s这个区间中，在当前播放时间处在50s-52s时，可以认为得到触发，控制展示页面元素的位置和颜色做出相应的改变。在本发明中，通过利用网页上的视频标签，例如video中的当前视频资源指向地址，即当前播放视频的ID，实时获取视频内容当前播放时间。

综上所述，在本发明的一种具体实施例中，视频网页可以提前根据每个视频ID通过网络向服务端请求此视频的离线时间段控制信息，在控制信息返回后，将视频的时间段进行切分，每个时间段起点为Key(该Key值可以是10s-20s区间中的10s-12s；20s-50s区间中的20s-22s；50s-70s区间中的50s-52s)。用户在播放视频时页面元素控制器实时触发调用页面元素控制组件，并接收传入的当前视频播放时间，如果当前播放时间与时间片数据的key值近似相同，则通过页面元素控制器在页面元素控制组件中传入相应时间片数据指导改变元素样式和元素位置，针对不同视频的不同时间段给用户变化的视频观赏体验。

除此之外，本发明还提供一种控制视频中页面元素的布局的系统，该控制视频中页面元素的布局的系统的拓扑图如图4所示，该系统可以包括：视频处理模块1，用于配置视频中各个预设时间段对应的页面元素的布局，主要用于对视频进行预先处理，其中，所述页面元素的布局与对应预设时间段呈现的视频内容相适配；以及页面元素控制器2，用于获取视频的当前播放时间，并触发展示与所述当前播放时间相匹配的所述预设时间段对应的所述页面元素的布局。

其中，如上所述，本发明的控制视频中页面元素的布局的系统的视频处理模块1可以预先对视频进行数据的处理，在视频中的各个预设时间段中预设时间片数据，且所述时间片数据包括所述页面元素的布局。视频处理模块1的工作步骤为：人工标注相应的信息，将人工标注的相应的信息作为时间片数据按照格式存入相应视频ID的数据表，该数据表可以存储在云端，然后再执行下一步的操作，用于给所述页面元素控制器2进行调用。

在该种实施方式中，所述页面元素控制器2，还用于确定与所述当前播放时间相匹配的所述预设时间段，调用所匹配的预设时间段中预设的所述时间片数据以触发展示所述页面元素的布局。

其中，页面元素控制器2主要用于通过视频ID获取视频中相应格式的存储在云端的时间片数据，根据所获取的当前播放时间数据，实时在时间片数据中查找，如果当前播放时间时间片数据中有相应的控制信息，则响应所调用的相应的控制信息，并将所述时间片数据传递至所述页面元素控制组件的样式接口6和位置接口5(图3b所示的两个接口)上，相应页面元素控制组件收到控制信息后，根据所述时间片数据更新页面组件中页面元素的样式和位置，以达到预想的效果。

在本发明的一种具体实施方式中，所述页面元素控制器2还用于获取所述页面元素的预设布局限制条件，并根据所述预设布局限制条件与所确定的确定所述页面元素的布局来重新确定所述页面元素的布局。页面元素的预设布局限制条件可以预先设定，某些页面元素为不能改变的，某些页面元素为可以改变的，需要预先进行限制。

该实施方式的控制视频中页面元素的布局的系统的更多实施细节及效果可参考前述关于控制视频中页面元素的布局的方法的实施方式，在此不再赘述。

本发明实施方式还提供了一种机器可读存储介质，该机器可读存储介质上存储有指令，该指令用于使得机器执行上述任意一项所述的控制视频中页面元素的布局的方法。当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：配置视频中各个预设时间段对应的页面元素的布局，其中，所述页面元素的布局与对应预设时间段呈现的视频内容相适配；以及获取视频的当前播放时间，并触发展示与所述当前播放时间相匹配的所述预设时间段对应的所述页面元素的布局。配置视频中各个预设时间段对应的页面元素的布局，包括：在视频中的各个预设时间段中预设时间片数据，且所述时间片数据包括所述页面元素的布局。触发展示与所述当前播放时间相匹配的所述预设时间段对应的所述页面元素的布局，包括：确定与所述当前播放时间相匹配的所述预设时间段，调用所匹配的预设时间段中预设的所述时间片数据以触发展示所述页面元素的布局。所述页面元素的布局包括有以下至少之一者：页面元素增加、页面元素删除、页面元素修改；其中，所述页面元素修改包括：所述页面元素的样式修改和所述页面元素的位置修改。该控制视频中页面元素的布局的方法还包括：获取所述页面元素的预设布局限制条件，根据所述预设布局限制条件与所触发展示的所述页面元素的布局来重新确定所述页面元素的实际布局。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现目标信息存储。目标信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的目标信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上结合附图详细描述了本发明的优选实施方式，但是，本发明并不限于上述实施方式中的具体细节，在本发明的技术构思范围内，可以对本发明的技术方案进行多种简单变型，这些简单变型均属于本发明的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。

此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。