CN108616770B - 一种竖版视频与滚动区联动方法 - Google Patents
一种竖版视频与滚动区联动方法 Download PDFInfo
- Publication number
- CN108616770B CN108616770B CN201810336485.XA CN201810336485A CN108616770B CN 108616770 B CN108616770 B CN 108616770B CN 201810336485 A CN201810336485 A CN 201810336485A CN 108616770 B CN108616770 B CN 108616770B
- Authority
- CN
- China
- Prior art keywords
- area
- video
- videobox
- scrolling
- rolling
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
- H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
- H04N21/4314—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations for fitting data in a restricted space on the screen, e.g. EPG data in a rectangular grid
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
- H04N21/4318—Generation of visual interfaces for content selection or interaction; Content or additional data rendering by altering the content in the rendering process, e.g. blanking, blurring or masking an image region
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- User Interface Of Digital Computer (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
本发明涉及一种竖版视频与滚动区联动方法，步骤如下：创建视频展示小窗VideoBox，创建滚动内容区，创建隐藏区域，当针对滚动内容区的滑动事件被触发时，如滚动内容区根据滑动事件需下移，在滚动内容区和视频展示小窗VideoBox间露出隐藏区域，设定隐藏区域的显示尺寸为VideoBox的最大高度和最小高度的差值，通过代理对象完成以下处理：计算实际偏移量relativeOffset，判断是否大于0，条件不成立，则判定为向下滚动，否则判定为向上滚动。本发明，针对竖版视频在小窗中展现，其下方内容展示区需要滚动显示内容的情况进行优化，算法简洁，滚动无卡顿，易于后期维护，用户体验好。
Description
技术领域
本发明涉及视频播放技术领域，具体说是一种竖版视频与滚动区联动方法。
背景技术
用手机看视频时，一般而言，“横屏观看”已成为一个基本的共识。过去几年，人们都是竖着拿手机，但是每到看视频时，一定又会把屏幕横过来，16:9被认为是最符合用户观看习惯的铁律，这是经过科学计算的人眼最舒服的数据。
然而，随着短视频在社交平台的流行，“用竖屏看”的用户与日俱增。不管你多么想要去否定它，或者就是无法适应它，但竖视频的的确确已经成为一种潮流。
无论是用户的体验反馈，还是广告主的投放倾向，诸多数据都指向了：短视频就该竖着看。
2017年以来，75%的短视频在移动端播放，而52%的手机用户习惯把屏幕方向锁定，微信朋友圈一年内竖屏广告投放比例增加了46%。在当前的用户行为、技术和市场下，“竖屏、57秒”的短视频可能是短视频行业的工业标准。
Snapchat和Facebook等社交巨头，率先开启竖视频风潮，并且这种模式正渗透到整个移动应用的生态系统中，包括新闻、游戏、直播等领域。到现在，好像在任何地方都可以看到竖视频，这种势头还在蔓延。
当用户通过移动设备浏览社交媒体、直播以及短视频平台时，没有多少人会耐心把他们的手机旋转90度，点击展开到全屏。
目前，大多数移动端APP都是采用竖式信息流的方式呈现布局，用户只需上下滑动手指即可，竖视频糅合在信息流中，能给用户更流畅的阅读体验。比起横视频，垂直化的竖视频，能带来更沉浸式的观看感受，并通过重塑叙事方式来打动受众，不仅能更加突显视频人物，还能拉近与观众之间的距离，给人一种亲密感。
当竖版视频在小窗中展现时，其下方可以根据需要设置内容展示区，将与视频相关的图文信息呈现给用户，但是，内容展示区如果要滚动显示内容，则影响在小窗中展现的竖版视频的播放，需要对此情况进行优化，以提高用户体验。
发明内容
针对现有技术中存在的缺陷，本发明的目的在于提供一种竖版视频与滚动区联动方法，针对竖版视频在小窗中展现，其下方内容展示区需要滚动显示内容的情况进行优化，算法简洁，滚动无卡顿，易于后期维护，用户体验好。
为达到以上目的，本发明采取的技术方案是：
一种竖版视频与滚动区联动方法，其特征在于，包括如下步骤：
创建视频展示小窗VideoBox，
在视频展示小窗VideoBox下方，基于滚动视图scrollView创建滚动内容区，
基于滚动视图scrollView创建隐藏区域，隐藏区域在视图层级上，位于Videobox下方，
在视频展示小窗VideoBox中加载视频，所述视频尤指竖版视频，
当针对滚动内容区的滑动事件被触发时，
如滚动内容区根据滑动事件需下移，在滚动内容区和视频展示小窗VideoBox间露出隐藏区域，
此种情况出现时，通过视频扩展适配算法VideoExpandAdapter激活代理Delegate模式，Delegate模式亦称为委托模式，
设定隐藏区域的显示尺寸expandSpacing为VideoBox的最大高度和最小高度的差值，
进行添加代理对象addMultiDelegate操作，产生一个代理对象delegate，
代理对象delegate在iOS系统提供的scrollViewDidScroll: 代理方法中完成以下处理：
计算实际偏移量relativeOffset，实际偏移量的值为contentOffset.y+expandSpacing，
判断实际偏移量是否大于0，
条件不成立，则判定为向下滚动，转相应处理，
条件成立，则判定为向上滚动，转相应处理。
在上述技术方案的基础上，创建视频展示小窗VideoBox，其占1/3屏，
创建滚动内容区，其占2/3屏，
创建隐藏区域，其占1/5屏。
在上述技术方案的基础上，在视图层级上，滚动内容区需要在视频展示小窗VideoBox下方,
并且设置滚动内容区的clipsTobounds属性为假，即：
scrollview.clipsToBounds=NO，
clipsTobounds用于控制如果子视图的范围超出了父视图的边界，那么超出的部分就会被裁剪掉。
在上述技术方案的基础上，当条件不成立时，判定为向下滚动，具体处理包括：
设置VideoBox高度到最大高度。
在上述技术方案的基础上，默认VideoBox将滚动内容区和隐藏区域全部遮挡。
在上述技术方案的基础上，当条件成立时，判定为向上滚动，具体处理包括：
进一步判断调整高度是否超过最大高度，
当未超过时，则：
减小VideoBox高度。
在上述技术方案的基础上，根据需要在隐藏区域设置交互控件，供用户进一步操作。
本发明所述的竖版视频与滚动区联动方法，针对竖版视频在小窗中展现，其下方内容展示区需要滚动显示内容的情况进行优化，算法简洁，滚动无卡顿，易于后期维护，用户体验好。
附图说明
本发明有如下附图：
图1本发明的流程图。
具体实施方式
以下结合附图对本发明作进一步详细说明。
如图1所示，本发明所述的竖版视频与滚动区联动方法，包括如下步骤：
创建视频展示小窗VideoBox，
在视频展示小窗VideoBox下方，基于滚动视图scrollView创建滚动内容区，
基于滚动视图scrollView创建隐藏区域，隐藏区域在视图层级上，位于Videobox下方，
在视频展示小窗VideoBox中加载视频，所述视频尤指竖版视频，
当针对滚动内容区的滑动事件被触发时，
如滚动内容区根据滑动事件需下移，在滚动内容区和视频展示小窗VideoBox间露出隐藏区域，
此种情况出现时，通过视频扩展适配算法VideoExpandAdapter激活代理Delegate模式，Delegate模式亦称为委托模式，
设定隐藏区域的显示尺寸expandSpacing为VideoBox的最大高度和最小高度的差值，
进行添加代理对象addMultiDelegate操作，产生一个代理对象delegate，
代理对象delegate在iOS系统提供的scrollViewDidScroll: 代理方法中完成以下处理：
计算实际偏移量relativeOffset，实际偏移量的值为contentOffset.y+expandSpacing，
判断实际偏移量是否大于0，
条件不成立，则判定为向下滚动，转相应处理，
条件成立，则判定为向上滚动，转相应处理。
在上述技术方案的基础上，创建视频展示小窗VideoBox，其占1/3屏，
创建滚动内容区，其占2/3屏，
创建隐藏区域，其占1/5屏。
在上述技术方案的基础上，在视图层级上，滚动内容区需要在视频展示小窗VideoBox下方,
并且设置滚动内容区的clipsTobounds属性为假，即：
scrollview.clipsToBounds=NO，
clipsTobounds用于控制如果子视图的范围超出了父视图的边界，那么超出的部分就会被裁剪掉。
在上述技术方案的基础上，当条件不成立时，判定为向下滚动，具体处理包括：
设置VideoBox高度到最大高度。
通过上述方案，实现了竖版视频展示与滚动区联动。在滚动内容区滑动事件被触发时，视频展示小窗VideoBox可根据需要设置为最大，以供用户更多的看到视频展示小窗VideoBox中的信息。此时，默认VideoBox将滚动内容区和隐藏区域全部遮挡。
在上述技术方案的基础上，当条件成立时，判定为向上滚动，具体处理包括：
进一步判断调整高度是否超过最大高度，
当未超过时，则：
减小VideoBox高度。
如果超过，则判定滑动事件无效，不进行处理，保持原滚动内容区不变。
通过上述方案，实现了竖版视频展示与滚动区联动。在滚动内容区滑动事件被触发时，视频展示小窗VideoBox可根据需要减小高度，以供用户更多的看到滚动内容区中的信息。此时，隐藏区域中的信息可见，亦可根据需要在隐藏区域设置交互控件，供用户进一步操作。
所述交互控件可以为与视频或音频相关的交互控件，也可以是其他类型的控件。
本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。
Claims (4)
1.一种竖版视频与滚动区联动方法，其特征在于，包括如下步骤：
创建视频展示小窗VideoBox，其占1/3屏，
在视频展示小窗VideoBox下方，基于滚动视图scrollView创建滚动内容区，其占2/3屏，
基于滚动视图scrollView创建隐藏区域，隐藏区域在视图层级上，位于Videobox下方，其占1/5屏；
在视频展示小窗VideoBox中加载视频，所述视频尤指竖版视频，
当针对滚动内容区的滑动事件被触发时，
如滚动内容区根据滑动事件需下移，在滚动内容区和视频展示小窗VideoBox间露出隐藏区域，
此种情况出现时，通过视频扩展适配算法VideoExpandAdapter激活代理Delegate模式，Delegate模式亦称为委托模式，
设定隐藏区域的显示尺寸expandSpacing为VideoBox的最大高度和最小高度的差值，
进行添加代理对象addMultiDelegate操作，产生一个代理对象delegate，
代理对象delegate在iOS系统提供的scrollViewDidScroll:代理方法中完成以下处理：
计算实际偏移量relativeOffset，实际偏移量的值为contentOffset.y+expandSpacing，
判断实际偏移量是否大于0，
条件不成立，则判定为向下滚动，具体处理包括：
设置VideoBox高度到最大高度；
条件成立，则判定为向上滚动，具体处理包括：
进一步判断调整高度是否超过最大高度，
当未超过时，则：
减小VideoBox高度。
2.如权利要求1所述的竖版视频与滚动区联动方法，其特征在于：在视图层级上，滚动内容区需要在视频展示小窗VideoBox下方,
并且设置滚动内容区的clipsTobounds属性为假，即：
scrollview.clipsToBounds＝NO，
clipsTobounds用于控制如果子视图的范围超出了父视图的边界，那么超出的部分就会被裁剪掉。
3.如权利要求1所述的竖版视频与滚动区联动方法，其特征在于：默认VideoBox将滚动内容区和隐藏区域全部遮挡。
4.如权利要求1所述的竖版视频与滚动区联动方法，其特征在于：根据需要在隐藏区域设置交互控件，供用户进一步操作。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810336485.XA CN108616770B (zh) | 2018-04-16 | 2018-04-16 | 一种竖版视频与滚动区联动方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810336485.XA CN108616770B (zh) | 2018-04-16 | 2018-04-16 | 一种竖版视频与滚动区联动方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108616770A CN108616770A (zh) | 2018-10-02 |
| CN108616770B true CN108616770B (zh) | 2021-02-09 |
Family
ID=63660211
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810336485.XA Active CN108616770B (zh) | 2018-04-16 | 2018-04-16 | 一种竖版视频与滚动区联动方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108616770B (zh) |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108694012B (zh) * | 2011-11-28 | 2022-04-22 | 联想(北京)有限公司 | 在屏幕上显示对象的方法和系统 |
| CN104331246A (zh) * | 2014-11-19 | 2015-02-04 | 广州三星通信技术研究有限公司 | 在终端中进行分屏显示的设备和方法 |
| KR102423184B1 (ko) * | 2015-05-29 | 2022-07-21 | 삼성전자주식회사 | 화면 출력 방법 및 이를 지원하는 전자 장치 |
| CN105872815A (zh) * | 2015-11-25 | 2016-08-17 | 乐视网信息技术（北京）股份有限公司 | 视频播放的方法及装置 |
| CN107807764B (zh) * | 2017-10-27 | 2020-10-13 | 优酷网络技术（北京）有限公司 | 一种页面展示方法及客户端 |
| CN107797839A (zh) * | 2017-10-31 | 2018-03-13 | 北京酷我科技有限公司 | 一种列表滚动时视频小窗化的方法 |
-
2018
- 2018-04-16 CN CN201810336485.XA patent/CN108616770B/zh active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN108616770A (zh) | 2018-10-02 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11109117B2 (en) | Unobtrusively enhancing video content with extrinsic data | |
| US7549127B2 (en) | Method and apparatus for resizing video content displayed within a graphical user interface | |
| US10664703B2 (en) | Virtual trading card and augmented reality movie system | |
| US9826277B2 (en) | Method and system for collaborative and scalable information presentation | |
| US11882085B2 (en) | Methods, systems, and media for generating a notification in connection with a video content item | |
| CN105979339B (zh) | 一种窗口显示方法及客户端 | |
| US20130311886A1 (en) | Interactive mobile video viewing experience | |
| CN111541930A (zh) | 直播画面的显示方法、装置、终端及存储介质 | |
| US10070157B2 (en) | Methods, systems, and media for generating an advertisement from a video stream | |
| US8878997B2 (en) | Electronic displays having paired canvases | |
| CN113286201B (zh) | 推荐信息展示方法、装置、电子设备和存储介质 | |
| US20150046823A1 (en) | Selectively adjusting display parameter of areas within user interface | |
| US20080168493A1 (en) | Mixing User-Specified Graphics with Video Streams | |
| CN111246270B (zh) | 一种显示弹幕的方法、装置、设备和存储介质 | |
| CN106303655A (zh) | 一种媒体内容播放提示方法及装置 | |
| CN108600855A (zh) | 一种竖版视频的实现方法 | |
| CN111760266A (zh) | 游戏直播方法、装置及电子设备 | |
| CN112243155B (zh) | 一种直播的处理方法及装置 | |
| CN108419116B (zh) | 一种竖版视频与滚动区联动的方法 | |
| CN108616770B (zh) | 一种竖版视频与滚动区联动方法 | |
| CN105843485A (zh) | 页面显示的方法及装置 | |
| CN105139436B (zh) | 一种新型图片内容展示的方法及系统 | |
| CN105635832A (zh) | 一种视频处理方法和装置 | |
| US11659219B2 (en) | Video performance rendering modification based on device rotation metric | |
| US20150215666A1 (en) | Electronic displays with user agents for managing canvases on the displays |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |