CN114741153A - 多端支持的视频布局方法、装置、设备、介质及程序产品 - Google Patents

Abstract

本申请实施例提供了一种多端支持的视频布局方法、装置、电子设备、计算机可读存储介质及计算机程序产品，涉及前端显示领域。该方法包括：在确定待显示场景之后，根据显示屏的尺寸从待显示场景的布局信息中确定目标布局模式，进而根据目标布局模式确定视频框的尺寸，最后，通过该视频框播放待显示场景相应的视频。由于不同的终端所配置的显示屏存在尺寸差异，而上述确定视频框尺寸的方式确保随着终端显示屏配置的不同，在提供的布局信息的范围内对视频框的尺寸进行适应调整，从而保证待显示场景在不同终端下的播放效果可以适配用户在相应终端上的观看习惯。

Description

多端支持的视频布局方法、装置、设备、介质及程序产品

技术领域

本申请涉及前端显示的技术领域，具体而言，本申请涉及一种多端支持的视频布局方法、装置、电子设备、计算机可读存储介质及计算机程序产品。

背景技术

目前，前端页面的显示方法中所采用的布局方式主要有两类：自适应布局和响应式布局。其中，采用自适应布局的显示方法在遇到页面修改问题时，所需修改的工作量较大；采用响应式布局的显示方法在实现复杂结构的页面时存在难度。因此，在前端页面的显示方法应用于多视频显示的场景时，通常是在单一场景下以一种不可配置的固定数量的方式进行显示。

然而，按固定数量的方式来显示只适用于固定的视频数量，且终端的屏幕分辨率确定的情况。由于在视频播放时是以固定分辨率来播放，视频在前端的显示无法同时适配不同的终端，如无法同时适配PC端与移动端。

发明内容

本申请实施例所示的方案旨在能解决上述问题之一。

根据本申请实施例的一个方面，提供了一种多端支持的视频布局的方法，该方法包括：

确定待显示场景，待显示场景配置有布局信息和视频信息；根据显示屏的尺寸从布局信息中确定目标布局模式，并根据目标布局模式确定当前页面中的视频框的尺寸；根据视频信息在视频框中播放视频。

在一种可能的实现方式中，确定待显示场景，具体可以包括：

若确定有缓存的历史场景，将历史场景确定为待显示场景；若确定没有缓存的历史场景，将从服务端获取的多个场景中的预设的场景确定为待显示场景。

在另一种可能的实现方式中，该方法还包括：

响应于携带新的待显示场景的触发操作，通过持久化组件缓存新的待显示场景。

在又一种可能的实现方式中，待显示场景的配置过程包括：

根据输入的最大布局模式配置待显示场景的布局信息，最大布局模式用于确定待显示场景的至少一种布局模式，每个布局模式包括视频框在显示屏的视频区域中的排列方式，边距信息；根据输入的多个视频的信息配置待显示场景的视频信息，每个视频的信息包括播放地址、分辨率和播放顺序。

在又一种可能的实现方式中，边距信息包括视频区域与显示屏的边距；边距信息还包括每个视频框之间的间距；根据显示屏的尺寸从布局信息中确定目标布局模式，并根据目标布局模式确定当前页面中的视频框的尺寸，具体可以包括：

从至少一种布局模式中确定出与显示屏的尺寸相适配的布局模式，并从相适配的布局模式中确定目标布局模式，目标布局模式包括视频框在视频区域中的排列方式；根据边距和当前页面的尺寸确定视频区域的尺寸，并根据排列方式、间距确定视频框的尺寸。

在又一种可能的实现方式中，在根据视频信息在确定的视频框中播放视频时，该方法包括：

依次针对每个视频框及相应的视频进行以下操作：

比较第一比值和第二比值的大小，第一比值为该视频的分辨率的宽度与高度之比，第二比值为该视频框的宽度与高度之比；若第一比值较大，对该视频进行宽度填充；若第一比值较小，对该视频进行高度填充。

在又一种可能的实现方式中，在根据视频信息在确定的视频框中播放视频时，该方法还包括：

