使用AVPlayer自定義支持全屏的播放器（四）

前言

前段時(shí)間封裝了一個(gè)視頻播放器使用AVPlayer自定義支持全屏的播放器（三），經(jīng)過一段時(shí)間的測(cè)試，發(fā)現(xiàn)了許多bug，針對(duì)以前遺留的問題進(jìn)行了修復(fù)和更新。

修復(fù)bug

主要修復(fù)了播放器頁面不支持旋轉(zhuǎn)引起全屏音量圖標(biāo)未旋轉(zhuǎn)，進(jìn)度條拖拽不靈敏，Masonry引起約束警告，網(wǎng)絡(luò)不好銷毀播放器引起卡頓，工具條自動(dòng)消失后需要點(diǎn)擊兩次等bug。

1.旋轉(zhuǎn)后音量圖標(biāo)不旋轉(zhuǎn)bug

開始使用的是旋轉(zhuǎn)播放器來實(shí)現(xiàn)全屏，實(shí)際頁面未旋轉(zhuǎn)，所以系統(tǒng)音量圖標(biāo)方向不對(duì)，修改后利用頁面旋轉(zhuǎn)來實(shí)現(xiàn)全屏，這樣就不會(huì)引起系統(tǒng)音量圖標(biāo)方向不對(duì)，具體如何使頁面支持旋轉(zhuǎn)，并且不影響其他頁面請(qǐng)看這里iOS頁面旋轉(zhuǎn)詳解。

2.進(jìn)度條拖拽不靈敏

由于自定義了進(jìn)度條的圖標(biāo)，引起進(jìn)度條拖拽不靈敏，這里在自定義進(jìn)度條內(nèi)部重寫- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event，- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event這兩個(gè)方法，增大響應(yīng)的范圍。

代碼
//檢查點(diǎn)擊事件點(diǎn)擊范圍是否能夠交給self處理
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    //調(diào)用父類方法,找到能夠處理event的view
    UIView* result = [super hitTest:point withEvent:event];
    if (result != self) {
        /*如果這個(gè)view不是self,我們給slider擴(kuò)充一下響應(yīng)范圍,
         這里的擴(kuò)充范圍數(shù)據(jù)就可以自己設(shè)置了
         */
        if ((point.y >= -15) &&
            (point.y < (_lastBounds.size.height + SLIDER_Y_BOUND)) &&
            (point.x >= 0 && point.x < CGRectGetWidth(self.bounds))) {
            //如果在擴(kuò)充的范圍類,就將event的處理權(quán)交給self
            result = self;
        }
    }
    //否則,返回能夠處理的view
    return result;
}
//檢查是點(diǎn)擊事件的點(diǎn)是否在slider范圍內(nèi)
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    //調(diào)用父類判斷
    BOOL result = [super pointInside:point withEvent:event];
    if (!result) {
        //同理,如果不在slider范圍類,擴(kuò)充響應(yīng)范圍
        if ((point.x >= (_lastBounds.origin.x - SLIDER_X_BOUND)) && (point.x <= (_lastBounds.origin.x + _lastBounds.size.width + SLIDER_X_BOUND))
            && (point.y >= -SLIDER_Y_BOUND) && (point.y < (_lastBounds.size.height + SLIDER_Y_BOUND))) {
            //在擴(kuò)充范圍內(nèi),返回yes
            result = YES;
        }
    }
    //否則返回父類的結(jié)果
    return result;
}

新增功能

新增加了轉(zhuǎn)子動(dòng)畫，增加拖拽后轉(zhuǎn)子銜接動(dòng)畫，增加各類接口。

轉(zhuǎn)子動(dòng)畫

利用CAShapeLayer和UIBezierPath做了一個(gè)簡單的加載動(dòng)畫。

代碼
@interface AILoadingView ()<CAAnimationDelegate>

@property(nonatomic,strong)CAShapeLayer *loadingLayer;
/** 當(dāng)前的index*/
@property(nonatomic,assign)NSInteger index;
/** 是否能用*/
@property(nonatomic,assign,getter=isEnable)BOOL enable;
@end
@implementation AILoadingView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _index    = 0;
        _enable   = YES;
        _duration = 2.;
        [self createUI];
    }
    return self;
}
-(void)layoutSubviews {
    [super layoutSubviews];
    UIBezierPath *path      = [self cycleBezierPathIndex:_index];
    self.loadingLayer.path  = path.CGPath;
}

