CN111464858A

CN111464858A - 一种视频播放方法和装置

Info

Publication number: CN111464858A
Application number: CN202010158250.3A
Authority: CN
Inventors: 吴朝彬
Original assignee: Wuba Co Ltd
Current assignee: Wuba Co Ltd
Priority date: 2020-03-09
Filing date: 2020-03-09
Publication date: 2020-07-28

Abstract

本发明实施例提供了一种视频播放方法及装置，应用于应用程序，通过应用程序中的视频播放组件获取初始元素信息与元素信息的排序信息，从而生成初始元素信息的混合列表，接着可以监测混合列表的滑动，识别出当前的显示区域，若显示区域中的元素信息包括视频信息，且该视频信息的可视百分比满足预设阈值时，则自动播放视频信息。其中，视频播放组件可以为Flutter平台，从而在Android或IOS操作平台上运行应用程序时，可以通过应用程序中的Flutter平台生成混合列表，并实现视频滚动播放，解决了需要针对不同操作***进行混合列表的开发，提高了开发效率，并且可以监测针对混合列表的用户操作事件，充分感知用户的操作，有利于进行业务响应，保证了用户体验。

Description

一种视频播放方法和装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种视频播放方法和一种视频播放装置。

背景技术

随着移动终端的普及，应用程序软件也越来越丰富。其中，很多应用程序的应用界面包括混合列表，在混合列表中可以包括图文信息、视频信息、音频信息等。其中，基于Android和IOS操作***原生技术实现的视频混合列表，可以实现视频滑动播放。然而，不同操作***使用不同的编程语言，一方面需要针对不同的操作***进行开发，开发效率低，且针对两者所开发的混合列表的展示效果不同。另一方面虽然可以通过桥接模式进行开发，但是基于原生操作***的桥接模式所开发的混合列表，本质上是将列表作为一个整体，其业务操作上存在一定的使用限制和操作障碍。

发明内容

本发明实施例是提供一种视频播放方法，以解决现有技术中需要针对不同操作***进行混合列表的开发，开发效率低，且存在一定的使用限制和操作障碍的问题。

相应的，本发明实施例还提供了一种视频播放装置，用以保证上述方法的实现及应用。

为了解决上述问题，本发明实施例公开了一种视频播放方法，应用于应用程序，所述应用程序包括视频播放组件，所述方法包括：

通过所述视频播放组件获取初始元素信息，以及所述初始元素信息的排序信息；

通过所述视频播放组件按照所述排序信息，生成针对所述初始元素信息的混合列表；

通过所述视频播放组件响应针对所述混合列表的第一滑动操作的结束，确定所述混合列表的第一显示区域，所述第一显示区域包括若干个当前元素信息；

当所述第一显示区域中的当前元素信息包括第一视频信息时，则通过所述视频播放组件确定所述第一视频信息的第一可视百分比；

当所述第一视频信息的第一可视百分比满足预设阈值时，则通过所述视频播放组件播放所述第一视频信息。

可选地，还包括：

通过所述视频播放组件响应针对所述混合列表的第二滑动操作的结束，确定所述混合列表的第二显示区域；

当所述第二显示区域中的当前元素信息包括所述第一视频信息与第二视频信息时，则通过所述视频播放组件确定所述第二视频信息的第二可视百分比；

当所述第二视频信息的第二可视百分比满足所述预设阈值时，则通过所述视频播放组件暂停播放所述第一视频信息，并播放所述第二视频信息。

可选地，还包括：

当所述第一视频信息的第一可视百分比小于所述预设阈值时，则通过所述视频播放组件暂停播放所述第一视频信息。

可选地，还包括：

当所述第一视频信息滑出所述显示区域时，则通过所述视频播放组件暂停播放所述第一视频信息。

可选地，所述通过所述视频播放组件响应针对所述混合列表的第一滑动操作的结束，确定所述混合列表的第一显示区域，包括：

通过所述视频播放组件响应针对所述混合列表的第一滑动操作的结束，根据预设步长由上至下遍历所述混合列表，获取第一显示区域。