若视频信息中的视频的总数大于预设阈值，通过HTTP/2协议基于总数发起视频获取请求，以获取相应数量的视频。

根据本申请实施例的另一个方面，提供了一种多端支持的视频布局装置，该装置包括：

第一确定模块，用于确定待显示场景，待显示场景配置有布局信息和视频信息；第二确定模块，用于根据显示屏的尺寸从布局信息中确定目标布局模式，并根据目标布局模式确定当前页面中的视频框的尺寸；播放模块，用于根据视频信息在确定的视频框中播放视频。

根据本申请实施例的另一个方面，提供了一种电子设备，该电子设备包括：存储器、处理器及存储在存储器上的计算机程序，处理器执行计算机程序以实现前述一种多端支持的视频布局方法的步骤。

根据本申请实施例的再一个方面，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现前述一种多端支持的视频布局方法的步骤。

根据本申请实施例的一个方面，提供了一种计算机程序产品，包括计算机程序，计算机程序被处理器执行时实现前述一种多端支持的视频布局方法的步骤。

本申请实施例提供的技术方案带来的有益效果是：

本申请实施例提供了一种多端支持的视频布局方法，该方法包括：在确定待显示场景之后，根据显示屏的尺寸从待显示场景的布局信息中确定目标布局模式，进而根据目标布局模式确定视频框的尺寸，最后，通过该视频框播放待显示场景相应的视频。由于不同的终端所配置的显示屏存在尺寸差异，而上述确定视频框尺寸的方式确保随着终端显示屏配置的不同，在提供的布局信息的范围内对视频框的尺寸进行适应调整，从而保证待显示场景在不同终端下的播放效果可以适配用户在相应终端上的观看习惯。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。

图1为本申请实施例提供的一种多端支持的视频布局方法的流程示意图；

图2为本申请实施例提供的一种多端支持的视频布局方法的应用场景示意图；

图3为本申请实施例提供的一种多端支持的视频布局装置的结构示意图；

图4为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

下面结合本申请中的附图描述本申请的实施例。应理解，下面结合附图所阐述的实施方式，是用于解释本申请实施例的技术方案的示例性描述，对本申请实施例的技术方案不构成限制。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请实施例所使用的术语“包括”以及“包含”是指相应特征可以实现为所呈现的特征、信息、数据、步骤、操作、元件和/或组件，但不排除实现为本技术领域所支持其他特征、信息、数据、步骤、操作、元件、组件和/或它们的组合等。应该理解，当我们称一个元件被“连接”或“耦接”到另一元件时，该一个元件可以直接连接或耦接到另一元件，也可以指该一个元件和另一元件通过中间元件建立连接关系。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的术语“和/或”指示该术语所限定的项目中的至少一个，例如“A和/或B”可以实现为“A”，或者实现为“B”，或者实现为“A和B”。

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

承接背景技术，自适应布局需要开发多套页面，并根据不同的设备来显示不同的页面，因此若遇到页面修改问题，所需修改的工作量较大。而响应式布局通常将页面划分为一行12或者24等分的栅格，显示内容设定为12～24以内的一个数值，该数值用来填充栅格。响应式布局可以实现根据不同屏幕的分辨率来调整填充数值，从而自动调整页面布局，由于栅格固定等分，因此导致布局的结构较为单一，在遇到复杂结构的页面时，存在一定的难度。

本申请提供的一种多端支持的视频布局方法、装置、电子设备、计算机可读存储介质以及计算机程序产品，旨在解决现有技术的如上的至少一个技术问题。

下面通过对几个示例性实施方式的描述，对本申请实施例的技术方案以及本申请的技术方案产生的技术效果进行说明。需要指出的是，下述实施方式之间可以相互参考、借鉴或结合，对于不同实施方式中相同的术语、相似的特征以及相似的实施步骤等，不再重复描述。

参见图1，本申请实施例提供了一种多端支持的视频布局方法的流程示意图。其中，该方法应用于终端上的客户端，该客户端配置有对应的服务端。该方法包括步骤S110～S130。

