一种视频数据播放方法、装置及设备

技术领域

本公开涉及视频技术领域，尤其涉及一种视频数据播放方法、装置及设备。

背景技术

随着数字时代的发展，人类的生活、工作、学习越来越依赖互联网多媒体视频。在实际使用中，存在结合两个多媒体视频进行分析、统计、学习的需求。相关技术中打开链接视频资源的网页，选择播放网页中的视频资源，跳转到视频播放页调用播放器对视频资源的播放，一次播放点击行为仅支持对一个视频数据流的播放。如果需要结合另一视频数据流进行统计分析学习等，则需要切换到另一视频资源的网页，重新打开一个视频播放网页调用视频播放器进行另一个视频数据流的播放。

可见，上述视频数据流的播放方案，不支持同时查看两个视频数据流，如果要结合两个视频数据流则需要进行网页切换，操作复杂且播放效率低，影响了视频数据播放效果。

发明内容

本方法实现了多播放器的同时播放，在播放视频数据流时，能够播放与当前视频相关联的另一视频数据流。

第一方面，本公开实施例提供一种视频数据播放方法，该方法包括：

响应于视频播放指令，获取第一视频数据流；

在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标；

响应于对触发图标的操作指令，显示第二播放界面；

在第二播放界面上播放与第一视频数据流相关联的第二视频数据流。

在一种可能的实施方式中，第一视频数据流为直播视频数据流，第二视频数据流为对所述直播视频数据流保存得到的至少部分视频数据流。

在一种可能的实施方式中，在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标，包括：

在第一播放器的第一播放界面播放所述第一视频数据流，并获取定义第二播放器的第二播放界面样式的样式文件；

根据样式文件，将第二播放界面的触发图标在所述第一播放界面上进行渲染。

在一种可能的实施方式中，在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标，包括：

在第一播放器的第一播放界面播放第一视频数据流，并获取多播放器播放配置参数；

根据多播放器配置参数确定支持多播放器播放时，在第一播放界面渲染显示第二播放器的第二播放界面的触发图标。

在一种可能的实施方式中，响应于对所述触发图标的操作指令，显示所述第二播放界面，包括：

响应于对触发图标的操作指令，根据预设尺寸显示第二播放界面。

在一种可能的实施方式中，响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，确定当前已获取与第一视频数据流相关联的第二视频数据流时，显示第二播放界面；

在一种可能的实施方式中，响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，发送第二视频数据流的获取请求；

待获取到第二视频流时，显示第二播放界面。

在一种可能的实施方式中，响应于视频播放指令，还包括:

监听鼠标的位置及对所述鼠标的点击操作；

若监听到鼠标针对第一播放界面进行操作，则输出第一事件标识；

若监听到鼠标针对第二播放界面进行操作，则输出第二事件标识；

其中，对于同一操作，输出的第一事件标识与第二事件标识不同。

第二方面，本公开实施例提供一种视频数据播放装置，包括：

第一视频数据流获取单元，用于响应于视频播放指令，获取第一视频数据流；

第一视频数据流播放单元，用于在第一播放器的第一播放界面播放第一视频数据流；

第一渲染单元，用于在第一播放界面渲染显示第二播放器的第二播放界面的触发图标；

第二播放界面显示单元，用于响应于对触发图标的操作指令，显示第二播放界面；

第二视频数据流播放单元，用于在第二播放界面上播放与第一视频数据流相关联的第二视频数据流。

在一种可能的实施方式中，第一视频数据流为直播视频数据流，第二视频数据流为对直播视频数据流保存得到的至少部分视频数据流。

在一种可能的实施方式中，第一视频数据流播放单元，包括：

播放子单元，用于在第一播放器的第一播放界面播放第一视频数据流；

第一获取子单元，用于获取定义第二播放器的第二播放界面样式的样式文件；

第一渲染子单元，用于根据样式文件，将第二播放界面的触发图标在第一播放界面上进行渲染。

在一种可能的实施方式中，第一视频数据流播放单元，还包括：

第二获取子单元，用于在播放子单元播放第一视频数据流后，获取多播放器播放配置参数；

第一确定子单元，用于根据多播放器配置参数确定是否支持多播放器播放，在结果为是时，触发第二染子单元；

第二渲染子单元，用于在第一播放界面渲染显示第二播放器的第二播放界面的触发图标。

在一种可能的实施方式中，第二播放界面显示单元，还用于：

