美文网首页iOS开发实用轮子app开发
视频播放器的封装(支持横竖屏切换、cell上播放)

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

作者: ZhengYaWei | 来源:发表于2017-02-19 21:01 被阅读1104次

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

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

    在研究视频播放相关的问题之前必须能弄懂一个很重要的问题,如何正确的控制横竖屏切换问题。具体请参考我之前写的文章:http://www.jianshu.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];
                    }
                }
            }
        }
        
    }
    
    

    相关文章

      网友评论

      • 咕嘟嘎吱:有个问题,点击进度条,视频画面会发抖,持续到最后。大神看看怎么回事。
      • 小桥流水青山碧海:项目只支持竖屏的时候,cell那边可以横屏
      • 小桥流水青山碧海:发现一个问题 项目的方向只支持 竖屏 点击全屏 就不能横屏了
        ZhengYaWei:@minlanren 先把知识点知道了再写代码:stuck_out_tongue:
        小桥流水青山碧海:@ZhengYaWei 也就是说,只要有一个页面支持横屏 ,那么 argets-->Deploument Info--> Device Orientation 这里对应的部分一定要勾选,但是其他页面也会变横屏了。我还是先看看你推荐的文章吧
        ZhengYaWei:首先哪怕项目只有一个页面要支持横屏,Targets-->Deploument Info--> Device Orientation 这里对应的部分一定要勾选。其次,为了使对应的控制器支持横竖屏切换,需要对相应的控制器进行代码设置。我之前写过一篇关于横竖屏切换的文章,估计这篇文章看完后,你应该就会明白的http://www.jianshu.com/p/5be7eaf4a1a6
      • 小桥流水青山碧海:254: AQDefaultDevice (173): skipping input stream 0 0 0x0
        2017-07-31 09:17:55.144810+0800 ZWPlayerDemo[1579:76103] [aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
        2017-07-31 09:17:57.153570+0800 ZWPlayerDemo[1579:76103] [aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
        2017-07-31 09:17:59.162310+0800 ZWPlayerDemo[1579:76103] [aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
        2017-07-31 09:18:01.170819+0800 ZWPlayerDemo[1579:76103] [aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
        2017-07-31 09:18:03.179431+0800 ZWPlayerDemo[1579:76103] [aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
        2017-07-31 09:18:05.188158+0800 ZWPlayerDemo[1579:76103] [aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0
        2017-07-31 09:18:07.196598+0800 ZWPlayerDemo[1579:76103] [aqme] 254: AQDefaultDevice (173): skipping input stream 0 0 0x0

        退出播放 这个消息还是一直在打印
        小桥流水青山碧海:一切正常 就是网络卡了点
        小桥流水青山碧海:@ZhengYaWei 谢谢大神 解决了
        ZhengYaWei:http://blog.csdn.net/hbblzjy/article/details/70228225
      • overla5:你好。点击cell和手势冲突了怎么解决?我半天没成功,谢谢。
      • c44c0bf3f747:好像有个小bug

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

      本文链接:https://www.haomeiwen.com/subject/vewjwttx.html