close
当前位置: 物联网在线 > 技术文库 > ios >

iOS端一次视频全屏需求的实现

对于一个带有视频播放功能的app产品来说,视频全屏是一个基本且重要的需求。虽然这个需求看起来很简单,但是在实现上,我们前后迭代了三套技术方案。这篇文章将介绍这三种实现方案中的利弊和坑点,以及实现过程中积累的经验。

需求要点:

在屏幕旋转的动画中,需要保持播放器之外的界面布局(比如“First View”等几行字的布局不应该发生变化)

全屏切换到小屏,小屏需要回到原先位置

iOS端一次视频全屏需求的实现

对于这三种实现方案,我写了个 demo 分别示意。三个方案分别在demo的三个tab中。

原始方案:方案一

从小屏进入全屏时,将播放器所在的view放置到window上,用transform的方式做一个旋转动画,最终让view完全覆盖window。 从全屏回到小屏时,用transform的方式做旋转动画,最终让播放器所在的view回到原先的parentView上

核心代码示例:

- (void)enterFullscreen { if (self.movieView.state != MovieViewStateSmall) { return; } self.movieView.state = MovieViewStateAnimating; /* * 记录进入全屏前的parentView和frame */ self.movieView.movieViewParentView = self.movieView.superview; self.movieView.movieViewFrame = self.movieView.frame; /* * movieView移到window上 */ CGRect rectInWindow = [self.movieView convertRect:self.movieView.bounds toView:[UIApplication sharedApplication].keyWindow]; [self.movieView removeFromSuperview]; self.movieView.frame = rectInWindow; [[UIApplication sharedApplication].keyWindow addSubview:self.movieView]; /* * 执行动画 */ [UIView animateWithDuration:0.5 animations:^{ self.movieView.transform = CGAffineTransformMakeRotation(M_PI_2); self.movieView.bounds = CGRectMake(0, 0, CGRectGetHeight(self.movieView.superview.bounds), CGRectGetWidth(self.movieView.superview.bounds)); self.movieView.center = CGPointMake(CGRectGetMidX(self.movieView.superview.bounds), CGRectGetMidY(self.movieView.superview.bounds)); } completion:^(BOOL finished) { self.movieView.state = MovieViewStateFullscreen; }]; } - (void)exitFullscreen { if (self.movieView.state != MovieViewStateFullscreen) { return; } self.movieView.state = MovieViewStateAnimating; CGRect frame = [self.movieView.movieViewParentView convertRect:self.movieView.movieViewFrame toView:[UIApplication sharedApplication].keyWindow]; [UIView animateWithDuration:0.5 animations:^{ self.movieView.transform = CGAffineTransformIdentity; self.movieView.frame = frame; } completion:^(BOOL finished) { /* * movieView回到小屏位置 */ [self.movieView removeFromSuperview]; self.movieView.frame = self.movieView.movieViewFrame; [self.movieView.movieViewParentView addSubview:self.movieView]; self.movieView.state = MovieViewStateSmall; }]; }

这种方式在实现上相对简单,因为仅仅旋转了播放器所在的view,view controller和device的方向均始终为竖直(portrait)。但最大的问题就是全屏时status bar的方向依然是竖直的,虽然之前通过全屏时隐藏statusBar来掩盖了这个问题,但这同时导致了用户无法在视频全屏时看到时间、网络情况等,体验有待改善。

iOS端一次视频全屏需求的实现

方案二设想

为了解决status bar不能转至横向的问题,我们决定替换视频全屏的实现方式。

业界比较流行的转屏方式应该是通过私有接口设置UIDevice的orientation属性。但直接设置这一属性的实现出来的转屏动画效果有些欠缺。比如旋转过程中会漏出黑色。

由于setStatusBarOrientation等方法已经被标记为depreciated了,使用它可能会带来风险,于是我们暂时也没有考虑这种方式

一个顺理成章的技术方案是:

在一个只支持Portrait的ViewController上,present一个只支持Landscape的ViewController,通过改写ViewController之间的转场动画,既能高度自定义全屏动画,也能让StatusBar在视频全屏时横向显示。

这个方案没有用任何私有接口或hack的方式,完全符合苹果的要求,理想中它应该会是一个稳定可靠的方案。

于是我们选用了present一个ViewController的方式作为方案二进行了下去。

核心设计为:

新增一个ViewController的子类,demo中为FullscreenViewController,重写这个类的supportedInterfaceOrientations方法,返回UIInterfaceOrientationMaskLandscape。

全屏时,present这个FullscreenViewController,系统会自动将statusBar转至Landscape方向。 同时自定义这个FullscreenViewController的转场动画,形成一个符合产品需求的动画效果。

方案二坑点&解决

在方案二的实现过程中,我们遇到了不少问题。

业务上的坑点

兼容viewWillDisppear等生命周期方法


(责任编辑:ioter)

用户喜欢...

一次下电和二次下电到底有什么区别? 如何操作?

所谓的一次下电、二次下电是针对开关电源(电源柜)说的。为什么要设置二次下电电压呢?为了保护电池组不会出...


分析海量视频中的违规内容,七牛如何构建弹性深度学习计算平台

作者:彭垚 以云存储起家的七牛云为什么会选择在这个时间投身 AI?基于富媒体大数据的弹性深度学习计算平台能够...


实验:把老旧监视器放在公开网络,平均每两分钟就被成功骇进一次

一名研究人员将监视器以预设的状态放到公开网络,并允许Telnet联机,放置45小时又42分钟,结果企图联机该监视器的...


物联网技术推进视频监控变革 AI大数据解决行业“痛点”

随着物联网技术的加速发展,视频监控行业也正在接受来自大数据、云计算、物联网以及AI等创新技术的“洗礼”。...


莱迪思半导体通过提供模块化IP核进一步丰富了CrossLink应用

莱迪思半导体公司客制化智能互连解决方案市场的领先供应商,今日宣布推出7款全新的模块化IP核,支持屡获殊荣的...


德州仪器发布2016年企业公民报告 创造更美好的明天

德州仪器(TI)(NASDAQ: TXN)日前发布了其第十一次年度企业公民报告(CCR),并概述了2016年TI在社会和环境领域的杰...


资源整理 | 32个Python爬虫项目让你一次吃到撑

作者:SFLYQ 今天为大家整理了32个Python爬虫项目。 整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培...


安普德WF61模块—5GHz WiFi应用于视频物联网设备

先进的物联网(IoT)无线模块国际供应商Amp'ed RF Wireless Technology宣布推出其WF61模块。可以说这是一款为能够支持高达...


Intersil推出业内首款专门针对汽车应用的全高清LCD视频处理器

瑞萨电子株式会社(TSE: 6723)子公司Intersil今天宣布,推出可与最新一代汽车SoC相连接的业内首款专门为汽车应用而设计的全高清LCD视频处理器---TW8844。高度集成的TW8844是建立在Intersil业内领...


视频会议新格局确立 云计算开启技术叠加时代

云视频会议取代传统视频会议,不仅仅是在应用技术上的突破,同时也标志着视频通讯技术进入了新技术快速叠加时...