可选地，视频信息包括视频标识，所述当所述第一显示区域中的当前元素信息包括第一视频信息时，则通过所述视频播放组件确定所述第一视频信息的第一可视百分比，包括：

当所述第一显示区域中检测到所述视频标识时，则通过所述视频播放组件确定与所述视频标识对应的第一视频信息的第一可视百分比。

可选地，所述初始元素信息还包括文本信息、图像信息以及音频信息中的至少一种。

本发明实施例还公开了一种视频播放装置，应用于应用程序，所述应用程序包括视频播放组件，所述装置包括：

位于所述视频播放组件的信息获取模块，用于获取初始元素信息，以及所述初始元素信息的排序信息；

位于所述视频播放组件的混合列表生成模块，用于按照所述排序信息，生成针对所述初始元素信息的混合列表；

位于所述视频播放组件的第一显示区域确定模块，用于响应针对所述混合列表的第一滑动操作的结束，确定所述混合列表的第一显示区域，所述第一显示区域包括若干个当前元素信息；

位于所述视频播放组件的第一可视百分比确定模块，用于当所述第一显示区域中的当前元素信息包括第一视频信息时，则确定所述第一视频信息的第一可视百分比；

位于所述视频播放组件的第一视频信息播放模块，用于当所述第一视频信息的第一可视百分比满足预设阈值时，则播放所述第一视频信息。

可选地，还包括：

位于所述视频播放组件的第二显示区域确定模块，用于响应针对所述混合列表的第二滑动操作的结束，确定所述混合列表的第二显示区域；

位于所述视频播放组件的第二可视百分比确定模块，用于当所述第二显示区域中的当前元素信息包括所述第一视频信息与第二视频信息时，则确定所述第二视频信息的第二可视百分比；

位于所述视频播放组件的第二视频信息播放模块，用于当所述第二视频信息的第二可视百分比满足所述预设阈值时，则暂停播放所述第一视频信息，并播放所述第二视频信息。

可选地，还包括：

位于所述视频播放组件的第一视频信息暂停播放模块，用于当所述第一视频信息的第一可视百分比小于所述预设阈值时，则暂停播放所述第一视频信息。

可选地，还包括：

位于所述视频播放组件的第二视频信息暂停播放模块，用于当所述第一视频信息滑出所述显示区域时，则暂停播放所述第一视频信息。

可选地，所述第一显示区域确定模块具体用于：

响应针对所述混合列表的第一滑动操作的结束，根据预设步长由上至下遍历所述混合列表，获取第一显示区域。

可选地，视频信息包括视频标识，所述第一可视百分比确定模块具体用于：

当所述第一显示区域中检测到所述视频标识时，则确定与所述视频标识对应的第一视频信息的第一可视百分比。

本发明实施例还公开了一种电子设备，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述电子设备执行如上所述的一个或多个的方法。

本发明实施例还公开了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行如上所述的一个或多个的方法。

本发明实施例包括以下优点：

在本发明实施例中，应用于应用程序，通过应用程序中的视频播放组件获取初始元素信息与元素信息的排序信息，从而生成初始元素信息的混合列表，接着可以监测混合列表的滑动，识别出当前的显示区域，若显示区域中的元素信息包括视频信息，且该视频信息的可视百分比满足预设阈值时，则自动播放视频信息。其中，视频播放组件可以为Flutter平台，从而在Android或IOS操作平台上运行应用程序时，可以通过应用程序中的Flutter平台生成混合列表，并实现视频滚动播放，解决了需要针对不同操作***进行混合列表的开发，提高了开发效率，并且可以监测针对混合列表的用户操作事件，充分感知用户的操作，有利于进行业务响应，保证了用户体验。

附图说明

图1是本发明的一种视频播放方法实施例一的步骤流程图；

图2是本发明实施例中混合列表的示意图一；

图3是本发明实施例中混合列表的示意图二；

图4是本发明的一种视频播放方法实施例二的步骤流程图；

图5是本发明的一种视频播放装置实施例的结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