- (UIBezierPath*)cycleBezierPathIndex:(NSInteger)index {
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height *0.5) radius:self.bounds.size.width * 0.5 startAngle:index * (M_PI* 2)/3  endAngle:index * (M_PI* 2)/3 + 2*M_PI * 4/3 clockwise:YES];
    return path;
}
- (void)createUI {
    self.loadingLayer             = [CAShapeLayer layer];
    self.loadingLayer.lineWidth   = 2.;
    self.loadingLayer.fillColor   = [UIColor clearColor].CGColor;
    self.loadingLayer.strokeColor = [UIColor blackColor].CGColor;
    [self.layer addSublayer:self.loadingLayer];
    self.loadingLayer.lineCap     = kCALineCapRound;
}
- (void)loadingAnimation {
    CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    strokeStartAnimation.fromValue         = @0;
    strokeStartAnimation.toValue           = @1.;
    strokeStartAnimation.timingFunction    = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    CABasicAnimation *strokeEndAnimation   = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnimation.fromValue           = @.0;
    strokeEndAnimation.toValue             = @1.;
    strokeEndAnimation.duration            = self.duration * 0.5;
    
    CAAnimationGroup *strokeAniamtionGroup = [CAAnimationGroup animation];
    strokeAniamtionGroup.duration          = self.duration;
    
    strokeAniamtionGroup.delegate          = self;
    strokeAniamtionGroup.animations        = @[strokeEndAnimation,strokeStartAnimation];
    [self.loadingLayer addAnimation:strokeAniamtionGroup forKey:@"strokeAniamtionGroup"];
}
#pragma mark -CAAnimationDelegate
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    if (!self.isEnable) {
        return;
    }
    _index++;
    self.loadingLayer.path = [self cycleBezierPathIndex:_index %3].CGPath;
    [self loadingAnimation];
}

#pragma mark -public
- (void)starAnimation {
    if (self.loadingLayer.animationKeys.count > 0) {
        return;
    }
    self.hidden = NO;
    self.enable = YES;
    [self loadingAnimation];
}
- (void)stopAnimation {
    self.hidden = YES;
    self.enable = NO;
    [self.loadingLayer removeAllAnimations];
}
- (void)setStrokeColor:(UIColor *)strokeColor {
    _strokeColor                   = strokeColor;
    self.loadingLayer.strokeColor  = strokeColor.CGColor;
}

使用方法

使用cocoapods導(dǎo)入，pod 'CLPlayer'。

1.普通頁面

支持通過Push和模態(tài)創(chuàng)建的頁面，無論頁面是否支持旋轉(zhuǎn)都兼容。播放器默認(rèn)全部頁面都只支持豎屏，如果使用后需要某個(gè)頁面支持其他方向，需要重寫下面幾個(gè)方法。

頁面支持其他方向代碼
#pragma mark -- 需要頁面支持其他方向，需要重寫這三個(gè)方法，默認(rèn)所有頁面只支持豎屏
// 是否支持自動(dòng)轉(zhuǎn)屏
- (BOOL)shouldAutorotate {
    return YES;
}
// 支持哪些屏幕方向
- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
    return UIInterfaceOrientationMaskAll;
}
// 默認(rèn)的屏幕方向（當(dāng)前ViewController必須是通過模態(tài)出來的UIViewController（模態(tài)帶導(dǎo)航的無效）方式展現(xiàn)出來的，才會(huì)調(diào)用這個(gè)方法）
- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation {
    return UIInterfaceOrientationPortrait;
}
使用代碼
    CLPlayerView *playerView = [[CLPlayerView alloc] initWithFrame:CGRectMake(0, 90, self.view.CLwidth, 300)];    
    [self.view addSubview:playerView];    
//    //重復(fù)播放，默認(rèn)不播放
//    playerView.repeatPlay = YES;
//    //當(dāng)前控制器是否支持旋轉(zhuǎn)，當(dāng)前頁面支持旋轉(zhuǎn)的時(shí)候需要設(shè)置，告知播放器
//    playerView.isLandscape = YES;
//    //設(shè)置等比例全屏拉伸，多余部分會(huì)被剪切
//    playerView.fillMode = ResizeAspectFill;
//    //設(shè)置進(jìn)度條背景顏色
//    playerView.progressBackgroundColor = [UIColor purpleColor];
//    //設(shè)置進(jìn)度條緩沖顏色
//    playerView.progressBufferColor = [UIColor redColor];
//    //設(shè)置進(jìn)度條播放完成顏色
//    playerView.progressPlayFinishColor = [UIColor greenColor];
//    //全屏是否隱藏狀態(tài)欄
//    playerView.fullStatusBarHidden = NO;
//    //是否靜音，默認(rèn)NO
//    playerView.mute = YES;
//    //轉(zhuǎn)子顏色
//    playerView.strokeColor = [UIColor redColor];
    //視頻地址
    playerView.url = [NSURL URLWithString:@"http://baobab.wdjcdn.com/14587093851044544c.mp4"];
    //播放
    [playerView playVideo];
    //返回按鈕點(diǎn)擊事件回調(diào)
    [playerView backButton:^(UIButton *button) {
        NSLog(@"返回按鈕被點(diǎn)擊");
        //查詢是否是全屏狀態(tài)
        NSLog(@"%d",playerView.isFullScreen);
    }];
    //播放完成回調(diào)
    [playerView endPlay:^{
        //銷毀播放器
//        [playerView destroyPlayer];
//        playerView = nil;
        NSLog(@"播放完成");
    }];