根据预设尺寸显示第二播放界面。

在一种可能的实施方式中，第二播放界面显示单元，还包括：

第二确定子单元，用于确定当前是否已获取与第一视频数据流相关联的第二视频数据流，若结果为是时，触发显示子单元；

显示子单元，用于显示第二播放界面。

在一种可能的实施方式中，第二播放界面显示单元，还包括:

收发子单元，用于发送第二视频数据流的获取请求，并在获取到第二视频流时，触发显示子单元；

显示子单元，用于显示第二播放界面。

在一种可能的实施方式中，还包括:

鼠标监听单元，用于执行监听鼠标的位置及对鼠标的点击操作；

第一事件识别单元，若监听到鼠标针对第一播放界面进行操作，则输出第一事件标识至第一播放界面显示单元；第一播放界面显示单元用于显示第一播放界面；

第二事件识别单元，若监听到鼠标针对第二播放界面进行操作，则输出第二事件标识至第二播放界面显示单元；

其中，对于同一操作，输出的第一事件标识与第二事件标识不同。

第三方面，本公开实施实例提供一种视频数据播放控制设备，该设备包括存储器和处理器，所述存储器上存储有可在所述处理器上运行的计算机程序，当所述计算机程序被所述处理器执行时，实现上述第一方面中任意一种视频数据流播放方法的步骤。

响应于视频播放指令，获取第一视频数据流；

在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标；

响应于对触发图标的操作指令，显示第二播放界面；

在第二播放界面上播放与第一视频数据流相关联的第二视频数据流。

在一种可能的实施方式中，第一视频数据流为直播视频数据流，第二视频数据流为对直播视频数据流保存得到的至少部分视频数据流。

在一种可能的实施方式中，处理器在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标，包括：

在第一播放器的第一播放界面播放第一视频数据流，并获取定义第二播放器的第二播放界面样式的样式文件；

根据样式文件，将第二播放界面的触发图标在第一播放界面上进行渲染。

在一种可能的实施方式中，处理器在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标，包括：

在第一播放器的第一播放界面播放第一视频数据流，并获取多播放器播放配置参数；

根据多播放器配置参数确定支持多播放器播放时，在第一播放界面渲染显示第二播放器的第二播放界面的触发图标。

在一种可能的实施方式中，处理器响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，根据预设尺寸显示第二播放界面。

在一种可能的实施方式中，处理器响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，确定当前已获取与第一视频数据流相关联的第二视频数据流时，显示第二播放界面。

在一种可能的实施方式中，处理器响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，发送第二视频数据流的获取请求；

待获取到第二视频流时，显示第二播放界面。

在一种可能的实施方式中，处理器还用于:

监听鼠标的位置及对鼠标的点击操作；

若监听到鼠标针对第一播放界面进行操作，则输出第一事件标识；

若监听到鼠标针对第二播放界面进行操作，则输出第二事件标识；

其中，对于同一操作，输出的第一事件标识与第二事件标识不同。

第四方面，本公开实施实例提供了一种计算机可读存储介质，计算机可读存储介质内存储有计算机程序，计算机程序被处理器执行时，实现上述第一方面中任意一种视频数据流播放方法的步骤。

本公开提供一种视频数据播放方法、装置及设备，该方法包括：响应于视频播放指令，获取第一视频数据流；在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标；响应于对触发图标的操作指令，显示第二播放界面；在第二播放界面上播放与第一视频数据流相关联的第二视频数据流。利用本公开提供的方法，实现了多播放器的同时播放，在播放视频数据流时，能够同时播放与当前视频相关联的另一视频数据流，提高了两相关联的视频数据播放效率。

附图说明

为了更清楚地说明本公开实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简要介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本公开实施例提供的一种视频数据播放的应用场景的示意图；

图2为本公开实施例提供的一种视频数据播放方法的流程图；

图3为本公开实施例提供的第二播放器触发图标示意图；

图4为本公开实施例提供的第二播放器第二显示界面示意图；

图5为本公开实施例提供的一种视频数据播放的装备的示意图；

图6为本公开实施例提供的一种视频数据播放的设备的示意图。

具体实施方式

下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，并不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

需要说明的是，以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

以下，对本公开实施例中的部分用语进行解释说明，以便于本领域技术人员理解。