S110，确定待显示场景，待显示场景配置有布局信息和视频信息。

S120，根据显示屏的尺寸从布局信息中确定目标布局模式，并根据目标布局模式确定显示屏中的视频框的尺寸。

S130，根据视频信息在视频框中播放视频。

本申请实施例提供了一种多端支持的视频布局方法，该方法包括：在确定待显示场景之后，根据显示屏的尺寸从待显示场景的布局信息中确定目标布局模式，进而根据目标布局模式确定视频框的尺寸，最后，通过该视频框播放待显示场景相应的视频。由于不同的终端所配置的显示屏存在尺寸差异，而上述确定视频框尺寸的方式确保随着终端显示屏配置的不同，在提供的布局信息的范围内对视频框的尺寸进行适应调整，从而保证待显示场景在不同终端下的播放效果可以适配用户在相应终端上的观看习惯。

本申请实施例还提供了一种可能的实现方式，S110中确定待显示场景的方式具体可以包括：

若确定有缓存的历史场景，将历史场景确定为待显示场景；若确定没有缓存的历史场景，将从服务端获取的多个场景中的预设的场景确定为待显示场景。

具体而言，终端配置有持久化组件，该持久化组件用来缓存历史场景，在初始化客户端时，可以从缓存中确定是否有场景。该缓存的场景可以是客户端中上一次显示的场景。

具体而言，在初始化客户端时，还可以通过发送携带账户名和密码的请求给服务端，以便于服务端根据该账户名和密码反馈相应的场景的信息，场景的数量为至少一个。其中，若该至少一个场景是按照场景的创建时间排列的，该预设的场景可以是第一个场景，也可以是最后一个场景；若该至少一个场景是按照场景的优先级别排序的，可以将优先级别最高的场景作为该预设的场景；若该至少一个场景是按照场景中的视频数量从少到多来进行排序的，可以将排序第一的场景确定为预设的场景；若该至少一个场景是按照历史播放量从高到低来进行排序的，可以将排序第一的场景确定为预设的场景。应当指出，确定预设场景的方式，除了列举的方式外，还可以有其他确定预设的场景的方式。

在一种可能的实现方式中，在显示该待显示场景时，该方法还包括：

响应于携带新的待显示场景的触发操作，通过持久化组件缓存新的待显示场景。

具体而言，当前显示屏的页面上显示有场景的浏览控件，通过该浏览控件可以浏览从服务端接收到的至少一个场景，并针对用户对其中任一场景的触发操作，将该任一场景确定为新的待显示场景，并替换当前显示的场景在当前显示屏上进行显示。同时，通过持久化组件缓存该新的待显示场景。该缓存的待显示场景可以上述缓存的历史场景。

在一个示例中，该客户端为浏览器，该持久化组件可以是LocalStorage，即局部存储器。由于LocalStorage提供的存储功能为持久化存储，如果不通过主动清空的方式清空数据，所保存的数据会永久保留，而且使保存的数据超出浏览器所规定的大小也不会清空，而只是会报错。

本申请实施例还提供了一种可能的实现方式，该待显示场景的配置过程具体可以包括：

根据输入的最大布局模式配置待显示场景的布局信息，最大布局模式用于确定待显示场景的至少一种布局模式，每个布局模式包括视频框在显示屏的视频区域中的排列方式，边距信息；根据输入的多个视频的信息配置待显示场景的视频信息，每个视频的信息包括播放地址、分辨率和播放顺序。

具体而言，该输入的最大布局模式表示单个页面中横向排列的视频框和纵向排列的视频框的最大数值，通过该最大布局模式配置待显示场景的布局信息，就可以确定待显示场景的至少一种布局模式。

在一个示例中，若最大布局模式为3(行)x3(列)(表示视频框的排列方式为3行和3列，下面的描述相同)，该至少一种布局模式所有的排列方式可以包括：2x3、3x2、1x3、3x1、2x2、1x2、2x1、1x1。