2.TableVIew使用代碼

創(chuàng)建方式和普通頁面一樣，在創(chuàng)建的時(shí)候記錄播放器所在cell，在cell滑出當(dāng)前TableView的時(shí)候?qū)Σシ牌鬟M(jìn)行銷毀。

播放器創(chuàng)建代碼
#pragma mark - 點(diǎn)擊播放代理
- (void)cl_tableViewCellPlayVideoWithCell:(CLTableViewCell *)cell{
    //記錄被點(diǎn)擊的Cell
    _cell = cell;
    //銷毀播放器
    [_playerView destroyPlayer];
    CLPlayerView *playerView = [[CLPlayerView alloc] initWithFrame:CGRectMake(0, 0, cell.CLwidth, cell.CLheight)];
    _playerView = playerView;
    [cell.contentView addSubview:_playerView];
//    //重復(fù)播放，默認(rèn)不播放
//    _playerView.repeatPlay = YES;
//    //當(dāng)前控制器是否支持旋轉(zhuǎn)，當(dāng)前頁面支持旋轉(zhuǎn)的時(shí)候需要設(shè)置，告知播放器
//    _playerView.isLandscape = YES;
//    //設(shè)置等比例全屏拉伸，多余部分會(huì)被剪切
//    _playerView.fillMode = ResizeAspectFill;
//    //設(shè)置進(jìn)度條背景顏色
//    _playerView.progressBackgroundColor = [UIColor purpleColor];
//    //設(shè)置進(jìn)度條緩沖顏色
//    _playerView.progressBufferColor = [UIColor redColor];
//    //設(shè)置進(jìn)度條播放完成顏色
//    _playerView.progressPlayFinishColor = [UIColor greenColor];
//    //全屏是否隱藏狀態(tài)欄
//    _playerView.fullStatusBarHidden = NO;
//    //轉(zhuǎn)子顏色
//    _playerView.strokeColor = [UIColor redColor];
    //視頻地址
    _playerView.url = [NSURL URLWithString:cell.model.videoUrl];
    //播放
    [_playerView playVideo];
    //返回按鈕點(diǎn)擊事件回調(diào)
    [_playerView backButton:^(UIButton *button) {
        NSLog(@"返回按鈕被點(diǎn)擊");
    }];
    //播放完成回調(diào)
    [_playerView endPlay:^{
        //銷毀播放器
        [_playerView destroyPlayer];
        _playerView = nil;
        _cell = nil;
        NSLog(@"播放完成");
    }];
}
判斷cell是否滑出TableView代碼
//cell離開tableView時(shí)調(diào)用
- (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    //因?yàn)閺?fù)用，同一個(gè)cell可能會(huì)走多次
    if ([_cell isEqual:cell]) {
        //區(qū)分是否是播放器所在cell,銷毀時(shí)將指針置空
        [_playerView destroyPlayer];
        _cell = nil;
    }
}

播放器效果圖

效果圖

總結(jié)

本次主要是修復(fù)以前遺留的bug，完善了各種情況的Demo，優(yōu)化了體驗(yàn)，Demo中有詳細(xì)的注釋,具體請(qǐng)?jiān)趃ithub下載CLPlayer ， 如果喜歡，歡迎star。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,366評(píng)論 25贊 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,838評(píng)論 4贊 61
  • 又到分別的時(shí)候 淚忽然就奪眶而出 看著再見 舉不起道別的手 不是痛楚 不是酸苦 是積滯太久 難抑心潮的涌流 你心如...
    靈山閱讀 213評(píng)論 0贊 0
  • 前兩天小霸王封開專營店開張，我回到封開，習(xí)慣性車子回到封開都需到德潤汽車美容會(huì)所清洗一下，最主要還是要到助學(xué)會(huì)簽到...
    短途自駕游閱讀 343評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容