视频播放器的封装(支持横竖屏切换、cell上播放)

用了几天断断续续的空闲时间封装了一个视频播放器ZWPlayer,支持横竖屏切换、cell上播放、滚动UITableView停止视频、以及滚动UITableViewcell视频播放器缩小到底部播放,具体请看如下效果图。这篇文章主要是讲这个视频播放器封装的总体思路。针对具体细节并没有说太多,这里主要是针对几个自己感觉值得注意的地方说明了下。具体实现请看Demo,Demo下载地址:https://github.com/ZhengYaWei1992/ZWPlayer

cell上播放动画效果
全屏竖屏状态
全屏横屏状态
非全屏状态

在研究视频播放相关的问题之前必须能弄懂一个很重要的问题,如何正确的控制横竖屏切换问题。具体请参考我之前写的文章://www.greatytc.com/p/5be7eaf4a1a6。这里简简单说下,一般在项目中控制横竖屏问题,主要代码一般会写在UITabbarController中。而不是直接写在UIViewController中,因为即使写在UIViewController在push的情况下也不会起到什么作用,最终的控制权是有UITabbarController控制的。当然这种情况只是针对push而言,如果仅仅是针对模态进入的控制器,情况又会完全相反。看看tabBarController中是如何控制屏幕是否支持旋转的。一般主要是重写系统的下面另个方法,来控制特定页面是否支持旋转。这里只是简单说说,想了解更多,就参考上面的连接。

- (BOOL)shouldAutorotate{
    UINavigationController *nav = self.viewControllers[self.selectedIndex];
    if ([nav.topViewController isKindOfClass:[ViewController2 class]]) {
       return YES;
    }else if ([nav.topViewController isKindOfClass:[A_A_ViewController class]]){
        return YES;
    }
    return NO;
}
- (UIInterfaceOrientationMask)supportedInterfaceOrientations{
    UINavigationController *nav = self.selectedViewController;
    if ([nav.topViewController isKindOfClass:[ViewController2 class]]) {
        return UIInterfaceOrientationMaskAllButUpsideDown;
    }else if ([nav.topViewController isKindOfClass:[A_A_ViewController class]]){
         return UIInterfaceOrientationMaskAllButUpsideDown;
    }
    // 其他页面
    return UIInterfaceOrientationMaskPortrait;
}

说下视频播放器的层次结构,这里我将控制层和播放曾完全给剥离开来编写代码,在视频播放器的最上层是一个透明的UIView,这个UIView上放置了多个控件,诸如:返回按钮、暂停、加载提示、时间label、UISlider、精度条以及全屏按钮。而播放层主要用于播放视屏,处理一些业务逻辑,诸如屏幕旋转、缓冲进度计算、视屏播放状态监控以及是否处于前台、是否退出应用等。所以在实际风装这个视频播放器的过程中,主要是创建了两个类ZWPlayerControlView(控制层)和ZWPlayerView(处理播放相关业务逻辑),以及一个ZWPlayer,这个类主要是对外提供接口,以及一些常量的宏都放置在这个类里面。

控制层布局虽然简单,但是有一点值得去说的。可能会有人疑惑类似这种带有加载精度的控制条是怎么弄得,可能有人会猜测UISlider难道还有一些其他自己不知道的属性。其实并不是这样的,带有缓冲的进度条主要是通过UISlider和UIProgerssView两个控件相互结合的。其中UIProgressView主要负责显示加载进度,剩下的播放进度、宽进、后退都是由UISlider完成的。

看一下ZWPlayer中是如何监听屏幕旋转的。这里监听屏幕旋转的主要目的是为了更变全屏按钮的状态,至于控制层使用的是Masonry设置的约束。

 [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(onDeviceOrientationChange)
                                                 name:UIDeviceOrientationDidChangeNotification
                                               object:nil
     ];


- (void)onDeviceOrientationChange{
    if (_isCellVideo) {
        return;
    }
    UIDeviceOrientation orientation             = [UIDevice currentDevice].orientation;
    UIInterfaceOrientation interfaceOrientation = (UIInterfaceOrientation)orientation;
    switch (interfaceOrientation) {
        case UIInterfaceOrientationPortraitUpsideDown:{
            self.controlView.fullScreenBtn.selected = YES;
            self.isFullScreen = YES;
        }
            break;
        case UIInterfaceOrientationPortrait:{
            self.isFullScreen = !self.isFullScreen;
            self.controlView.fullScreenBtn.selected = NO;
        
            self.isFullScreen = NO;
            
        }
            break;
        case UIInterfaceOrientationLandscapeLeft:{
            self.controlView.fullScreenBtn.selected = YES;
     
            self.isFullScreen = YES;
        }
            break;
        case UIInterfaceOrientationLandscapeRight:{
            self.controlView.fullScreenBtn.selected = YES;
            self.isFullScreen = YES;
        }
            break;
            
        default:
            break;
    }
}

