CN108419116B - 一种竖版视频与滚动区联动的方法 - Google Patents

Abstract

本发明涉及一种竖版视频与滚动区联动的方法，包括如下步骤：创建视频展示小窗VideoBox，在其下方创建滚动内容区scrollView，如滚动内容区根据滑动事件需下移，在滚动内容区和视频展示小窗间形成露出区域，此种情况出现时，通过视频扩展适配算法激活代理Delegate模式，进行添加代理对象addMultiDelegate操作，在代理方法中完成以下处理：监听偏移量scrollView.contentOffset.y，判断其是否大于0，条件不成立，则判定为向下滚动，转相应处理，条件成立，则判定为向上滚动，转相应处理。本发明，针对竖版视频在小窗中展现，其下方内容展示区需要滚动显示内容的情况进行优化，算法简洁，滚动无卡顿，易于后期维护，用户体验好。

Description

一种竖版视频与滚动区联动的方法

技术领域

本发明涉及视频播放技术领域，具体说是一种竖版视频与滚动区联动的方法。

背景技术

用手机看视频时，一般而言，“横屏观看”已成为一个基本的共识。过去几年，人们都是竖着拿手机，但是每到看视频时，一定又会把屏幕横过来，16:9被认为是最符合用户观看习惯的铁律，这是经过科学计算的人眼最舒服的数据。

然而，随着短视频在社交平台的流行，“用竖屏看”的用户与日俱增。不管你多么想要去否定它，或者就是无法适应它，但竖视频的的确确已经成为一种潮流。

无论是用户的体验反馈，还是广告主的投放倾向，诸多数据都指向了：短视频就该竖着看。

2017年以来，75%的短视频在移动端播放，而52%的手机用户习惯把屏幕方向锁定，微信朋友圈一年内竖屏广告投放比例增加了46%。在当前的用户行为、技术和市场下，“竖屏、57秒”的短视频可能是短视频行业的工业标准。

Snapchat和Facebook等社交巨头，率先开启竖视频风潮，并且这种模式正渗透到整个移动应用的生态系统中，包括新闻、游戏、直播等领域。到现在，好像在任何地方都可以看到竖视频，这种势头还在蔓延。

当用户通过移动设备浏览社交媒体、直播以及短视频平台时，没有多少人会耐心把他们的手机旋转90度，点击展开到全屏。

目前，大多数移动端APP都是采用竖式信息流的方式呈现布局，用户只需上下滑动手指即可，竖视频糅合在信息流中，能给用户更流畅的阅读体验。比起横视频，垂直化的竖视频，能带来更沉浸式的观看感受，并通过重塑叙事方式来打动受众，不仅能更加突显视频人物，还能拉近与观众之间的距离，给人一种亲密感。

当竖版视频在小窗中展现时，其下方可以根据需要设置内容展示区，将与视频相关的图文信息呈现给用户，但是，内容展示区如果要滚动显示内容，则影响在小窗中展现的竖版视频的播放，需要对此情况进行优化，以提高用户体验。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种竖版视频与滚动区联动的方法，针对竖版视频在小窗中展现，其下方内容展示区需要滚动显示内容的情况进行优化，算法简洁，滚动无卡顿，易于后期维护，用户体验好。

为达到以上目的，本发明采取的技术方案是：

一种竖版视频与滚动区联动的方法，其特征在于，包括如下步骤：

创建视频展示小窗VideoBox，

在视频展示小窗VideoBox下方，创建滚动内容区scrollView，

在视频展示小窗VideoBox中加载视频，所述视频尤指竖版视频，

当针对滚动内容区scrollView的滑动事件被触发时，

如滚动内容区scrollView根据滑动事件需下移，在滚动内容区scrollView和视频展示小窗VideoBox间形成scrollView露出区域，

此种情况出现时，通过视频扩展适配算法VideoExpandAdapter激活代理Delegate模式，Delegate模式亦称为委托模式，

进行添加代理对象addMultiDelegate操作，产生一个代理对象delegate，

代理对象delegate在iOS系统提供的scrollViewDidScroll: 代理方法中完成以下处理：

监听偏移量scrollView.contentOffset.y，判断其是否大于0，

条件不成立，则判定为向下滚动，转相应处理，

条件成立，则判定为向上滚动，转相应处理。

在上述技术方案的基础上，在视图层级上，滚动内容区scrollView需要在视频展示小窗VideoBox下方,

并且设置滚动内容区scrollView的clipsTobounds属性为假，即：

scrollview.clipsToBounds=NO，

clipsTobounds用于控制如果子视图的范围超出了父视图的边界，那么超出的部分就会被裁剪掉。

在上述技术方案的基础上，当条件不成立时，具体处理包括：

设置VideoBox高度到最大高度，

恢复scrollView上部响应区为0。

在上述技术方案的基础上，当条件成立时，具体处理包括：

进一步判断调整高度是否超过最大高度，

当未超过时，则scrollView上部露出的区域可以点击，此时：

减小VideoBox高度，增加scrollView上部响应区。

本发明所述的竖版视频与滚动区联动的方法，针对竖版视频在小窗中展现，其下方内容展示区需要滚动显示内容的情况进行优化，算法简洁，滚动无卡顿，易于后期维护，用户体验好。

附图说明

本发明有如下附图：

图1本发明的流程图。