在移动终端的应用程序中，存在许多具有混合列表的应用程序，在这些应用程序的应用显示界面中包括多种元素信息，元素信息可以包括图片信息、文本信息、图文信息、视频信息以及音频信息等等。而针对不同的操作***，需要独自进行开发，或者通过桥接模式进行混合列表的开发。然而，这种开发模式，一方面针对不同操作***进行开发，开发效率低下，且不同操作***的显示效果不同，另一方面，针对一个混合列表上最终展示的所有元素信息，需要建立每个元素信息与混合列表之间的挂载关系，以便在混合列表展示的过程中，根据对应关系，对每个元素在混合列表对应的位置进行渲染展示，由于将元素信息与混合列表之间作为一个整体，在业务上的操作有所限制，无法之间检测滑动情况、加载分页和感知触摸事件等等。

因此，本发明实施例的核心发明点之一在于通过Flutter平台开发混合列表，并通过监测列表的滑动信息，实现列表中视频信息的自动播放，解决了需要针对不同操作***进行混合列表的开发，提高了开发效率，并且可以监测针对混合列表的用户操作事件，充分感知用户的操作，有利于进行业务响应，保证了用户体验。

具体的，参照图1，示出了本发明的一种视频播放方法实施例一的步骤流程图，具体可以包括如下步骤：

步骤101，通过视频播放组件获取初始元素信息，以及所述初始元素信息的排序信息；

作为一种示例，视频播放组件可以为Flutter平台，可以在应用程序中集成Flutter平台，使得Flutter作为一个模块运行于Android、IOS或web等平台，从而运行Android、IOS或web的终端在运行应用程序时，应用程序可以通过Flutter生成混合列表，并响应用户操作，实现视频滚动播放。

元素信息包括文本信息、图文信息、图片信息、视频信息以及音频信息等等，排序信息可以为各个元素信息之间的排列顺序。

步骤102，通过视频播放组件按照所述排序信息，生成针对所述初始元素信息的混合列表；

在具体实现中，可以事先在基于Flutter的技术框架，开发一个可以同时应用于Android、IOS以及Web等平台的组件，例如在应用程序上展示内容的复合控件(混合列表)，然后将包含该组件的Flutter集成于应用程序中，从而只需要开发一次，便可同时在Android、IOS以及Web等操作***上运行生效。

具体的，在开发混合列表的过程中，针对一个混合列表上最终展示的元素信息，只需要在build方法中表示出来，而不需要建立混合列表与元素信息之间的挂载关系，在混合列表的渲染过程，即可将build的内容按照排序信息进行渲染，并展示对应的混合列表。在应用程序运行的过程中，可以通过Flutter按照初始元素信息的排序顺序，在终端的图像用户界面中渲染混合列表。

例如，如图2所示，示出了本发明实施例中混合列表的示意图一，初始元素信息之间的排序信息可以为：文本信息-图文信息-文本信息-图文信息-文本信息等等，则可以按照该排序信息，生成与初始元素信息对应的混合列表，实现了在应用程序集成Flutter，当运行应用程序时可以通过Flutter生成混合列表，解决了需要针对不同操作***进行混合列表的开发，提高了开发效率。

步骤103，通过视频播放组件响应针对所述混合列表的第一滑动操作的结束，确定所述混合列表的第一显示区域，所述第一显示区域包括若干个当前元素信息；

通过Flutter生成混合列表后，可以监测对混合列表的操作事件，如点击事件、滑动事件等等。当检测到针对混合列表的第一滑动操作的结束时，可以确定混合列表当前的第一显示区域，并获取该显示区域中的当前元素信息。

步骤104，当所述第一显示区域中的当前元素信息包括第一视频信息时，则通过视频播放组件确定所述第一视频信息的第一可视百分比；

在一种示例中，如图3所示，示出了本发明实施例中混合列表的示意图二，当用户对混合列表进行滑动时，在滑动操作结束后，Flutter可以根据滑动操作，确定当前混合列表的第一显示区域，并获取显示区域中当前元素信息，当第一显示区域中的当前元素信息包括第一视频信息时，则确定该第一视频信息的第一可视百分比。具体的，可以获取视频信息的整体可视面积，然后根据当前第一显示区域中视频信息的可视面积，计算可视百分比。

步骤105，当所述第一视频信息的第一可视百分比满足预设阈值时，则通过视频播放组件播放所述第一视频信息。

