一种web播放器的多画面模式切换方法及装置

摘要

本发明公开了一种web播放器的多画面模式切换方法及装置，通过用户预设置的多个画面模式，对视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组；当检测到播放器画面切换指令时，根据选取的画面模式及其对应的视频画面尺寸参数组，对输入的视频流进行缩放处理，并设置对应的视频画面位置，对输入的视频流进行叠加处理，生成总rtsp格式视频流地址；通过将总rtsp格式视频流地址中的读取的视频数据转换为MP4格式数据，并赋值到创建的视频标签中，以使web播放器依据当前画面模式播放视频数据。与现有技术相比，本发明的技术方案不需要服务器进行转码，能减少服务器转码压力，提高视频播放的稳定性。

权利要求

1.一种web播放器的多画面模式切换方法，其特征在于，包括：

对web播放器设置视频画面总宽高参数，基于用户预设置的多个画面模式，对所述视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组；

当检测到播放器画面切换指令时，通过服务器获取室内监测摄像头的rtsp格式视频流地址，得到每个视频流的流地址，并基于服务器将获取的每个视频流对应的流地址输入到web播放器中，获取各个视频流的获取时间，根据所述获取时间的先后顺序，生成视频流列表，并在所述web播放器上显示所述视频流列表；

根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流；

获取每个视频流对应的视频流尺寸参数，将所述视频流尺寸参数与所述画面模式对应的视频画面尺寸参数组中的视频画面方格宽高参数进行对比，若所述视频流尺寸参数与所述视频画面方格宽高参数相同，则不对所述视频流进行缩放处理，若否，则将所述视频流尺寸参数设置为所述画面方格宽高参数，并对所述视频流设置对应的视频画面位置，对输入的视频流进行叠加处理，生成总rtsp格式视频流地址；

读取所述总rtsp格式视频流地址中的视频数据，并将所述视频数据转换为MP4格式数据，将所述MP4格式数据赋值到创建的视频标签中，以使所述web播放器依据当前画面模式播放视频数据；

对比当前web播放器的宽高参数与原始web播放器的宽高参数，计算出web播放器的窗口是否最小化，当所述web播放器的窗口最小化时，默认当前web播放器不在 用户视窗内；

当所述web播放器出现在用户视窗内时，控制所述web播放器进行初始化播放，当所述web播放器不在用户视窗内时，控制所述web播放器进行关闭。

2.如权利要求1所述的一种web播放器的多画面模式切换方法，其特征在于，预设置的多个画面模式包括第一画面模式、第二画面模式、第三画面模式和第四画面模式；

其中，所述第一画面模式中包括一个画面方格及其对应的画面方格位置编号，所述第二画面模式中包含三个画面方格及其对应的画面方格位置编号，所述三画面模式中包含四个画面方格及其对应的画面方格位置编号，所述第四画面模式中包含九个画面方格及其对应的画面方格位置编号。

3.如权利要求2所述的一种web播放器的多画面模式切换方法，其特征在于，基于用户预设置的多个画面模式，对所述视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组，具体包括：获取所述视频画面总宽高参数，根据每个画面模式包含的画面方格数量对所述视频画面总宽高参数进行尺寸划分，以使将视频画面划分为多个视频画面方格；

获取所述多个视频画面方格对应的视频画面方格参数，对所述视频画面方格参数进行汇总，得到不同画面模式对应的视频画面尺寸参数组，其中，所述视频画面方格参数包括视频画面方格编号、视频画面方格角点坐标及视频画面方格宽高参数。

4.如权利要求3所述的一种web播放器的多画面模式切换方法，其特征在于，对所述视频流设置对应的视频画面位置，具体包括：根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流，获取选取的每个视频流的获取时间，基于所述获取时间，对选取的视频流进行排序，得到每个视频流对应的视频流编号；

根据所述视频流编号，对应获取画面模式对应的视频画面尺寸参数组中的视频画面方格编号，根据所述视频画面方格编号对应的视频画面方格的角点坐标，对所述视频流设置对应的视频画面位置。

5.一种web播放器的多画面模式切换装置，其特征在于，包括：画面模式设置模块、视频流地址汇总模块和视频播放模块；

其中，所述画面模式设置模块，用于对web播放器设置视频画面总宽高参数，基于用户预设置的多个画面模式，对所述视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组；