在一个示例中，该终端可以为PC端和移动终端。由于PC端的显示屏的尺寸比较大，因此以上所有的布局模式的排列方式都适用于PC端。移动端的显示屏的尺寸较小，2x2、1x2、2x1、1x1适用于移动终端的布局，该移动端可以为手机，也可以为平板。

其中，还可以通过输入视频名称，视频描述等信息等作为视频的信息。该待显示场景配置有多个角度的摄像装置，每个视频的信息对应一个摄像装置。其中，该播放地址可以是摄像装置的对接信息，例如该摄像装置的唯一标识；该分辨率可以是摄像装置的拍摄视频时的分辨率。在上述布局模式中，以从左至右和从上至下的方式为每个视频框设置一个从前到后的顺序，在视频框中放置视频时，可以视频框的顺序和视频框的播放顺序进行匹配，来确定每个视频框的播放信息。

在一个示例中，场景可以为室内火情监控场景、办公室吸烟识别场景、工地安全帽识别场景、老人摔倒识别场景等。针对于室内火情监控的场景，可以在室内的各个角度安装摄像头，该摄像头对应与一个视频的信息。

其中，边距信息包括视频区域与当前页面的边距；边距信息还包括每个视频框之间的间距。具体地，该边距包括上/下/左/右边距，该间距包括横向排列的两个视频框之间的横向间距，以及纵向排列的两个视频框之间的纵向间距。

其中，针对列数相同的布局模式，边距信息中的边距和间距相同，这样可以保证列数相同布局模式所计算出的视频框的尺寸相同。例如，针对排列方式为3x3、2x3、1x3的布局模式，每种布局模式的边距和间距相同。

在一种可能的实现方式中，在配置完待显示场景的信息之后，还可以将待显示场景的信息发送至服务端，以进行保存。

本申请实施例还提供了一种可能的实现方式，根据显示屏的尺寸从布局信息中确定目标布局模式，并根据目标布局模式确定显示屏中的视频框的尺寸，具体可以包括Sa1和Sa2(图中未示出)所示的情况：

Sa1，从至少一种布局模式中确定出与显示屏的尺寸相适配的布局模式，并从相适配的布局模式中确定目标布局模式，目标布局模式包括视频框在视频区域中的排列方式。

具体而言，在确定待显示场景之后，获取当前终端的类型，并根据该终端的类型筛选出相适配的布局模式。接上述示例，排列方式3x3、2x3、1x3、3x2、3x1、2x2、1x2、2x1、1x1的布局模式为与PC端相适配的布局模式，排列方式为2x2、1x2、2x1、1x1的布局模式为与移动终端相适配的布局模式。

具体而言，从相适配的布局模式中确定目标布局模式的方式可以为用户主动设置，也可以是客户端通过预设方式选择。具体地，在显示屏的页面中提供浏览该至少一个布局模式的指定区域，以便于用户选择符合需求的布局模式以作为目标布局模式。或者，根据视频信息中的视频的总数来确定布局模式，确定每个相适配的布局模式中单个页面的视频框总数，若视频的总数大于视频框的总数，采用最大的视频框的总数对应的布局模式作为目标布局模式，若视频的总数小于视频框的总数，将与视频的总数相近或者相等的视频框的总数所对应的布局模式确定为目标布局模式。例如，当前终端为PC端，若当前视频的总数为3，则可以选择排列方式为1x3布局模式，若当前视频的总数为12，则可以选择排列方式为3x3的布局模式。

Sa2，根据边距和当前页面的尺寸确定视频区域的尺寸，并根据排列方式、间距确定视频框的尺寸。

具体而言，根据视频区域与当前页面的左边距和右边距，以及当前页面的宽度，确定出视频区域的宽度。根据视频区域与显示屏的上边距和下边距，以及当前页面的高度，确定出视频区域的高度。在确定出视频区域的尺寸之后。根据排列方式、间距确定视频框的尺寸的方式包括两种。先根据排列方式中的列数确定横向间距的总长度，以及纵向间距的总长度，视频框的宽度＝(视频区域的宽度-横向间距的总长度)/总列数，视频框的高度＝(视频区域的高度-纵向间距的总长度)/总行数，最后根据该公式计算出视频框的高度和宽度。