在具体实现中，当第一视频信息的第一可视百分比满足预设阈值时，则可以自动播放该第一视频信息。例如，第一视频信息的第一可视百分比大于或等于80％时，则播放第一视频信息，从而实现了在应用程序运行的过程中，可以通过Flutter生成混合列表，并响应用户的滑动操作进行视频滚动播放。

参照图4，示出了本发明的一种视频播放方法实施例二的步骤流程图，应用于应用程序，所述应用程序包括视频播放组件，具体可以包括如下步骤：

步骤401，通过所述视频播放组件获取初始元素信息，以及所述初始元素信息的排序信息；

在一种示例中，用户终端的操作***可以为Android或IOS***，当用户终端运行应用程序时，应用程序可以通过Flutter获取需要进行展示的初始元素信息，以及各个元素信息的排序信息，以便通过build方法进行表示。

步骤402，通过所述视频播放组件按照所述排序信息，生成针对所述初始元素信息的混合列表；

具体的，在Flutter平台开发混合列表的过程中，针对一个混合列表上最终展示的元素信息，只需要在build方法中表示出来，而不需要建立混合列表与元素信息之间的挂载关系，在混合列表的渲染过程，即可将build的内容按照排序信息进行渲染，并展示对应的混合列表。从而在应用程序运行的过程中，可以通过Flutter获取初始元素信息，并按照初始元素信息的排序顺序，在终端的图像用户界面中渲染混合列表。

步骤403，通过所述视频播放组件响应针对所述混合列表的第一滑动操作的结束，根据预设步长由上至下遍历所述混合列表，获取第一显示区域，所述第一显示区域包括若干个当前元素信息；

在具体实现中，可以通过终端展示混合列表，用户可以在混合列表中进行点击、滑动等操作。当监测到用户的第一滑动操作的结束后，可以通过遍历整个视图树，确定当前的第一显示区域，进而确定显示区域内的元素信息。

在本发明的一种示例中，可以建立坐标系，以终端显示屏的纵向为Y轴，以横向为X轴，并以终端显示屏的分辨率作为X轴与Y轴的坐标值，如坐标值可以为像素值。通过设置遍历步长(例如每10px遍历一次、每5px遍历一次等等)，对终端显示屏的显示区域由上至下进行遍历，从而在滑动操作结束时，获取混合列表当前的显示区域，并识别显示区域中的所有元素信息。具体的，每一个元素信息可以对应一元素标识，例如视频信息对应唯一的视频标识，文本信息对应文本标识，图片信息对应图片标识等等，在对显示区域进行遍历的过程中，可以根据元素标识，确定显示区域中的所有元素信息。

例如，用户滑动操作结束后，混合列表的显示区域由图2转变为图3时，可以由上至下按照预设步长进行遍历，并根据元素标识，得到混合列表当前显示区域中的元素信息包括：第一图文信息、第一文本信息、第二图文信息、第二文本信息以及第一视频信息。

步骤404，当所述第一显示区域中的当前元素信息包括第一视频信息时，则通过所述视频播放组件确定所述第一视频信息的第一可视百分比；

在具体实现中，可以根据元素标识，确定显示区域中元素信息是否包括视频信息。当第一显示区域中检测到视频标识时，则确定与视频标识对应的第一视频信息的第一可视百分比，以便在可视百分比大于或等于预设阈值时，自动播放该第一视频信息。

步骤405，当所述第一视频信息的第一可视百分比满足预设阈值时，则通过所述视频播放组件播放所述第一视频信息。

在具体实现中，若第一视频信息的第一可视百分比小于预设阈值时，由于第一视频信息在显示区域的可视比例较低，用户未能较完整地看到视频信息，则不对视频信息进行播放，或暂停播放。

在一种示例中，当用户继续滑动混合列表，使得第一视频信息的第一可视百分比小于预设阈值时，则暂停播放第一视频信息。

在另一种示例中，当用户继续滑动混合列表，使得第一视频信息滑出显示区域时，则暂停播放第一视频信息。