(1)本公开实施例中术语“客户端(Client)”或称为用户端，是指与服务器相对应，为客户提供本地服务的程序。除了一些只在本地运行的应用程序之外，一般安装在普通的客户机上，需要与服务端互相配合运行。因特网发展以后，较常用的用户端包括了如万维网使用的网页浏览器，收寄电子邮件时的电子邮件客户端，以及即时通讯的客户端软件等。对于这一类应用程序，需要网络中有相应的服务器和服务程序来提供相应的服务，如数据库服务，电子邮件服务等，这样在客户机和服务器端，需要建立特定的通信连接，来保证应用程序的正常运行。

(2)本公开实施例中的Vue是一套软件开发常用的框架，具体用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

(3)本公开实施例中术语“电子设备”可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

为了使本公开的目的、技术方案和优点更加清楚，下面将结合附图对本公开作进一步地详细描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本公开保护的范围。

相关技术中通过网页进行视频数据流播放的方案，不支持在同一网页上同时进行两个视频数据流的播放，导致对于需要同时播放两个相关联的视频数据流的场景，操作复杂且播放效率低。

基于上述问题，本公开实施例提供一种视频数据播放的方法和装置及设备，上述视频数据播放的方法可以在同一网页界面支持同时播放两个相关联的视频数据流，不需要进行网页切换，且同时支持对两个视频流操作。下面给出本公开实施例提供的一种视频数据播放方法和装置及设备的实施方式。

如图1所示，本公开实施例提供一种视频数据播放应用场景的示意图，应用场景包括：

视频数据上传的上传客户端101a，用于供上传账号登录，显示视频上传界面，通过发送上传操作指令，向网络视频平台上传，以使登录到网络视频凭他的账户能够播放视频数据。

播放视频数据的播放客户端101b，用于供播放账号登录，显示视频播放界面，通过发送视频播放操作指令，在视频播放界面播放需要的视频数据。

服务器102，接收上传账号发送的上传操作指令，保存上传账号上传的视频数据到数据库，调用云服务进程传输上传客户端上传的视频数据到播放客户端的播放界面；接收播放账号发送的播放操作指令，在客户端的播放界面播放请求播放的视频数据。

数据库103，用于存储上传客户端上传的视频数据。