所述视频流地址汇总模块，用于当检测到播放器画面切换指令时，通过服务器获取室内监测摄像头的rtsp格式视频流地址，得到每个视频流的流地址，并基于服务器将获取的每个视频流对应的流地址输入到web播放器中，获取各个视频流的获取时间，根据所述获取时间的先后顺序，生成视频流列表，并在所述web播放器上显示所述视频流列表；根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流；获取每个视频流对应的视频流尺寸参数，将所述视频流尺寸参数与所述画面模式对应的视频画面尺寸参数组中的视频画面方格宽高参数进行对比，若所述视频流尺寸参数与所述视频画面方格宽高参数相同，则不对所述视频流进行缩放处理，若否，则将所述视频流尺寸参数设置为所述画面方格宽高参数，并对所述视频流设置对应的视频画面位置，对输入的视频流进行叠加处理，生成总rtsp格式视频流地址；

所述视频播放模块，用于读取所述总rtsp格式视频流地址中的视频数据，并将所述视频数据转换为MP4格式数据，将所述MP4格式数据赋值到创建的视频标签中，以使所述web播放器依据当前画面模式播放视频数据，对比当前web播放器的宽高参数与原始web播放器的宽高参数，计算出web播放器的窗口是否最小化，当所述web播放器的窗口最小化时，默认当前web播放器不在 用户视窗内，当所述web播放器出现在用户视窗内时，控制所述web播放器进行初始化播放，当所述web播放器不在用户视窗内时，控制所述web播放器进行关闭。

6.如权利要求5所述的一种web播放器的多画面模式切换装置，其特征在于，所述画面模式设置模块中预设置的多个画面模式包括第一画面模式、第二画面模式、第三画面模式和第四画面模式；

其中，所述第一画面模式中包括一个画面方格及其对应的画面方格位置编号，所述第二画面模式中包含三个画面方格及其对应的画面方格位置编号，所述三画面模式中包含四个画面方格及其对应的画面方格位置编号，所述第四画面模式中包含九个画面方格及其对应的画面方格位置编号。

7.一种终端设备，其特征在于，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述处理器执行所述计算机程序时实现如权利要求1至4任意一项所述的web播放器的多画面模式切换方法。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如权利要求1至4中任意一项所述的web播放器的多画面模式切换方法。

说明书

一种web播放器的多画面模式切换方法及装置

技术领域

[0001] 本发明涉及视频播放的技术领域，特别是涉及一种web播放器的多画面模式切换方法及装置。

背景技术

[0002] 在web浏览器中，视频播放是很普遍的功能，我们常见的播放器功能有音量调节、暂停/播放、分辨率切换、全屏/缩放、弹幕等等，但基本都是一个播放器播放一个画面的，目前不支持一个播放器播放多个画面。然而web端在一些类似监测功能的多场景画面同时展示的需求也日益增长，如学校教学平台，同时监测多个教室里面的情况；医院后端管理系统多个楼层的实时画面；车站调度系统监测多个站台多个场景等等。

[0003] 在以往实现此类需求，常规的做法是，web后端获取录播主机的流，转码成.rtmp、.flv格式或.m3u8等流格式，web前端使用flv.js、hls.js等一些开源播放器，在页面创建多个播放器进行播放。简单说就是创建多个播放器同时播放多个流地址，拼凑出多个画面组合，且多个播放器获取的视频流数据是都是基于服务端进行转码，如果客户端的播放器越多，服务器转码压力越大，服务端以便转码，以便返推数据到客户端，导致画面的稳定性受网络影响很大；且在长期测试中，我们发现单个页面多个播放器同时播放，超过4小时或更长时间，会出现浏览器内存占满卡顿，页面卡顿，甚至崩溃的现象。

发明内容

[0004] 本发明要解决的技术问题是：提供一种web播放器的多画面模式切换方法及装置，减少服务器转码压力，提高视频播放的稳定性。

[0005] 为了解决上述技术问题，本发明提供了一种web播放器的多画面模式切换方法，包括：

[0006] 对web播放器设置视频画面总宽高参数，基于用户预设置的多个画面模式，对所述视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组；

[0007] 当检测到播放器画面切换指令时，根据选取的画面模式及其对应的视频画面尺寸参数组，对输入的视频流进行缩放处理，并对所述视频流设置对应的视频画面位置，对输入的视频流进行叠加处理，生成总rtsp格式视频流地址；

[0008] 读取所述总rtsp格式视频流地址中的视频数据，并将所述视频数据转换为MP4格式数据，将所述MP4格式数据赋值到创建的视频标签中，以使所述web播放器依据当前画面模式播放视频数据。

[0009] 在一种可能的实现方式中，预设置的多个画面模式包括第一画面模式、第二画面模式、第三画面模式和第四画面模式；

[0010] 其中，所述第一画面模式中包括一个画面方格及其对应的画面方格位置编号，所述第二画面模式中包含三个画面方格及其对应的画面方格位置编号，所述三画面模式中包含四个画面方格及其对应的画面方格位置编号，所述第四画面模式中包含九个画面方格及其对应的画面方格位置编号。

