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

時間  2019-11-24
標籤 使用 avplayer 自定義 支持 全屏 播放 简体版
原文   原文鏈接

前言

前段時間封裝了一個視頻播放器使用AVPlayer自定義支持全屏的播放器（三），通過一段時間的測試，發現了許多bug，針對之前遺留的問題進行了修復和更新。git

修復bug

主要修復了播放器頁面不支持旋轉引發全屏音量圖標未旋轉，進度條拖拽不靈敏，Masonry引發約束警告，網絡很差銷燬播放器引發卡頓，工具條自動消失後須要點擊兩次等bug。github

1.旋轉後音量圖標不旋轉bug

開始使用的是旋轉播放器來實現全屏，實際頁面未旋轉，因此係統音量圖標方向不對，修改後利用頁面旋轉來實現全屏，這樣就不會引發系統音量圖標方向不對，具體如何使頁面支持旋轉，而且不影響其餘頁面請看這裏iOS頁面旋轉詳解。bash

2.進度條拖拽不靈敏

因爲自定義了進度條的圖標，引發進度條拖拽不靈敏，這裏在自定義進度條內部重寫- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event，- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event這兩個方法，增大響應的範圍。網絡

代碼
//檢查點擊事件點擊範圍是否可以交給self處理
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    //調用父類方法,找到可以處理event的view
    UIView* result = [super hitTest:point withEvent:event];
    if (result != self) {
        /*若是這個view不是self,咱們給slider擴充一下響應範圍,
         這裏的擴充範圍數據就能夠本身設置了
         */
        if ((point.y >= -15) &&
            (point.y < (_lastBounds.size.height + SLIDER_Y_BOUND)) &&
            (point.x >= 0 && point.x < CGRectGetWidth(self.bounds))) {
            //若是在擴充的範圍類,就將event的處理權交給self
            result = self;
        }
    }
    //不然,返回可以處理的view
    return result;
}
//檢查是點擊事件的點是否在slider範圍內
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    //調用父類判斷
    BOOL result = [super pointInside:point withEvent:event];
    if (!result) {
        //同理,若是不在slider範圍類,擴充響應範圍
        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))) {
            //在擴充範圍內,返回yes
            result = YES;
        }
    }
    //不然返回父類的結果
    return result;
}
複製代碼

新增功能

新增長了轉子動畫，增長拖拽後轉子銜接動畫，增長各種接口。ide

轉子動畫

利用CAShapeLayer和UIBezierPath作了一個簡單的加載動畫。工具

代碼
@interface AILoadingView ()<CAAnimationDelegate>

@property(nonatomic,strong)CAShapeLayer *loadingLayer;
/** 當前的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導入，pod 'CLPlayer'。測試

1.普通頁面

支持經過Push和模態建立的頁面，不管頁面是否支持旋轉都兼容。播放器默認所有頁面都只支持豎屏，若是使用後須要某個頁面支持其餘方向，須要重寫下面幾個方法。優化

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

2.TableVIew使用代碼

建立方式和普通頁面同樣，在建立的時候記錄播放器所在cell，在cell滑出當前TableView的時候對播放器進行銷燬。動畫

播放器建立代碼
#pragma mark - 點擊播放代理
- (void)cl_tableViewCellPlayVideoWithCell:(CLTableViewCell *)cell{
    //記錄被點擊的Cell
    _cell = cell;
    //銷燬播放器
    [_playerView destroyPlayer];
    CLPlayerView *playerView = [[CLPlayerView alloc] initWithFrame:CGRectMake(0, 0, cell.CLwidth, cell.CLheight)];
    _playerView = playerView;
    [cell.contentView addSubview:_playerView];
//    //重複播放，默認不播放
//    _playerView.repeatPlay = YES;
//    //當前控制器是否支持旋轉，當前頁面支持旋轉的時候須要設置，告知播放器
//    _playerView.isLandscape = YES;
//    //設置等比例全屏拉伸，多餘部分會被剪切
//    _playerView.fillMode = ResizeAspectFill;
//    //設置進度條背景顏色
//    _playerView.progressBackgroundColor = [UIColor purpleColor];
//    //設置進度條緩衝顏色
//    _playerView.progressBufferColor = [UIColor redColor];
//    //設置進度條播放完成顏色
//    _playerView.progressPlayFinishColor = [UIColor greenColor];
//    //全屏是否隱藏狀態欄
//    _playerView.fullStatusBarHidden = NO;
//    //轉子顏色
//    _playerView.strokeColor = [UIColor redColor];
    //視頻地址
    _playerView.url = [NSURL URLWithString:cell.model.videoUrl];
    //播放
    [_playerView playVideo];
    //返回按鈕點擊事件回調
    [_playerView backButton:^(UIButton *button) {
        NSLog(@"返回按鈕被點擊");
    }];
    //播放完成回調
    [_playerView endPlay:^{
        //銷燬播放器
        [_playerView destroyPlayer];
        _playerView = nil;
        _cell = nil;
        NSLog(@"播放完成");
    }];
}
複製代碼
判斷cell是否滑出TableView代碼
//cell離開tableView時調用
- (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    //由於複用，同一個cell可能會走屢次
    if ([_cell isEqual:cell]) {
        //區分是不是播放器所在cell,銷燬時將指針置空
        [_playerView destroyPlayer];
        _cell = nil;
    }
}
複製代碼

播放器效果圖

效果圖

總結

本次主要是修復之前遺留的bug，完善了各類狀況的Demo，優化了體驗，Demo中有詳細的註釋,具體請在github下載CLPlayer ， 若是喜歡，歡迎star。ui

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程