虽然上面的代码片段可以在设备屏幕旋转的时候,更新全屏按钮的状态。但针对于设备并没有旋转,点击了全屏按钮在竖屏和横屏之间切换,这又是如何做到的呢?这里主要是强制更新设备方向,具体请看如下代码片段。下面的代码片段针对ARC和非ARC两种情况均提供了解决方案,但是有一点要注意: [[UIDevice currentDevice] setValue:[NSNumber numberWithInteger:UIInterfaceOrientationLandscapeRight] forKey:@"orientation"];这具代码不能直接拿来使用,否则可能会被拒绝上架。

- (void)interfaceOrientation:(UIInterfaceOrientation)orientation{
    // arc下
    if ([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]) {
        SEL selector             = NSSelectorFromString(@"setOrientation:");
        NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:[UIDevice instanceMethodSignatureForSelector:selector]];
        [invocation setSelector:selector];
        [invocation setTarget:[UIDevice currentDevice]];
        int val                  = orientation;
        // 从2开始是因为0 1 两个参数已经被selector和target占用
        [invocation setArgument:&val atIndex:2];
        [invocation invoke];
    }
    /*
     // 非arc下
     if ([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]) {
     [[UIDevice currentDevice] performSelector:@selector(setOrientation:)
     withObject:@(orientation)];
     }
     // 直接调用这个方法通不过apple上架审核
     [[UIDevice currentDevice] setValue:[NSNumber numberWithInteger:UIInterfaceOrientationLandscapeRight] forKey:@"orientation"];
     */
}

针对于常规的视屏播放就讲这么多,下面针对cell上播放视频简单的说一下。cell上播放视屏,首先要考虑一点,ZWPlayer负责播放视频的这个类,最好是创建一个单例对象。除了这一点,接下来着重要考虑的两点是关于复用的问题以及如何监控UITableView的滚啊东,判断当前播放器是否依然在可视区域。

首先来看看如何在滚动UITablview的时候解决复用问题。如下代码主要是写在创建UITablViewCell的一个代理方法中。

if (indexPath.row== _currentIndexPath.row) {
                [cell.playBtn.superview sendSubviewToBack:cell.playBtn];
            }else{
                [cell.playBtn.superview bringSubviewToFront:cell.playBtn];
            }
            NSArray *indexpaths = [tableView indexPathsForVisibleRows];
            if (![indexpaths containsObject:_currentIndexPath]) {//复用
                if ([[UIApplication sharedApplication].keyWindow.subviews containsObject:_playerView]) {
                    _playerView.hidden = NO;
                }else{
                    _playerView.hidden = YES;
                }
            }else{
                if ([cell.picView.subviews containsObject:_playerView]) {
                    [cell.picView addSubview:_playerView];
                    [_playerView play];
                    _playerView.hidden = NO;
                }
            }

再来看看,如何判断当前播放视屏的cell是否已经滚出可视区范围之内。

//tableViewCell离开界面,视频消失
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (scrollView == self.tableView) {
        if(_playerView == nil){
            return;
        }
        if (_playerView.superview) {//播放的cell在当前屏幕可视区
            CGRect rectInTableView = [self.tableView rectForRowAtIndexPath:_currentIndexPath];
            CGRect rectInSuperview = [self.tableView convertRect:rectInTableView toView:[self.tableView superview]];
            
            if (rectInSuperview.origin.y<-self.currentCell.picView.frame.size.height||rectInSuperview.origin.y>[UIScreen mainScreen].bounds.size.height-64-49) {//往上拖动
                if ([[UIApplication sharedApplication].keyWindow.subviews containsObject:_playerView]&&_isBottomVideo) {
                    _isBottomVideo = YES;
                }else{
                    //播放视频的cell不在当前可视区范围内,放到window,在底部显示
                    [self toBottomVideo];
                }
            }else{
                if ([self.currentCell.picView.subviews containsObject:_playerView]) {
                    
                }else{
                    //播放视频的cell在当前可视区范围内,回到原来的cell上继续播放
                    [self toCell];
                }
            }
        }
    }
    
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容