[0011] 在一种可能的实现方式中，基于用户预设置的多个画面模式，对所述视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组，具体包括：

[0012] 获取所述视频画面总宽高参数，根据每个画面模式包含的画面方格数量对所述视频画面总宽高参数进行尺寸划分，以使将视频画面划分为多个视频画面方格；

[0013] 获取所述多个视频画面方格对应的视频画面方格参数，对所述视频画面方格参数进行汇总，得到不同画面模式对应的视频画面尺寸参数组，其中，所述视频画面方格参数包括视频画面方格编号、视频画面方格角点坐标及视频画面方格宽高参数。

[0014] 在一种可能的实现方式中，对输入的视频流进行缩放处理前，还包括：

[0015] 获取各个视频流的获取时间，根据所述获取时间的先后顺序，生成视频流列表，并在所述web播放器上显示所述视频流列表。

[0016] 在一种可能的实现方式中，根据选取的画面模式及其对应的视频画面尺寸参数组，对输入的视频流进行缩放处理，具体包括：

[0017] 根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流；

[0018] 获取每个视频流对应的视频流尺寸参数，将所述视频流尺寸参数与所述画面模式对应的视频画面尺寸参数组中的视频画面方格宽高参数进行对比，若所述视频流尺寸参数与所述视频画面方格宽高参数相同，则不对所述视频流进行缩放处理，若否，则将所述视频流尺寸参数设置为所述画面方格宽高参数。

[0019] 在一种可能的实现方式中，对所述视频流设置对应的视频画面位置，具体包括：

[0020] 根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流，获取选取的每个视频流的获取时间，基于所述获取时间，对选取的视频流进行排序，得到每个视频流对应的视频流编号；

[0021] 根据所述视频流编号，对应获取画面模式对应的视频画面尺寸参数组中的视频画面方格编号，根据所述视频画面方格编号对应的视频画面方格的角点坐标，对所述视频流设置对应的视频画面位置。

[0022] 本发明还提供了一种web播放器的多画面模式切换装置，包括：画面模式设置模块、视频流地址汇总模块和视频播放模块；

[0023] 其中，所述画面模式设置模块，用于对web播放器设置视频画面总宽高参数，基于用户预设置的多个画面模式，对所述视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组；

[0024] 所述视频流地址汇总模块，用于当检测到播放器画面切换指令时，根据选取的画面模式及其对应的视频画面尺寸参数组，对输入的视频流进行缩放处理，并对所述视频流设置对应的视频画面位置，对输入的视频流进行叠加处理，生成总rtsp格式视频流地址；

[0025] 所述视频播放模块，用于读取所述总rtsp格式视频流地址中的视频数据，并将所述视频数据转换为MP4格式数据，将所述MP4格式数据赋值到创建的视频标签中，以使所述web播放器依据当前画面模式播放视频数据。

[0026] 在一种可能的实现方式中，所述画面模式设置模块中预设置的多个画面模式包括第一画面模式、第二画面模式、第三画面模式和第四画面模式；

[0027] 其中，所述第一画面模式中包括一个画面方格及其对应的画面方格位置编号，所述第二画面模式中包含三个画面方格及其对应的画面方格位置编号，所述三画面模式中包含四个画面方格及其对应的画面方格位置编号，所述第四画面模式中包含九个画面方格及其对应的画面方格位置编号。

[0028] 在一种可能的实现方式中，所述画面模式设置模块，用于基于用户预设置的多个画面模式，对所述视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组，具体包括：

[0029] 获取所述视频画面总宽高参数，根据每个画面模式包含的画面方格数量对所述视频画面总宽高参数进行尺寸划分，以使将视频画面划分为多个视频画面方格；

[0030] 获取所述多个视频画面方格对应的视频画面方格参数，对所述视频画面方格参数进行汇总，得到不同画面模式对应的视频画面尺寸参数组，其中，所述视频画面方格参数包括视频画面方格编号、视频画面方格角点坐标及视频画面方格宽高参数。

[0031] 在一种可能的实现方式中，所述视频流地址汇总模块，用于对输入的视频流进行缩放处理前，还用于：

[0032] 获取各个视频流的获取时间，根据所述获取时间的先后顺序，生成视频流列表，并在所述web播放器上显示所述视频流列表。

[0033] 在一种可能的实现方式中，所述视频流地址汇总模块，用于根据选取的画面模式及其对应的视频画面尺寸参数组，对输入的视频流进行缩放处理，具体包括：

[0034] 根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流；