在一个示例中，若视频区域的尺寸为50(宽度)x 26(高度)，单个横向间距和单个纵向间距都为1，若采用排列方式为3x3的布局模式，3x3的排列方式所对应的视频框的尺寸(宽度、高度)为16、9，。

示例性地参加图2，本申请实施例还提供了一种视频框的计算过程的结构图。如图2所示，视频区域与显示器的上/下/左/右边距分别为offset_t、offset_b、offset_l、offset_r，视频区域的尺寸由宽card1_w和高card1_h确定，视频框的尺寸由宽card2_w、和高card2_h确定，视频框之间横向间距和纵向间距分别为padding_hor、padding_vert，页面的尺寸由宽inner_w、和高inner_h确定。图2展示的是排列方式为2x2的布局模式，确定视频框的尺寸的公式可以为：

card1_w＝inner_w-offset_l-offset_r；

card1_h＝inner_h-offset_t-offset_b；

card2_w＝(card1_w-padding_hor*(列数-1))；

card_h＝(card1_h-padding_vert*(行数-1))。

应当指出，本申请实施例中任一宽度、长度、间距等数据采用的计量单位是统一的，并可以理解为一个基本单位。

由于存在不同的摄像装置所采集的视频数据存在分辨率不同的情况，而由于分辨率的不同，在视频框中播放视频时，可能会出现因填充满视频框的高度或者宽度，从而溢出整个视频框的高度，也可能在横向拉伸或者纵向拉伸，而导致播放的画面出现变形。

为了解决上述技术问题，本申请实施例还提供了一种可能的实现方式，在根据视频信息在确定的视频框中播放视频时，该方法还包括：

依次针对每个视频框及相应的视频进行以下操作：

比较第一比值和第二比值的大小，第一比值为该视频的分辨率的宽度与高度之比，第二比值为该视频框的宽度与高度之比；若第一比值较大，对该视频进行宽度填充；若第一比值较小，对该视频进行高度填充。

示例性地参见图2，第二比值为2:1。纵向第一列的第一个视频框中的视频的分辨率的宽度和高度之比为1.6:1(对应第一比值)，显然第一比值较小，需对视频进行高度填充；纵向的第一列的第二个视频框中的视频的分辨率的宽度和高度之比为2.7:1(对应第一比值)，显然第一比值较大，需对视频采取宽度填充。

若当前页面需要播放的视频数量超过一定阈值时，视频的获取过程可能会出现网络不畅的情况，因此，为了缓解这种状况，本申请实施例还提供了一种可能的实现方式，在根据视频信息在确定的视频框中播放视频时，方法还包括：

若视频信息中的视频的总数大于预设阈值，通过HTTP/2协议基于总数发起视频获取请求，以获取相应数量的视频。

在一个示例中，针对于排列方式为2x3或者3x3的布局模式，当前页面中可播放的视频可以有6～9个，相应地，可以设置预设阈值为6，即当视频的个数为6个时，可以通过HTTP/2协议发送视频获取请求，该请求中包括6个视频连接。

参见图3，本申请实施例提供了一种多端支持的视频布局装置的结构示意图。该装置300可以包括：第一确定模块310、第二确定模块320、播放模块330。

第一确定模块310，用于确定待显示场景，待显示场景配置有布局信息和视频信息。

第二确定模块320，用于根据显示屏的尺寸从布局信息中确定目标布局模式，并根据目标布局模式确定当前页面中的视频框的尺寸。

播放模块330，用于根据视频信息在确定的视频框中播放视频。

在一种可能的实现方式中，第一确定模块310在确定待显示场景中，具体用于：

若确定有缓存的历史场景，将历史场景确定为待显示场景；若确定没有缓存的历史场景，将从服务端获取的多个场景中的预设的场景确定为待显示场景。

在一种可能的实现方式中，该装置300还包括交互模块340，处理模块340具体用于：

响应于携带新的待显示场景的触发操作，通过持久化组件缓存新的待显示场景。