在本公开实施例中，上传客户端和播放客户端为用户使用的电子设备，该电子设备可以是个人计算机、手机、平板电脑、笔记本、电子书阅读器等具有一定计算能力并且运行有即时通讯类软件及网站或者社交类软件及网站的计算机设备。各终端设备通过无线网络与服务器连接，服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(ContentDeliveryNetwork，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器。

本公开提供了一种视频数据播放方法，用于解决在网页调用的单一播放器不能满足需要同时播放两个相关联的视频数据流的场景需求的问题，该方法应用于上传场景中的播放客户端，通过打开播放客户端执行上述视频数据播放的方法，播放客户端可选的为网页浏览器，如图2所示，包括：

步骤201，响应于视频播放指令，获取第一视频数据流；

相应的播放账号通过播放客户端中的浏览器，打开相应的视频资源列表的网页，通过对网页中的视频资源选择并执行播放操控，产生视频播放指令。

播放客户端响应于视频播放指令，向服务器发送所请求播放选择的视频资源的播放请求，并接收服务器返回的该视频资源对应的第一视频数据流。

步骤202，在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标；

响应于视频播放指令，还打开视频播放的网页，并调用第一播放器，在网页上显示第一播放器的第一播放界面，通过第一播放器的第一播放界面播放第一视频数据流。

本公开实施例中，在网页上显示第一播放器的播放界面时，除了在第一播放器界面上渲染第一视频数据流，还在第一播放界面渲染显示第二播放器的第二播放界面的触发图标。

对于播放器来说，播放器在播放界面上进行渲染时，需要按照该播放器对应的样式文件确定渲染的内容样式，将获取的源视频数据文件按照该内容样式渲染到界面上。

可选的，第一播放器可以按照第一播放器对应的样式文件，在第一播放界面上按照对应的内容样式渲染第一视频数据流。

作为一种可选的实施方式，在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标，包括：

在第一播放器的第一播放界面播放第一视频数据流，并获取定义第二播放器的第二播放界面样式的样式文件；

根据样式文件，将第二播放界面的触发图标在第一播放界面上进行渲染。

样式文件可选的为层叠样式文件，也就是css样式文件。

可选的，响应于对一个视频资源的视频播放指令，打开视频播放的网页时，会按照css样式文件在网页进行播放界面渲染。且第一播放器作为主播放器，对应的第一播放界面按照适合播放的正常尺寸显示，该显示尺寸可选地通过第一播放界面相应的css样式文件获取。

可选的，对于第二播放界面的触发图标，也可通过与其对应的css样式文件进行渲染。以上的触发图标可根据预先定义显示为多种形式，例如显示为一条短线的形式，又例如显示为按钮的形式，或者显示其他缩略图的形式。

以上触发图标的显示位置，也可以通过css样式文件进行定义，显示在显示屏的不同区域，例如位于主播放器的播放界面左上角，又例如位于主播放器的播放界面右下角。

步骤203，响应于对所述触发图标的操作指令，显示所述第二播放界面；

相应的播放账号通过对第一播放界面上的触发图标执行的触发操控，产生对所述触发图标的操作指令。以上所述触发图标的触发形式也可预先定义为多种形式，例如点击，又例如滑动等。

响应于对触发图标的操作指令，实现第二播放界面的显示。

作为一种可选的实施方式，响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，根据预设尺寸显示第二播放界面。

可以理解到的是，预设尺寸包括第二播放界面的显示范围的尺寸，可选的可以为宽和高。可选的，预设尺寸可以预先通过css样式文件配置，在显示时从css样式文件中获取。

在另一种可选方式中，预设尺寸可以通过css样式文件实时配置。

在又一种可选方式中，响应于对触发图标的操作指令，可以基于操作指令实时改变css样式文件，改变内容可选地可以包括渲染样式、渲染尺寸、渲染位置等。可以预先仅改变css样式文件中的窗口尺寸的参数，即css样式文件中是将第二播放界面的窗口通过窗口尺寸强制定义为触发图标时，接收到触发图标的操作指示，改变窗口尺寸这个参数，改变为正常显示窗口的大小即上述预设尺寸，然后将第二播放界面进行正常显示；或者，可以改变触发图标的渲染形式，可选包括三角形、正方形、圆形等；或者，还可以改变触发图标的渲染位置，可选包括渲染在第一播放界面底部、顶部、左侧、右侧等，可选如图3，图4所示。

其中，第二播放界面的显示位置也可以通过css样式文件进行定义，显示在显示屏的不同区域，例如完全位于第一播放界面内；又例如一半位于第一播放界面，另一半位于第一播放界面外的其他区域；或者整体位于第一播放界面以外区域；也可以位于可实现显示功能的其他区域，本申请不做限制。

可选的，支持对显示的第二播放界面进行拖动，其拖动能力是通过浏览器支持的对鼠标的位置及鼠标的操作进行监听的功能，具体可以实现根据鼠标位置的变化计算出播放器距离视窗左侧和顶部的距离，从而可以得到鼠标的定位，实现根据鼠标拖动事件来变化第二播放界面的位置。

步骤204，在第二播放界面上播放与第一视频数据流相关联的第二视频数据流；

本公开的可选实施方式中，第二视频数据流为第一视频数据流相关联的视频数据流，具体可以通过预先定义关联关系的类型，实现第一视频数据流和第二视频数据流相关联，从而建立一种绑定关系。例如属于同一视频资源的不同播放形式的两个视频流，或者属于同一上传客户端的相邻两次上传的视频数据流，或者属于同一视频内容由不同客户端上传的视频数据流，或者属于同一内容/同一主题的介绍视频数据流等。可选地，两者的播放内容可以是相关的也可以是不相关的，同样两者的视频类型也可以相同可以不同，例如第一视频数据流为直播A，第二视频数据流为预先定义的与第一视频数据流相关联的直播B，又例如第一视频数据流为直播A，第二视频数据流为预先定义的与第一视频数据流相关联的直播A的一段回放。

作为一种可选的实施方式，第一视频数据流为直播视频数据流，第二视频数据流为对直播视频数据流保存得到的至少部分视频数据流。

以上至少部分视频数据流是指可能为全部视频数据流，也可能为全部视频流中指定时间段的部分视频数据流，例如一段长为播放时间为10s～20s的视频数据流，作为一种可选的实施方式，可以是对触发图标的操作指令的时间点起的往前设定时长的视频数据流，例如从点击触发图标开始往前5s的视频数据流。

作为一种可选的实施方式，在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标，包括：

在第一播放器的第一播放界面播放第一视频数据流，并获取多播放器播放配置参数；

根据多播放器配置参数确定支持多播放器播放时，在第一播放界面渲染显示第二播放器的第二播放界面的触发图标。

可选的，在渲染触发图标前，需要先进行当前播放器是否支持多播放器播放功能的判断，若判断结果为当前播放器不支持多播放器播放功能，则不再在第一播放界面渲染显示第二播放器的第二播放界面的触发图标；若判断结果为当前播放器支持多播放器播放功能，则进行第二播放界面的触发图标的渲染。

以上判断是通过获取多播放器播放配置参数来实现的，多播放器配置参数是根据客户的播放能力来进行预先配置的，配置分为两种，一种为当客户具有支持多播放器播放的能力时，多播放器配置参数配置为允许在第一播放界面渲染显示第二播放器的第二播放界面的触发图标；另一种为当客户不具有支持多播放器播放的能力时，多播放器配置参数配置为不允许在第一播放界面渲染显示第二播放器的第二播放界面的触发图标。

可选的，第二播放器的第二播放界面、以及第二播放界面的触发图标均可通过预先定义的css样式文件，进行叠加渲染，作为一种可选的实施方式，css样式文件可体现如下：

作为一种可选的实施方式，响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，确定当前已获取与第一视频数据流相关联的第二视频数据流时，显示第二播放界面。

可选的，响应于对触发图标的操作指令，为防止出现黑屏等问题，在显示第二播放界面前需要判断第二视频数据流是否已经获取完成，若已经获取完成，则正常显示第二播放界面；若未获取完成，则需要进行等待，直到第二视频数据流获取完成后再进行第二播放界面的显示。

本公开不限定第二视频数据流的获取方式，可以是响应于视频播放指令与第一视频数据流同步获取，即在发送获取第一视频数据流的请求时发送获取第二视频数据流的请求，也可以在第一播放界面播放第一视频数据流的过程中，获取第二视频数据流。可选的，在渲染触发图标时发送获取第二视频数据流的请求。

作为一种可选的实施方式，响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，发送第二视频数据流的获取请求；

若获取到第二视频流时，显示第二播放界面。

可选的，视频数据播放方法是基于Vue框架，通过在Vue框架中的多个服务单元来实现的，本公开实施例中Vue框架中的服务单元包括属性参数及程序执行单元，程序执行单元基于属性参数实现对应的功能。基于封装在Vue框架中的多个服务单元，可以对应的设计个性化需求，在实现个性化需求过程中，调用对应的服务单元实现相应的功能。本公开实施例中Vue框架包括第一服务单元和第二服务单元，其中，第一服务单元封装有第一播放器和第一事件监听器，第二服务单元封装有第二播放器第二事件监听器，封装在第一服务单元中的第一播放器为实现第一播放器功能的程序执行单元，封装在第一服务单元中的第一事件监听器为实现监听第一播放器事件行为的程序执行单元，可选地监听鼠标针对第一播放界面的触发操作，封装在第二服务单元中的第二播放器为实现第二播放器功能的程序执行单元，封装在第二服务单元中第二事件监听器为实现第二播放器事件行为的程序执行单元，可选地监听鼠标针对第一播放界面的触发操作。可选地，第二服务单元嵌套于第一服务单元，也就是说在第一服务单元调用过程中，会嵌套调用第二服务单元。

以上第一服务单元中还封装有属性参数-多播放器配置参数，响应于视频播放指令，在第一播放器的第一播放界面播放第一视频数据流同时，通过对多播放器配置参数的获取来判断当前是否能进行多播放器播放，若配置的multiPlayer为true，则表示能进行多播放器播放，在调用第一服务单元的过程中会调用嵌套的第二服务单元，将会显示触发图标，若配置的multiPlayer为false，则表示不能进行多播放器播放，在调用第一服务单元的过程中不会调用嵌套的第二服务单元，第一播放界面将不显示触发图标。

可选的，第二服务单元是嵌套于第一服务单元中的，在进行嵌套前，需要将位于第一服务单元内的第一播放器与位于第二服务单元内的第二播放器分别进行封装，保证播放器的原有功能在播放过程中可以得到完全保留，通过属性参数multiPlayer字段控制在第一播放界面上是否以触发图标的形式渲染第二播放界面，初始时miniPlayed为false，监测触发图标被执行打开操作后，miniPlayed为true，第二播放器初始化，判定是否获取到第二视频数据流，获取到第二视频数据流时，将showSecPlayer变更为true,将第二播放界面的窗口放大为预定义尺寸，展示第二个播放器的第二播放界面，加载对应的第二视频数据流。监测到对第二播放器执行关闭操作时，showSecPlayer会变更为false，关闭所显示的第二播放界面，在第一播放界面上是否以触发图标的形式渲染第二播放界面。

然后基于Vue框架支持的自嵌套功能，在第一播放器的外层嵌套一个div外层容器，在外层容器中设定第一播放界面的尺寸，实现多播放器播放功能。

监测触发图标被执行打开操作后，第二播放界面显示前需要判断是否获取到所要播放的第二视频数据流，判定未获取到第二视频数据流时，需要调用beforeOpenMiniPlayer钩子函数来将第二播放界面的显示挂起，待第二视频数据流获取完成后，再将showSecPlayer变更为true,将第二播放界面的窗口放大为预定义尺寸，展示第二个播放器的第二播放界面；若判定已获取到第二视频数据流，则不再需要调用beforeOpenMiniPlayer钩子函数，直接将showSecPlayer变更为true,将第二播放界面的窗口放大为预定义尺寸，展示第二个播放器的第二播放界面。

可选的，基于浏览器支持的对鼠标的位置及鼠标的操作进行监听的功能，则在第一服务单元中封装第一事件监听器，可以实现对第一播放器相关事件的监听，在第二服务单元中封装第二事件监听器，可以实现对第二播放器相关事件的监听，作为一种可选的实施方式，响应于视频播放指令，还包括：

监听鼠标的位置及对鼠标的点击操作；

若监听到鼠标针对第一播放界面进行操作，则输出第一事件标识；

若监听到鼠标针对第二播放界面进行操作，则输出第二事件标识；

其中，对于同一操作，输出的第一事件标识与第二事件标识不同。

可选的，通过第一事件监听器监听鼠标的位置变换以及点击操作，来识别客户在第一播放界面的操作，并以第一事件标识形式将事件抛出，以根据第一事件标识执行与第一播放器相关的操作，例如可以对第一播放器进行拖动、放大、暂停、倍速等；同样的，通过第二事件监听器监听鼠标的位置变换以及点击操作，来识别客户在第二播放界面的操作，并以第二事件标识形式将事件抛出，以根据第一事件标识执行与第一播放器相关的操作，例如可以对第二播放器进行拖动、放大、暂停、倍速等。

可选的，在第一服务单元的事件监听器的基础上，在嵌套第二服务单元时，可以重写事件监听器以实现第二服务单元中事件监听器，输出的事件标识用于区分具体为什么事件，为了区分输出的事件具体为哪个事件监听输出的事件，对于同一操作事件，第一事件标识与第二事件标识不同，具体为在重写第一服务单元中的事件监听器vue.$listeners时，将第二服务单元中的事件监听器输出的事件标识以‘sub-’开头来实现第一事件标识与第二事件标识不同。例如，在发生点击事件后，如果输出事件标识为click，则可判定是第一服务单元中的事件监听器输出的事件，如果输出事件标识为sub-click，则可判定是第二服务单元中的事件监听器输出的事件。

以上对本公开实施例中一种视频数据播放方法进行说明，以下对执行上述视频数据播放的装置进行说明。

请参阅图5，本公开实施例提供一种视频数据播放控制装置，该装置包括：

第一视频数据流获取模块501，用于响应于视频播放指令，获取第一视频数据流；

第一视频数据流播放模块502，用于在第一播放器的第一播放界面播放第一视频数据流；

第一渲染模块503，用于在第一播放界面渲染显示第二播放器的第二播放界面的触发图标；

第二播放界面显示模块504，用于响应于对触发图标的操作指令，显示第二播放界面；

第二视频数据流播放模块505，用于在第二播放界面上播放与第一视频数据流相关联的第二视频数据流。

可选的，第一视频数据流为直播视频数据流，第二视频数据流为对直播视频数据流保存得到的至少部分视频数据流。

可选的，第一视频数据流播放模块，包括：

播放子模块，用于在第一播放器的第一播放界面播放第一视频数据流；

第一获取子模块，用于获取定义第二播放器的第二播放界面样式的样式文件；

第一渲染子模块，用于根据样式文件，将第二播放界面的触发图标在第一播放界面上进行渲染。

可选的，第一视频数据流播放模块，还包括：

第二获取子模块，用于在播放子模块播放第一视频数据流后，获取多播放器播放配置参数；

第一确定子模块，用于根据多播放器配置参数确定是否支持多播放器播放，在结果为是时，触发第二染子模块；

第二渲染子模块，用于在第一播放界面渲染显示第二播放器的第二播放界面的触发图标。

可选的，第二播放界面显示模块，还用于：

根据预设尺寸显示第二播放界面。

可选的，第二播放界面显示模块，还包括：

第二确定子模块，用于确定当前是否已获取与第一视频数据流相关联的第二视频数据流，若结果为是时，触发显示子模块；

显示子模块，用于显示第二播放界面。

可选的，第二播放界面显示模块，还包括:

收发子模块，用于发送第二视频数据流的获取请求，并在获取到第二视频流时，触发显示子模块；

显示子模块，用于显示第二播放界面。

可选的，还包括:

鼠标监听模块，用于执行监听鼠标的位置及对鼠标的点击操作；

第一事件识别模块，若监听到鼠标针对第一播放界面进行操作，则输出第一事件标识至第一播放界面显示模块；第一播放界面显示模块用于显示第一播放界面；

第二事件识别模块，若监听到鼠标针对第二播放界面进行操作，则输出第二事件标识至第二播放界面显示模块；

其中，对于同一操作，输出的第一事件标识与第二事件标识不同。请参阅图6，本公开实施例中一种视频数据播放的设备，包括：

至少一个处理器601和至少一个存储器602，以及总线系统609；

其中，存储器存储有程序代码，当程序代码被处理器执行时，使得处理器执行下列过程：

响应于视频播放指令，获取第一视频数据流；

在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标；

响应于对触发图标的操作指令，显示第二播放界面；

在第二播放界面上播放与第一视频数据流相关联的第二视频数据流。

图6是本公开实施例提供的一种视频数据播放的设备示意图，该设备600可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(英文全称：centralprocessing units，英文简称：CPU)601(例如，一个或一个以上处理器)和存储器602，一个或一个以上存储应用程序604或数据605的存储介质603(例如一个或一个以上海量存储设备)。其中，存储器602和存储介质603可以是短暂存储或持久存储。存储在存储介质603的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对信息处理装置中的一系列指令操作。更进一步地，处理器601可以设置为与存储介质603通信，在设备600上执行存储介质603中的一系列指令操作。

设备600还可以包括一个或一个以上有线或无线网络接口607，一个或一个以上输入输出接口608，和/或，一个或一个以上操作系统606，例如Windows Server，Mac OS X，Unix，Linux，FreeBSD等。

可选的，第一视频数据流为直播视频数据流，第二视频数据流为对直播视频数据流保存得到的至少部分视频数据流。

可选的，处理器用于在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标，包括：

在第一播放器的第一播放界面播放第一视频数据流，并获取定义第二播放器的第二播放界面样式的样式文件；

根据样式文件，将第二播放界面的触发图标在第一播放界面上进行渲染。

可选的，处理器用于在第一播放器的第一播放界面播放第一视频数据流，并在第一播放界面渲染显示第二播放器的第二播放界面的触发图标，包括：

在第一播放器的第一播放界面播放第一视频数据流，并获取多播放器播放配置参数；

根据多播放器配置参数确定支持多播放器播放时，在第一播放界面渲染显示第二播放器的第二播放界面的触发图标。

可选的，处理器响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，根据预设尺寸显示第二播放界面。

可选的，处理器响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，确定当前已获取与第一视频数据流相关联的第二视频数据流时，显示第二播放界面。可选的，处理器响应于对触发图标的操作指令，显示第二播放界面，包括：

响应于对触发图标的操作指令，发送第二视频数据流的获取请求；

待获取到第二视频流时，显示第二播放界面。

可选的，处理器还用于:

监听鼠标的位置及对鼠标的点击操作；

若监听到鼠标针对第一播放界面进行操作，则输出第一事件标识；

若监听到鼠标针对第二播放界面进行操作，则输出第二事件标识；

其中，对于同一操作，输出的第一事件标识与第二事件标识不同。

本公开实施例还提供一种计算机可读存储介质，包括指令，当其在计算机上运行时，使得计算机执行上述实施例提供的视频数据播放方法。

本公开实施例还提供一种计算机程序产品，包括计算机程序，计算机程序包括程序指令，当程序指令被电子设备执行时，使电子设备执行上述实施例提供的视频数据播放方法。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置和模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本公开所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。

作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。

计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本公开实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一计算机可读存储介质传输，例如，计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘(solid statedisk，SSD))等。

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