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

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

Multi terminal supported video layout methods, devices, equipment, media and program products

【技术实现步骤摘要】
多端支持的视频布局方法、装置、设备、介质及程序产品


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

技术介绍

[0002]目前,前端页面的显示方法中所采用的布局方式主要有两类:自适应布局和响应式布局。其中,采用自适应布局的显示方法在遇到页面修改问题时,所需修改的工作量较大;采用响应式布局的显示方法在实现复杂结构的页面时存在难度。因此,在前端页面的显示方法应用于多视频显示的场景时,通常是在单一场景下以一种不可配置的固定数量的方式进行显示。
[0003]然而,按固定数量的方式来显示只适用于固定的视频数量,且终端的屏幕分辨率确定的情况。由于在视频播放时是以固定分辨率来播放,视频在前端的显示无法同时适配不同的终端,如无法同时适配PC端与移动端。

技术实现思路

[0004]本申请实施例所示的方案旨在能解决上述问题之一。
[0005]根据本申请实施例的一个方面,提供了一种多端支持的视频布局的方法,该方法包括:
[0006]确定待显示场景,待显示场景配置有布局信息和视频信息;根据显示屏的尺寸从布局信息中确定目标布局模式,并根据目标布局模式确定当前页面中的视频框的尺寸;根据视频信息在视频框中播放视频。
[0007]在一种可能的实现方式中,确定待显示场景,具体可以包括:
[0008]若确定有缓存的历史场景,将历史场景确定为待显示场景;若确定没有缓存的历史场景,将从服务端获取的多个场景中的预设的场景确定为待显示场景。
[0009]在另一种可能的实现方式中,该方法还包括:
[0010]响应于携带新的待显示场景的触发操作,通过持久化组件缓存新的待显示场景。
[0011]在又一种可能的实现方式中,待显示场景的配置过程包括:
[0012]根据输入的最大布局模式配置待显示场景的布局信息,最大布局模式用于确定待显示场景的至少一种布局模式,每个布局模式包括视频框在显示屏的视频区域中的排列方式,边距信息;根据输入的多个视频的信息配置待显示场景的视频信息,每个视频的信息包括播放地址、分辨率和播放顺序。
[0013]在又一种可能的实现方式中,边距信息包括视频区域与显示屏的边距;边距信息还包括每个视频框之间的间距;根据显示屏的尺寸从布局信息中确定目标布局模式,并根据目标布局模式确定当前页面中的视频框的尺寸,具体可以包括:
[0014]从至少一种布局模式中确定出与显示屏的尺寸相适配的布局模式,并从相适配的布局模式中确定目标布局模式,目标布局模式包括视频框在视频区域中的排列方式;根据
边距和当前页面的尺寸确定视频区域的尺寸,并根据排列方式、间距确定视频框的尺寸。
[0015]在又一种可能的实现方式中,在根据视频信息在确定的视频框中播放视频时,该方法包括:
[0016]依次针对每个视频框及相应的视频进行以下操作:
[0017]比较第一比值和第二比值的大小,第一比值为该视频的分辨率的宽度与高度之比,第二比值为该视频框的宽度与高度之比;若第一比值较大,对该视频进行宽度填充;若第一比值较小,对该视频进行高度填充。
[0018]在又一种可能的实现方式中,在根据视频信息在确定的视频框中播放视频时,该方法还包括:
[0019]若视频信息中的视频的总数大于预设阈值,通过HTTP/2协议基于总数发起视频获取请求,以获取相应数量的视频。
[0020]根据本申请实施例的另一个方面,提供了一种多端支持的视频布局装置,该装置包括:
[0021]第一确定模块,用于确定待显示场景,待显示场景配置有布局信息和视频信息;第二确定模块,用于根据显示屏的尺寸从布局信息中确定目标布局模式,并根据目标布局模式确定当前页面中的视频框的尺寸;播放模块,用于根据视频信息在确定的视频框中播放视频。
[0022]根据本申请实施例的另一个方面,提供了一种电子设备,该电子设备包括:存储器、处理器及存储在存储器上的计算机程序,处理器执行计算机程序以实现前述一种多端支持的视频布局方法的步骤。
[0023]根据本申请实施例的再一个方面,提供了一种计算机可读存储介质,其上存储有计算机程序,计算机程序被处理器执行时实现前述一种多端支持的视频布局方法的步骤。
[0024]根据本申请实施例的一个方面,提供了一种计算机程序产品,包括计算机程序,计算机程序被处理器执行时实现前述一种多端支持的视频布局方法的步骤。
[0025]本申请实施例提供的技术方案带来的有益效果是:
[0026]本申请实施例提供了一种多端支持的视频布局方法,该方法包括:在确定待显示场景之后,根据显示屏的尺寸从待显示场景的布局信息中确定目标布局模式,进而根据目标布局模式确定视频框的尺寸,最后,通过该视频框播放待显示场景相应的视频。由于不同的终端所配置的显示屏存在尺寸差异,而上述确定视频框尺寸的方式确保随着终端显示屏配置的不同,在提供的布局信息的范围内对视频框的尺寸进行适应调整,从而保证待显示场景在不同终端下的播放效果可以适配用户在相应终端上的观看习惯。
附图说明
[0027]为了更清楚地说明本申请实施例中的技术方案,下面将对本申请实施例描述中所需要使用的附图作简单地介绍。
[0028]图1为本申请实施例提供的一种多端支持的视频布局方法的流程示意图;
[0029]图2为本申请实施例提供的一种多端支持的视频布局方法的应用场景示意图;
[0030]图3为本申请实施例提供的一种多端支持的视频布局装置的结构示意图;
[0031]图4为本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
[0032]下面结合本申请中的附图描述本申请的实施例。应理解,下面结合附图所阐述的实施方式,是用于解释本申请实施例的技术方案的示例性描述,对本申请实施例的技术方案不构成限制。
[0033]本
技术人员可以理解,除非特意声明,这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是,本申请实施例所使用的术语“包括”以及“包含”是指相应特征可以实现为所呈现的特征、信息、数据、步骤、操作、元件和/或组件,但不排除实现为本
所支持其他特征、信息、数据、步骤、操作、元件、组件和/或它们的组合等。应该理解,当我们称一个元件被“连接”或“耦接”到另一元件时,该一个元件可以直接连接或耦接到另一元件,也可以指该一个元件和另一元件通过中间元件建立连接关系。此外,这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的术语“和/或”指示该术语所限定的项目中的至少一个,例如“A和/或B”可以实现为“A”,或者实现为“B”,或者实现为“A和B”。
[0034]为使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请实施方式作进一步地详细描述。
[0035]承接
技术介绍
,自适应布局需要开发多套页面,并根本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种多端支持的视频布局方法,其特征在于,所述方法包括:确定待显示场景,所述待显示场景配置有布局信息和视频信息;根据显示屏的尺寸从所述布局信息中确定目标布局模式,并根据所述目标布局模式确定当前页面中的视频框的尺寸;根据所述视频信息在所述视频框中播放视频。2.根据权利要求1所述的方法,其特征在于,所述确定待显示场景,包括:若确定有缓存的历史场景,将所述历史场景确定为所述待显示场景;若确定没有缓存的历史场景,将从服务端获取的多个场景中的预设的场景确定为所述待显示场景。3.根据权利要求1所述的方法,其特征在于,所述方法还包括:响应于携带新的待显示场景的触发操作,通过持久化组件缓存所述新的待显示场景。4.根据权利要求1

3任一项所述的方法,其特征在于,所述待显示场景的配置过程包括:根据输入的最大布局模式配置所述待显示场景的布局信息,所述最大布局模式用于确定所述待显示场景的至少一种布局模式,每个布局模式包括所述视频框在显示屏的视频区域中的排列方式,边距信息;根据输入的多个视频的信息配置所述待显示场景的视频信息,每个视频的信息包括播放地址、分辨率和播放顺序。5.根据权利要求4所述的方法,其特征在于,所述边距信息包括视频区域与所述显示屏的边距;所述边距信息还包括每个视频框之间的间距;所述根据显示屏的尺寸从所述布局信息中确定目标布局模式,并根据所述目标布局模式确定当前页面中的视频框的尺寸,包括:从所述至少一种布局模式中确定出与所述显示屏的尺寸相适配的布局模式,并从所述相适配的布局模式中确定所述目标布局模式,所述目标布局模式包括所述视频框在所述视频区域中的排列方式;根据所述边距和所述当前页面的尺寸确定所述视频区...

【专利技术属性】
技术研发人员:胡景松陈凯
申请(专利权)人:亚信科技中国有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1