在一种可能的实现方式中，交互模块340在待显示场景的配置过程中，具体用于：

根据输入的最大布局模式配置待显示场景的布局信息，最大布局模式用于确定待显示场景的至少一种布局模式，每个布局模式包括视频框在显示屏的视频区域中的排列方式，边距信息；根据输入的多个视频的信息配置待显示场景的视频信息，每个视频的信息包括播放地址、分辨率和播放顺序。

在一种可能的实现方式中，边距信息包括视频区域与显示屏的边距；边距信息还包括每个视频框之间的间距；第二确定模块320在根据显示屏的尺寸从布局信息中确定目标布局模式，并根据目标布局模式确定当前页面中的视频框的尺寸中，具体用于：

从至少一种布局模式中确定出与显示屏的尺寸相适配的布局模式，并从相适配的布局模式中确定目标布局模式，目标布局模式包括视频框在视频区域中的排列方式；根据边距和当前页面的尺寸确定视频区域的尺寸，并根据排列方式、间距确定视频框的尺寸。

在一种可能的实现方式中，播放模块330在根据视频信息在确定的视频框中播放视频时，还可以用于：

依次针对每个视频框及相应的视频进行以下操作：

比较第一比值和第二比值的大小，第一比值为该视频的分辨率的宽度与高度之比，第二比值为该视频框的宽度与高度之比；若第一比值较大，对该视频进行宽度填充；若第一比值较小，对该视频进行高度填充。

在一种可能的实现方式中，播放模块330在根据视频信息在确定的视频框中播放视频时，还可以用于：

若视频信息中的视频的总数大于预设阈值，通过HTTP/2协议基于总数发起视频获取请求，以获取相应数量的视频。

本申请实施例的装置可执行本申请实施例所提供的方法，其实现原理相类似，本申请各实施例的装置中的各模块所执行的动作是与本申请各实施例的方法中的步骤相对应的，对于装置的各模块的详细功能描述具体可以参见前文中所示的对应方法中的描述，此处不再赘述。

本申请实施例中提供了一种电子设备，包括存储器、处理器及存储在存储器上的计算机程序，该处理器执行上述计算机程序以实现一种多端支持的视频布局方法的步骤，与相关技术相比可实现：该方法确定视频框尺寸的方式确保随着终端显示屏配置的不同，在提供的布局信息的范围内对视频框的尺寸进行适应调整，从而保证待显示场景在不同终端下的播放效果可以适配用户在相应终端的观看习惯。

在一个可选实施例中提供了一种电子设备，如图4所示，图4所示的电子设备4000包括：处理器4001和存储器4003。其中，处理器4001和存储器4003相连，如通过总线4002相连。可选地，电子设备4000还可以包括收发器4004，收发器4004可以用于该电子设备与其他电子设备之间的数据交互，如数据的发送和/或数据的接收等。需要说明的是，实际应用中收发器4004不限于一个，该电子设备4000的结构并不构成对本申请实施例的限定。