[0035] 获取每个视频流对应的视频流尺寸参数，将所述视频流尺寸参数与所述画面模式对应的视频画面尺寸参数组中的视频画面方格宽高参数进行对比，若所述视频流尺寸参数与所述视频画面方格宽高参数相同，则不对所述视频流进行缩放处理，若否，则将所述视频流尺寸参数设置为所述画面方格宽高参数。

[0036] 在一种可能的实现方式中，所述视频流地址汇总模块，用于对所述视频流设置对应的视频画面位置，具体包括：

[0037] 根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流，获取选取的每个视频流的获取时间，基于所述获取时间，对选取的视频流进行排序，得到每个视频流对应的视频流编号；

[0038] 根据所述视频流编号，对应获取画面模式对应的视频画面尺寸参数组中的视频画面方格编号，根据所述视频画面方格编号对应的视频画面方格的角点坐标，对所述视频流设置对应的视频画面位置。

[0039] 本发明还提供了一种终端设备，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述处理器执行所述计算机程序时实现如上述任意一项所述的web播放器的多画面模式切换方法。

[0040] 本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如上述任意一项所述的web播放器的多画面模式切换方法。

[0041] 本发明实施例一种web播放器的多画面模式切换方法及装置，与现有技术相比，具有如下有益效果：

[0042] 通过用户预设置的多个画面模式，对视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组；当检测到播放器画面切换指令时，根据选取的画面模式及其对应的视频画面尺寸参数组，对输入的视频流进行缩放处理，并设置对应的视频画面位置，对输入的视频流进行叠加处理，生成总rtsp格式视频流地址；通过将总rtsp格式视频流地址中的读取的视频数据转换为MP4格式数据，并赋值到创建的视频标签中，以使web播放器依据当前画面模式播放视频数据。与现有技术相比，本发明的技术方案不需要服务器进行转码，能减少服务器转码压力，且通过将多个视频流合并成一个总视频流地址，以使在单个画面中播放多个视频画面，提高视频播放的稳定性。

附图说明

[0043] 图1是本发明提供的一种web播放器的多画面模式切换方法的一种实施例的流程示意图；

[0044] 图2是本发明提供的一种web播放器的多画面模式切换装置的一种实施例的结构示意图；

[0045] 图3是本发明提供的一种实施例的第一画面模式示意图；

[0046] 图4是本发明提供的一种实施例的第二画面模式示意图；

[0047] 图5是本发明提供的一种实施例的第三画面模式示意图；

[0048] 图6是本发明提供的一种实施例的第四画面模式示意图。

具体实施方式

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

[0050] 实施例1

[0051] 参见图1，图1是本发明提供的一种web播放器的多画面模式切换方法的一种实施例的流程示意图，如图1所示，该方法包括步骤101‑步骤104，具体如下：

[0052] 步骤101：对web播放器设置视频画面总宽高参数，基于用户预设置的多个画面模式，对所述视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组。

[0053] 一实施例中，先对web播放器进行初始化处理，得到初始化后的web播放器。

[0054] 具体的，通过在客户端安装Emscripten环境，用c语言创建项目，引入FFmpeg，编译出FFmpeg.wasm文件，其中，FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序；再通过JavaScript引入FFmpeg.wasm文件，编写播放器初始化INIT方法，其中，初始化INIT方法包括使用createFFmpeg创建FFmpeg实例，调用FFmpeg的load方法完成初始化。

[0055] 一实施例中，通过FFmpeg对web播放器设置视频画面总宽高参数，具体的，通过FFmpeg创建宽x高的画布，将所述画布的宽高尺寸设置为web播放器设置视频画面总宽高参数；优选的，所述宽x高大小的画布可以为640x480大小的画布，也可以为1200x600大小的画布，具体的宽高参数可基于需求进行设置。

[0056] 一实施例中，预设置的多个画面模式包括第一画面模式、第二画面模式、第三画面模式和第四画面模式；其中，所述第一画面模式中包括一个画面方格及其对应的画面方格位置编号，所述第二画面模式中包含三个画面方格及其对应的画面方格位置编号，所述三画面模式中包含四个画面方格及其对应的画面方格位置编号，所述第四画面模式中包含九个画面方格及其对应的画面方格位置编号。

[0057] 具体的，如图3所示，图3是第一画面模式示意图，第一画面模式中只包含一个画面方格用于播放视频数据，其画面方格位置编号为1。

[0058] 如图4所示，图4是第二画面模式示意图，第二画面模式中包含的三个画面方格的排列为左一右二，其中，对于右二的排列为上下排列，将位于左侧的一个画面方格对应的画面方格位置编号设置为1，将位于右侧上方的一个画面方格对应的画面方格位置编号设置为2，将右侧下方的一个画面方格对应的画面方格位置编号设置为3。