在本发明的一种可选实施例中，当用户继续滑动混合列表时，可以响应针对混合列表的第二滑动操作的结束，确定混合列表的第二显示区域；当第二显示区域中的当前元素信息包括第一视频信息与第二视频信息时，则确定第二视频信息的第二可视百分比；当第二视频信息的第二可视百分比满足预设阈值时，则暂停播放第一视频信息，并播放第二视频信息。

在具体实现中，随着用户对混合列表的滑动，混合列表的显示区域中可以包括多个视频信息，一方面可以根据视频信息的可视百分比，播放视频信息，另一方面还可以根据视频信息的先后顺序，播放视频信息。

例如，假设混合列表的显示区域中包括第一视频信息与第二视频信息，第一视频信息优先展示于第二视频信息，且当前第一视频信息正在播放。则当第一视频信息滑出显示区域，且第二视频信息的可视百分比大于或等于预设阈值时，则暂停播放第一视频信息，并播放第二视频信息；当第一视频信息还未滑出显示区域(可视百分比大于或等于预设阈值)，且第二视频信息的可视百分比大于或等于预设阈值时，则暂停播放第一视频信息，并播放第二视频信息；当第一视频信息的可视百分比小于预设阈值，且第二视频信息的可视百分比大于或等于预设阈值时，则暂停播放第一视频信息，并播放第二视频信息，从而实现了在应用程序运行的过程中，可以通过Flutter生成混合列表，并响应用户的滑动操作进行视频滚动播放。

需要说明的是，本发明实施例包括但不限于上述示例，可以理解的是，本领域技术人员在本发明实施例的思想指导下，还可以根据实际情况设置预设阈值等，本发明对此不作限制。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

参照图5，示出了本发明的一种视频播放装置实施例的结构框图，应用于应用程序，所述应用程序包括视频播放组件，具体可以包括如下模块：

位于所述视频播放组件的信息获取模块501，用于获取初始元素信息，以及所述初始元素信息的排序信息；

位于所述视频播放组件的混合列表生成模块502，用于按照所述排序信息，生成针对所述初始元素信息的混合列表；

位于所述视频播放组件的第一显示区域确定模块503，用于响应针对所述混合列表的第一滑动操作的结束，确定所述混合列表的第一显示区域，所述第一显示区域包括若干个当前元素信息；

位于所述视频播放组件的第一可视百分比确定模块504，用于当所述第一显示区域中的当前元素信息包括第一视频信息时，则确定所述第一视频信息的第一可视百分比；

位于所述视频播放组件的第一视频信息播放模块505，用于当所述第一视频信息的第一可视百分比满足预设阈值时，则播放所述第一视频信息。

在本发明的一种可选实施例中，还包括：

在本发明的一种可选实施例中，所述第一显示区域确定模块503具体用于：

在本发明的一种可选实施例中，视频信息包括视频标识，所述第一可视百分比确定模块504具体用于：

在本发明的一种可选实施例中，所述初始元素信息还包括文本信息、图像信息以及音频信息中的至少一种。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明实施例还提供了一种电子设备，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述电子设备执行本发明实施例所述的方法。

本发明实施例还提供了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行本发明实施例所述的方法。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

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

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

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

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

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本发明所提供的一种视频播放方法和一种视频播放装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims

1.一种视频播放方法，其特征在于，应用于应用程序，所述应用程序包括视频播放组件，所述方法包括：

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

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

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

5.根据权利要求1所述的方法，其特征在于，所述通过所述视频播放组件响应针对所述混合列表的第一滑动操作的结束，确定所述混合列表的第一显示区域，包括：

6.根据权利要求1所述的方法，其特征在于，视频信息包括视频标识，所述当所述第一显示区域中的当前元素信息包括第一视频信息时，则通过所述视频播放组件确定所述第一视频信息的第一可视百分比，包括：

7.根据权利要求1所述的方法，其特征在于，所述初始元素信息还包括文本信息、图像信息以及音频信息中的至少一种。

8.一种视频播放装置，其特征在于，应用于应用程序，所述应用程序包括视频播放组件，所述装置包括：

9.一种电子设备，其特征在于，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述电子设备执行如权利要求1-7所述的一个或多个的方法。

10.一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得所述处理器执行如权利要求1-7所述的一个或多个的方法。