处理器4001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC(Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器4001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线4002可包括一通路，在上述组件之间传送信息。总线4002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线4002可以分为地址总线、数据总线、控制总线等。为便于表示，图4中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器4003可以是ROM(Read Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(Random Access Memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质、其他磁存储设备、或者能够用于携带或存储计算机程序并能够由计算机读取的任何其他介质，在此不做限定。

存储器4003用于存储执行本申请实施例的计算机程序，并由处理器4001来控制执行。处理器4001用于执行存储器4003中存储的计算机程序，以实现前述方法实施例所示的步骤。

其中，电子设备包括但不限于：移动终端，PC终端，个人电脑。

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时可实现前述方法实施例的步骤及相应内容。

本申请实施例还提供了一种计算机程序产品，包括计算机程序，计算机程序被处理器执行时可实现前述方法实施例的步骤及相应内容。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”、“1”、“2”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除图示或文字描述以外的顺序实施。

应该理解的是，虽然本申请实施例的流程图中通过箭头指示各个操作步骤，但是这些步骤的实施顺序并不受限于箭头所指示的顺序。除非本文中有明确的说明，否则在本申请实施例的一些实施场景中，各流程图中的实施步骤可以按照需求以其他的顺序执行。此外，各流程图中的部分或全部步骤基于实际的实施场景，可以包括多个子步骤或者多个阶段。这些子步骤或者阶段中的部分或全部可以在同一时刻被执行，这些子步骤或者阶段中的每个子步骤或者阶段也可以分别在不同的时刻被执行。在执行时刻不同的场景下，这些子步骤或者阶段的执行顺序可以根据需求灵活配置，本申请实施例对此不限制。

以上所述仅是本申请部分实施场景的可选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请的方案技术构思的前提下，采用基于本申请技术思想的其他类似实施手段，同样属于本申请实施例的保护范畴。

Claims (11)

1.一种多端支持的视频布局方法，其特征在于，所述方法包括：

确定待显示场景，所述待显示场景配置有布局信息和视频信息；

根据显示屏的尺寸从所述布局信息中确定目标布局模式，并根据所述目标布局模式确定当前页面中的视频框的尺寸；

根据所述视频信息在所述视频框中播放视频。

2.根据权利要求1所述的方法，其特征在于，所述确定待显示场景，包括：

若确定有缓存的历史场景，将所述历史场景确定为所述待显示场景；

若确定没有缓存的历史场景，将从服务端获取的多个场景中的预设的场景确定为所述待显示场景。

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

响应于携带新的待显示场景的触发操作，通过持久化组件缓存所述新的待显示场景。

4.根据权利要求1-3任一项所述的方法，其特征在于，所述待显示场景的配置过程包括：

根据输入的最大布局模式配置所述待显示场景的布局信息，所述最大布局模式用于确定所述待显示场景的至少一种布局模式，每个布局模式包括所述视频框在显示屏的视频区域中的排列方式，边距信息；

根据输入的多个视频的信息配置所述待显示场景的视频信息，每个视频的信息包括播放地址、分辨率和播放顺序。

5.根据权利要求4所述的方法，其特征在于，所述边距信息包括视频区域与所述显示屏的边距；所述边距信息还包括每个视频框之间的间距；所述根据显示屏的尺寸从所述布局信息中确定目标布局模式，并根据所述目标布局模式确定当前页面中的视频框的尺寸，包括：

从所述至少一种布局模式中确定出与所述显示屏的尺寸相适配的布局模式，并从所述相适配的布局模式中确定所述目标布局模式，所述目标布局模式包括所述视频框在所述视频区域中的排列方式；

根据所述边距和所述当前页面的尺寸确定所述视频区域的尺寸，并根据所述排列方式、所述间距确定所述视频框的尺寸。

6.根据权利要求4所述的方法，其特征在于，在根据所述视频信息在确定的视频框中播放视频时，所述方法包括：

依次针对每个视频框及相应的视频进行以下操作：

比较第一比值和第二比值的大小，所述第一比值为该视频的分辨率的宽度与高度之比，所述第二比值为该视频框的宽度与高度之比；

若所述第一比值较大，对该视频进行宽度填充；

若所述第一比值较小，对该视频进行高度填充。

7.根据权利要求1所述的方法，其特征在于，在根据所述视频信息在确定的视频框中播放视频时，所述方法还包括：

若所述视频信息中的视频的总数大于预设阈值，通过HTTP/2协议基于所述总数发起视频获取请求，以获取相应数量的视频。

8.一种多端支持的视频布局装置，其特征在于，所述装置包括：

第一确定模块，用于确定待显示场景，所述待显示场景配置有布局信息和视频信息；

第二确定模块，用于根据显示屏的尺寸从所述布局信息中确定目标布局模式，并根据所述目标布局模式确定当前页面中的视频框的尺寸；

播放模块，用于根据所述视频信息在确定的视频框中播放视频。

9.一种电子设备，包括存储器、处理器及存储在存储器上的计算机程序，其特征在于，所述处理器执行所述计算机程序以实现权利要求1-7任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-7任一项所述方法的步骤。

11.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-7任一项所述方法的步骤。

Images