[0059] 如图5所示，图5是第三画面模式示意图，第三画面模式中包含的四个画面方格的排列为左二右二，其中，对于左二和右二的排列均为上下排列，将位于左侧上方的一个画面方格对应的画面方格位置编号设置为1，将左侧下方的一个画面方格对应的画面方格位置编号设置为2，将位于右侧上方的一个画面方格对应的画面方格位置编号设置为3，将右侧下方的一个画面方格对应的画面方格位置编号设置为4。

[0060] 如图6所示，图6是第四画面模式示意图，第四画面模式中包含的九个画面方格的排列为左三中三右三，其中，对于左三、中三和右三的排列均为上中下排列，将位于左侧上方的一个画面方格对应的画面方格位置编号设置为1，将位于左侧中间的一个画面方格对应的画面方格位置编号设置为2，将左侧下方的一个画面方格对应的画面方格位置编号设置,3，将位于中部上方的一个画面方格对应的画面方格位置编号设置为4，将位于中部中间的一个画面方格对应的画面方格位置编号设置为5，将中部下方的一个画面方格对应的画面方格位置编号设置为6，将位于右侧上方的一个画面方格对应的画面方格位置编号设置为7，将右侧中间的一个画面方格对应的画面方格位置编号设置为8，将右侧下方的一个画面方格对应的画面方格位置编号设置为9。

[0061] 一实施例中，基于获取所述视频画面总宽高参数，根据每个画面模式包含的画面方格数量对所述视频画面总宽高参数进行尺寸划分，以使将视频画面划分为多个视频画面方格。

[0062] 具体的，对于第一画面模式，由于第一画面模式中只包含一个画面方格数量，因此直接将所述画面方格的尺寸参数设置与web播放器视频画面总宽高参数相同。

[0063] 对于第二画面模式，由于第一画面模式中包含三个画面方格，且其排列顺序为左一右二，因此获取所述视频画面总宽高尺寸参数中的总宽度，将所述总宽度除以2，以使将所述视频画面划分为左右两个视频画面方格，且对于右侧视频画面方格，获取所述视频画面总宽高尺寸参数中的总高度，将所述总高度除以2，以使将所述右侧视频画面方格划分为上下两个视频画面方格，以使将视频画面划分为左一右二三个视频画面方格。

[0064] 对于第三画面模式，由于第一画面模式中包含四个画面方格，其其排列顺序为左二右二，因此，因此获取所述视频画面总宽高尺寸参数中的总宽度，将所述总宽度除以2，以使将所述视频画面划分为左右两个视频画面方格，且对于左右两侧的视频画面方格，获取所述视频画面总宽高尺寸参数中的总高度，将所述总高度除以2，以使将所述左右两侧的视频画面方格分别划分为上下两个视频画面方格，以使将视频画面划分为左二右二四个视频画面方格。

[0065] 对于第四画面模式，由于第四画面模式中包含九个画面方格，其其排列顺序为左三中三右三，因此，因此获取所述视频画面总宽高尺寸参数中的总宽度，将所述总宽度除以3，以使将所述视频画面划分为左中右三个视频画面方格，且对于左中右三侧的视频画面方格，获取所述视频画面总宽高尺寸参数中的总高度，将所述总高度除以3，以使将所述左中右三侧的视频画面方格分别划分为上中下三个视频画面方格，以使将视频画面划分为左三中三右三九个视频画面方格。

[0066] 一实施例中，获取所述多个视频画面方格对应的视频画面方格参数，对所述视频画面方格参数进行汇总，得到不同画面模式对应的视频画面尺寸参数组，其中，所述视频画面方格参数包括视频画面方格编号、视频画面方格角点坐标及视频画面方格宽高参数。

[0067] 具体的，在将视频画面基于画面模式划分为一个或多个视频画面方格后，还获取不同画面模式下划分为的每个视频画面方格参数，其中，所述视频画面方格参数包括视频画面方格编号、视频画面方格角点坐标及视频画面方格宽高参数。视频画面方格的宽高在横竖方向进行均匀划分，若视频画面基准是640x480，若画面模式需要横向划分2份，因为是均分，则640除以2，每份宽度是320，同理高度也是均分；其他画面模式也是同理。

[0068] 作为本实施例中的一种举例说明，以视频画面左下角的角点为坐标原点，若设置的视频画面总宽高参数为640×480，将所述总宽度参数640设置为坐标系x轴长度，将所述总高度参数480设置为坐标系y轴长度。

[0069] 对于第一画面模式，获取其视频画面方格编号为1，其对应的视频画面方格角点坐标为（0,0）、（640,0）、（640，480）、（0,480），该视频画面方格宽高参数为640×480。