具体实施方式

以下结合附图对本发明作进一步详细说明。

如图1所示，本发明所述的竖版视频与滚动区联动的方法，包括如下步骤：

创建视频展示小窗VideoBox，

在视频展示小窗VideoBox下方，创建滚动内容区scrollView，

在视频展示小窗VideoBox中加载视频，所述视频尤指竖版视频，

当针对滚动内容区scrollView的滑动事件被触发时，

如滚动内容区scrollView根据滑动事件需下移，在滚动内容区scrollView和视频展示小窗VideoBox间形成scrollView露出区域，

此种情况出现时，通过视频扩展适配算法VideoExpandAdapter激活代理Delegate模式，Delegate模式亦称为委托模式，

进行添加代理对象addMultiDelegate操作，产生一个代理对象delegate，

代理对象delegate在iOS系统提供的scrollViewDidScroll: 代理方法中完成以下处理：

监听偏移量scrollView.contentOffset.y，判断其是否大于0，

条件不成立，则判定为向下滚动，转相应处理，

条件成立，则判定为向上滚动，转相应处理。

在上述技术方案的基础上，创建视频展示小窗VideoBox，其占1/2屏，

创建滚动内容区scrollView，其占1/2屏。

在上述技术方案的基础上，在视图层级上，滚动内容区scrollView需要在视频展示小窗VideoBox下方,

并且设置滚动内容区scrollView的clipsTobounds属性为假，即：

scrollview.clipsToBounds=NO，

clipsTobounds用于控制如果子视图的范围超出了父视图的边界，那么超出的部分就会被裁剪掉。

在上述技术方案的基础上，当条件不成立时，判定为向下滚动，具体处理包括：

设置VideoBox高度到最大高度，

恢复scrollView上部响应区为0。

通过上述方案，实现了竖版视频展示与滚动区联动。在滚动内容区scrollView滑动事件被触发时，视频展示小窗VideoBox可根据需要设置为最大，以供用户更多的看到视频展示小窗VideoBox中的信息。

在上述技术方案的基础上，当条件成立时，判定为向上滚动，具体处理包括：

进一步判断调整高度是否超过最大高度，

当未超过时，则scrollView上部露出的区域可以点击，此时：

减小VideoBox高度，增加scrollView上部响应区。

如果超过，则判定滑动事件无效，不进行处理，保持原滚动内容区scrollView不变。

通过上述方案，实现了竖版视频展示与滚动区联动。在滚动内容区scrollView滑动事件被触发时，视频展示小窗VideoBox可根据需要减小高度，以供用户更多的看到滚动内容区scrollView中的信息。

在上述技术方案的基础上，默认响应滚动内容区scrollView滑动事件时，视频展示小窗VideoBox和滚动内容区scrollView的屏占比关系如下：

最大时，视频展示小窗VideoBox占全屏，滚动内容区scrollView缩小为一边条位于屏幕底端，

最小时，视频展示小窗VideoBox占1/3屏，滚动内容区scrollView占2/3屏，

中间档位时，视频展示小窗VideoBox占2/3屏，滚动内容区scrollView占1/3屏。

本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims (2)

1.一种竖版视频与滚动区联动的方法，其特征在于，包括如下步骤：

创建视频展示小窗VideoBox，其占1/2屏，

在视频展示小窗VideoBox下方，创建滚动内容区scrollView，其占1/2屏，

在视频展示小窗VideoBox中加载视频，所述视频尤指竖版视频，

当针对滚动内容区scrollView的滑动事件被触发时，

如滚动内容区scrollView根据滑动事件需下移，在滚动内容区scrollView和视频展示小窗VideoBox间形成scrollView露出区域，

此种情况出现时，通过视频扩展适配算法VideoExpandAdapter激活代理Delegate模式，Delegate模式亦称为委托模式，

进行添加代理对象addMultiDelegate操作，产生一个代理对象delegate，

代理对象delegate在iOS系统提供的scrollViewDidScroll:代理方法中完成以下处理：

监听偏移量scrollView.contentOffset.y，判断其是否大于0，

条件不成立，则判定为向下滚动，具体处理包括：

设置VideoBox高度到最大高度，

恢复scrollView上部响应区为0；

条件成立，则判定为向上滚动，

具体处理包括：

进一步判断调整高度是否超过最大高度，

当未超过时，则scrollView上部露出的区域可以点击，此时：

减小VideoBox高度，增加scrollView上部响应区；

默认响应滚动内容区scrollView滑动事件时，视频展示小窗VideoBox和滚动内容区scrollView的屏占比关系如下：

最大时，视频展示小窗VideoBox占全屏，滚动内容区scrollView缩小为一边条位于屏幕底端，

最小时，视频展示小窗VideoBox占1/3屏，滚动内容区scrollView占2/3屏，

中间档位时，视频展示小窗VideoBox占2/3屏，滚动内容区scrollView占1/3屏。

2.如权利要求1所述的竖版视频与滚动区联动的方法，其特征在于：在视图层级上，滚动内容区scrollView需要在视频展示小窗VideoBox下方,

并且设置滚动内容区scrollView的clipsTobounds属性为假，即：

scrollview.clipsToBounds＝NO，

clipsTobounds用于控制如果子视图的范围超出了父视图的边界，那么超出的部分就会被裁剪掉。

Images