[0070] 对于第二画面模式，直接将第二画面模式中的画面方格位置编号1对应的视频画面方格设置为视频画面方格编号1，其对应的视频画面方格角点坐标为（0,0）、（320,0）、（320，480）、（0,480），该视频画面方格宽高参数为320×480，将第二画面模式中的画面方格位置编号2对应的视频画面方格设置为视频画面方格编号2，其对应的视频画面方格角点坐标为（320,240）、（640,240）、（640,480）、（320,480），该视频画面方格宽高参数为320×240;将第二画面模式中的画面方格位置编号3对应的视频画面方格设置为视频画面方格编号3，其对应的视频画面方格角点坐标为（320,0）、（640,0）、（640，240）、（320,240），该视频画面方格宽高参数为320×240。

[0071] 一实施例中，在同一画面模式下，对视频画面划分的所有视频画面方格对应的视频画面方格参数进行汇总，得到不同画面模式对应的视频画面尺寸参数组。

[0072] 步骤102：当检测到播放器画面切换指令时，根据选取的画面模式及其对应的视频画面尺寸参数组，对输入的视频流进行缩放处理，并对所述视频流设置对应的视频画面位置，对输入的视频流进行叠加处理，生成总rtsp格式视频流地址。

[0073] 一实施例中，用Html、JS、css封装一个web播放器UI层，实现播放外壳，实现播放器窗口、画面模式切换按钮、视频流列表按钮。

[0074] 一实施例中，通过对画面模式切换按钮进行实时检测，当检测到用户基于鼠标或触控等方式触发画面模式切换按钮时，画面模式切换按钮会基于用户选取的画面模式自动生成播放器画面切换指令，因此，通过实时检测播放器画面切换指令，即可及时响应用户的画面模式切换需求。

[0075] 一实施例中，获取各个视频流的获取时间，根据所述获取时间的先后顺序，生成视频流列表，并在所述web播放器上显示所述视频流列表。优选的，通过服务器获取室内监测摄像头的rtsp，得到每个视频的流地址，并基于服务器直接将获取的每个视频对应的流地址输入到web播放器中，其中，所述服务器中只用于获取视频流的流地址，并对流地址进行发送，并不涉及对视频流进行转码处理。

[0076] 一实施例中，根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流；优选的，视频流的选取方式可以为自动按视频流列表中的排列顺序进行自动获取，也可基于用户进行手动获取。

[0077] 一实施例中，获取每个视频流对应的视频流尺寸参数，将所述视频流尺寸参数与所述画面模式对应的视频画面尺寸参数组中的视频画面方格宽高参数进行对比，若所述视频流尺寸参数与所述视频画面方格宽高参数相同，则不对所述视频流进行缩放处理，若否，则将所述视频流尺寸参数设置为所述画面方格宽高参数。

[0078] 具体的，获取视频流列表中的第一个视频流，获取第一个视频流对应的视频流尺寸参数，其中，所述视频流尺寸参数为宽×高，同时获取当前画面模式中视频画面方格编号为1的视频画面方格宽高参数，将所述视频流尺寸参数与所述视频画面方格宽高参数进行对比，若两者的参数不相同，则基于视频画面方格宽高参数对视频流尺寸参数进行等比例放大或缩小，以使所述视频流尺寸参数与所述视频画面方格宽高参数相同。

[0079] 优选的，若选取的视频流列表中的视频流数量大于所述画面模式中画面方格的数量，则基于画面模式中画面方格的数量对视频流列表中排列较前的视频流进行视频缩放处理，对于选取的视频流列表中的其与视频流则不进行视频缩放处理。同样的，若选取的视频流列表中的视频流数量小于所述画面模式中画面方格的数量，则将将选取的视频流基于画面模式中的视频画面方格的编号有小到大进行视频画面方格选取，以使在对应的视频画面方格中进行视频缩放处理，对于没有选的视频画面方格则不进行视频缩放处理。

[0080] 具体的，由于web播放器的播放是基于画面模式的，若当前画面模式为第二画面模式，此时，如果用户传入了4个或更多的视频流，那仅会使用前3个视频流进行画面分别摆放视频画面方案编号1、视频画面方格编号2和视频画面方格编号3的位置进行合并处理；如果传入的视频流少了，比如只传入2个视频流，那只排放在视频画面方案编号1、视频画面方格编号2位置，最后一个视频画面方格编号3不需要处理。

[0081] 一实施例中，还根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流，获取选取的每个视频流的获取时间，基于所述获取时间，对选取的视频流进行排序，得到每个视频流对应的视频流编号；根据所述视频流编号，对应获取画面模式对应的视频画面尺寸参数组中的视频画面方格编号，根据所述视频画面方格编号对应的视频画面方格的角点坐标，对所述视频流设置对应的视频画面位置。

[0082] 一实施例中，通过获取当前画面模式下，每个视频画面方格对应的视频流缩放后的视频尺寸参数及其对应的视频画面位置，对所有视频流及其对应的获取的视频流信息进行叠加处理，生成最终的总rtsp格式视频流地址。

[0083] 作为本实施例中的一种优选实施例，通过使用FFmpeg的run方法，基于FFmpeg的过滤器‑filter_complex，通过nullsrc创建overlay画布，设置的宽高值为640x480，分别输入3个视频流，避将三个视频流分别进行缩放处理，然后基于nullsrc生成的画布进行视频设置。视频流位置是自定义的，一般基于排序的视频流编号进行定义，画面模式多少个画面方格就多少个视频流位置，并设置输出合并后的输出视频流名称output.mp4。

[0084] 步骤103：读取所述总rtsp格式视频流地址中的视频数据，并将所述视频数据转换为MP4格式数据，将所述MP4格式数据赋值到创建的视频标签中，以使所述web播放器依据当前画面模式播放视频数据。

[0085] 一实施例中，通过使用FFmpeg.FS读取总rtsp格式视频流地址中的视数据，将读取后视频数据转换为mp4格式，赋值给页面video标签中的src属性，即可实现web播放器中进行播放。

[0086] 一实施例中，基于画面模式，将多个视频流地址合并成一个视频流地址，实现将多个视频画面合成一个视频画面进行播放，能避免现有技术中在单个页面里多个播放器同时播放，导致浏览器内存占满卡顿，页面卡顿，甚至崩溃的现象，能提高视频播放的流畅度。

[0087] 一实施例中，由于浏览器是一个运行在操作系统中的软件，当浏览器打开web播放器页面时，其实就是创建了一个进程，系统给这个页面进程分配了资源（cpu、内存）,比如window系统打开任务管理器就可以看到，这个页面进程内容占用空间和cpu使用情况，播放器进行视频流的处理的整个过程主要由页面进程里的js引擎线程进行解释处理，这个过程会很耗cpu和内存。

[0088] 基于上述，本实施例中，还对播放器的页面滚动和页面视窗大小情况的监测，当所述web播放器出现在用户视窗内时，控制所述web播放器进行初始化播放，当所述web播放器不在用户视窗内时，控制所述web播放器进行关闭。

[0089] 具体的，基于js的监测window对象的滚动事件，通过web对比当前web播放器的宽高参数与原始web播放器的宽高参数，即可计算出web播放器的窗口是否最小化，当所述web播放器的窗口最小化时，默认当前web播放器不再用户视窗内。

[0090] 综上，本发明提供的一种web播放器的多画面模式切换方法，不需要服务端进行转码，画面的合成和转码都在客户端的浏览器中，相当于将服务器端的转码压力，分散到了客户端，减少了服务器压力，避免了资源浪费，其基于FFmpeg，能支持多种格式的转换，播放不同格式的视频流变得简单方便。

[0091] 实施例2

[0092] 参见图2，图2是本发明提供的一种web播放器的多画面模式切换装置的一种实施例的结构示意图，如图2所示，该装置包括画面模式设置模块201、视频流地址汇总模块202和视频播放模块203，具体如下：

[0093] 所述画面模式设置模块201，用于对web播放器设置视频画面总宽高参数，基于用户预设置的多个画面模式，对所述视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组。

[0094] 所述视频流地址汇总模块202，用于当检测到播放器画面切换指令时，根据选取的画面模式及其对应的视频画面尺寸参数组，对输入的视频流进行缩放处理，并对所述视频流设置对应的视频画面位置，对输入的视频流进行叠加处理，生成总rtsp格式视频流地址。

[0095] 所述视频播放模块203，用于读取所述总rtsp格式视频流地址中的视频数据，并将所述视频数据转换为MP4格式数据，将所述MP4格式数据赋值到创建的视频标签中，以使所述web播放器依据当前画面模式播放视频数据。

[0096] 一实施例中，所述画面模式设置模块201中预设置的多个画面模式包括第一画面模式、第二画面模式、第三画面模式和第四画面模式；其中，所述第一画面模式中包括一个画面方格及其对应的画面方格位置编号，所述第二画面模式中包含三个画面方格及其对应的画面方格位置编号，所述三画面模式中包含四个画面方格及其对应的画面方格位置编号，所述第四画面模式中包含九个画面方格及其对应的画面方格位置编号。

[0097] 一实施例中，所述画面模式设置模块201，用于基于用户预设置的多个画面模式，对所述视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组，具体包括：获取所述视频画面总宽高参数，根据每个画面模式包含的画面方格数量对所述视频画面总宽高参数进行尺寸划分，以使将视频画面划分为多个视频画面方格；获取所述多个视频画面方格对应的视频画面方格参数，对所述视频画面方格参数进行汇总，得到不同画面模式对应的视频画面尺寸参数组，其中，所述视频画面方格参数包括视频画面方格编号、视频画面方格角点坐标及视频画面方格宽高参数。

[0098] 一实施例中，所述视频流地址汇总模块202，用于对输入的视频流进行缩放处理前，还用于：获取各个视频流的获取时间，根据所述获取时间的先后顺序，生成视频流列表，并在所述web播放器上显示所述视频流列表。

[0099] 一实施例中，所述视频流地址汇总模块202，用于根据选取的画面模式及其对应的视频画面尺寸参数组，对输入的视频流进行缩放处理，具体包括：根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流；获取每个视频流对应的视频流尺寸参数，将所述视频流尺寸参数与所述画面模式对应的视频画面尺寸参数组中的视频画面方格宽高参数进行对比，若所述视频流尺寸参数与所述视频画面方格宽高参数相同，则不对所述视频流进行缩放处理，若否，则将所述视频流尺寸参数设置为所述画面方格宽高参数。

[0100] 一实施例中，所述视频流地址汇总模块202，用于对所述视频流设置对应的视频画面位置，具体包括：根据所述画面模式中画面方格的数量，从视频流列表中选取对应数量的视频流，获取选取的每个视频流的获取时间，基于所述获取时间，对选取的视频流进行排序，得到每个视频流对应的视频流编号；根据所述视频流编号，对应获取画面模式对应的视频画面尺寸参数组中的视频画面方格编号，根据所述视频画面方格编号对应的视频画面方格的角点坐标，对所述视频流设置对应的视频画面位置。

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

[0102] 需要说明的是，上述web播放器的多画面模式切换装置的实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

[0103] 在上述的web播放器的多画面模式切换方法的实施例的基础上，本发明另一实施例提供了一种web播放器的多画面模式切换终端设备，该web播放器的多画面模式切换终端设备，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述处理器执行所述计算机程序时，实现本发明任意一实施例的web播放器的多画面模式切换方法。

[0104] 示例性的，在这一实施例中所述计算机程序可以被分割成一个或多个模块，所述一个或者多个模块被存储在所述存储器中，并由所述处理器执行，以完成本发明。所述一个或多个模块可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序在所述web播放器的多画面模式切换终端设备中的执行过程。

[0105] 所述web播放器的多画面模式切换终端设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述web播放器的多画面模式切换终端设备可包括，但不仅限于，处理器、存储器。

[0106] 所称处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器  (Digital Signal Processor，DSP)、专用集成电路 (Application Specific Integrated Circuit，ASIC)、现成可编程门阵列 (Field‑Programmable Gate Array，FPGA) 或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述web播放器的多画面模式切换终端设备的控制中心，利用各种接口和线路连接整个web播放器的多画面模式切换终端设备的各个部分。

[0107] 所述存储器可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现所述web播放器的多画面模式切换终端设备的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据手机的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡（Smart Media Card, SMC），安全数字（Secure Digital, SD）卡，闪存卡（Flash Card）、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

[0108] 在上述web播放器的多画面模式切换方法的实施例的基础上，本发明另一实施例提供了一种存储介质，所述存储介质包括存储的计算机程序，其中，在所述计算机程序运行时，控制所述存储介质所在的设备执行本发明任意一实施例的web播放器的多画面模式切换方法。

[0109] 在这一实施例中，上述存储介质为计算机可读存储介质，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器（ROM，Read‑Only Memory）、随机存取存储器（RAM，Random Access Memory）、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

[0110] 综上，本发明提供了一种web播放器的多画面模式切换方法及装置，通过用户预设置的多个画面模式，对视频画面总宽高参数进行尺寸划分，得到不同画面模式对应的视频画面尺寸参数组；当检测到播放器画面切换指令时，根据选取的画面模式及其对应的视频画面尺寸参数组，对输入的视频流进行缩放处理，并设置对应的视频画面位置，对输入的视频流进行叠加处理，生成总rtsp格式视频流地址；通过将总rtsp格式视频流地址中的读取的视频数据转换为MP4格式数据，并赋值到创建的视频标签中，以使web播放器依据当前画面模式播放视频数据。与现有技术相比，本发明的技术方案不需要服务器进行转码，能减少服务器转码压力，提高视频播放的稳定性。

[0111] 以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和替换，这些改进和替换也应视为本发明的保护范围。