基于AVPlayer封裝視頻播放器（具有邊下邊播、離線緩存、自定義控制面板等功能）

最近因公司需求，要做一個類似QQ空間視頻的輪播效果，故封裝了一個功能齊全的視頻播放器來實現(xiàn)項目的需求?，F(xiàn)在我將封裝過程中遇到的難題寫出來和大家分享，以下只對重點進行說明，源碼里有非常詳細的注釋，有興趣的小伙伴可以下載參考。如果有此相似需求的小伙伴可以直接使用，在項目中播放視頻只需簡單兩步。

    self.videoPlayer = [[LYVideoPlayer alloc] init];
    [self.videoPlayer playWithUrl:self.videoUrl showView:self.view];

本篇文章將從三個大的模塊為大家介紹一個視頻播放器的封裝。

  • 第一：視頻播放的實現(xiàn)；
  • 第二：離線緩存的實現(xiàn)；
  • 第三：自定義控制面板（自定義滑塊可隨意調(diào)整滑塊大小和軌道高度、手勢前進/后退、手勢音量加減）。
    首先來看一下實現(xiàn)的效果：
播放器播放效果.gif
自定義滑塊2.png
自定義滑塊3.png

一、視頻播放的實現(xiàn)

1、要現(xiàn)實視頻的播放，得先知道在AVFoundation框架下的三個類：AVPlayerItem、AVPlayer、AVPlayerLayer。AVPlayerItem是一個媒體資源管理類，負責(zé)數(shù)據(jù)的獲取與分發(fā)；AVPlayer負責(zé)解碼數(shù)據(jù)；AVPlayerLayer 是圖層顯示，用于數(shù)據(jù)的展示。

    //1.創(chuàng)建播放器
    self.currentPlayerItem = [AVPlayerItem playerItemWithURL:url];
    self.player = [AVPlayer playerWithPlayerItem:self.currentPlayerItem];
    self.currentPlayerLayer = [AVPlayerLayer playerLayerWithPlayer:self.player];

2、第一步已經(jīng)創(chuàng)建好了播放器，接下來就是去播放了，那么問題就來了，咱們怎么知道什么時候可以開始播放了呢？這就需要去監(jiān)聽播放器的狀態(tài)了，通過KVO監(jiān)聽AVPlayerItem的狀態(tài)，獲得狀態(tài)后就可以去讓AVPlayer執(zhí)行播放的方法了。


    //1.通過KVO監(jiān)聽AVPlayerItem的狀態(tài)
    [self.currentPlayerItem addObserver:self forKeyPath:@"status" options:NSKeyValueObservingOptionNew context:nil];
  
    //2.方法回調(diào)-根據(jù)狀態(tài)做相應(yīng)的邏輯處理
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
    
    AVPlayerItem *playerItem = (AVPlayerItem *)object;
    
    if ([keyPath isEqualToString:@"status"]) {
        AVPlayerItemStatus status = playerItem.status;
        switch (status) {
            case AVPlayerItemStatusUnknown:{
                NSLog(@"======== 播放失敗");
            }
                break;
                
            case AVPlayerItemStatusReadyToPlay:{
                NSLog(@"========= 準備播放");
                //去播放
                [self play];
                //圖層顯示
                [self handleShowViewSublayers];
            }
                break;
                
            case AVPlayerItemStatusFailed:{
                NSLog(@"======== 播放失敗");
            }
                break;
                
            default:
                break;
        }
    }
}

3、視頻的播放很簡單，但是只有播放功能還遠遠不能滿足咱們的需求?。『冒?，繼續(xù)來。其中比較傷腦筋的是菊花（此菊花非彼菊花~）的顯示邏輯，有多傷腦筋我就不說太細了，反正我相信做過這個的小伙伴應(yīng)該是明白菊花帶來的傷痛的。首先菊花的顯示第一次肯定是在加載數(shù)據(jù)的時候進行顯示的，再者就是在播放到?jīng)]有緩沖數(shù)據(jù)的時候進行顯示，這個很容易實現(xiàn)。實現(xiàn)方法就是利用AVPlayerItem進行監(jiān)聽，代碼如下

 //監(jiān)聽到當(dāng)前沒有緩沖數(shù)據(jù)   
 [self.currentPlayerItem addObserver:self forKeyPath:@"playbackBufferEmpty" options:NSKeyValueObservingOptionNew context:nil];

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
    
    AVPlayerItem *playerItem = (AVPlayerItem *)object;
    if ([keyPath isEqualToString:@"playbackBufferEmpty"]) {
        self.isPlaying = NO;
        self.isBufferEmpty = YES;
        self.lastBufferValue = self.currentBufferValue;
        [self.videoPlayControl videoPlayerDidLoading];//顯示菊花
        
        NSLog(@"====playbackBufferEmpty");
    }
}

好了，傷腦筋的終于來了，菊花顯示了該什么時候去讓它消失呢？有的小伙伴可能會說利用AVPlayer進行播放的監(jiān)聽啊，當(dāng)視頻播放的時候就讓菊花消失就行了。當(dāng)然這是肯定的，會在這里監(jiān)聽做事情，但是事情遠不止這一點。比如當(dāng)正在緩沖的時候被暫停了，那么監(jiān)聽視頻的播放來讓菊花消失肯定是不能滿足需求的，還有一個非常蛋疼的問題就是當(dāng)拖動滑塊到?jīng)]有緩沖的地方的時候，這時候明明正在緩沖數(shù)據(jù)沒有播放，但是這個時候莫名其妙的就還會來到這個地方，所以我不得已在代碼里做了一些不人性化的操作，就是獲取當(dāng)前的本地時間，然后在拖動滑塊的時候記錄下當(dāng)前時間來和下次進入這個方法的時候作對比，如果是時間差大于1秒以上的一般就是真正的在播放了。


- (void)addObserver {
    //監(jiān)聽播放進度
    __weak typeof(self) weakSelf = self;
    self.timeObserve = [self.player addPeriodicTimeObserverForInterval:CMTimeMake(1, 1) queue:dispatch_get_main_queue() usingBlock:^(CMTime time) {
        CGFloat current = CMTimeGetSeconds(time);
        CGFloat total = CMTimeGetSeconds(weakSelf.currentPlayerItem.duration);
        CGFloat progress = current / total;
        
        weakSelf.videoPlayControl.currentTime = current;
        weakSelf.videoPlayControl.playValue = progress;
        
        /***** 這里是比較蛋疼的，當(dāng)拖動滑塊到?jīng)]有緩沖的地方并且沒有開始播放時，也會走到這里 *************/
        if (weakSelf.isCanToGetLocalTime) {
             weakSelf.localTime = [weakSelf getLocalTime];
        }
        NSInteger timeNow = [weakSelf getLocalTime];
        if (timeNow - weakSelf.localTime > 1.5) {
            [weakSelf.videoPlayControl videoPlayerDidBeginPlay];
            weakSelf.isCanToGetLocalTime = YES;
        }
    }];
}

二、離線緩存的實現(xiàn)

實現(xiàn)數(shù)據(jù)的離線緩存，我的做法是，當(dāng)在建立起數(shù)據(jù)請求的時候，根據(jù)url生成一個文件路徑，讓數(shù)據(jù)下載到一個臨時的文件路徑下。第一種情況：當(dāng)請求發(fā)起時一直下載到下載成功，這時候就將該文件移動到緩存目錄下緩存起來。第二種情況：當(dāng)中斷下載數(shù)據(jù)時，對該臨時文件不做任何處理，然后再次播放該視頻請求數(shù)據(jù)時，根據(jù)url生成的路徑查找當(dāng)前的臨時路徑下有無該文件，如果有說明該文件沒有下載完成，則需要讀到這個文件然后做斷點續(xù)傳操作，讓該文件繼續(xù)下載，而不是重頭開始下載。我在這里是提供了一個離線緩存的思路，如想深入研究離線緩存和斷點下載的小伙伴可以去這里看看【補充】NSURLSession 詳解離線斷點下載的實現(xiàn)


- (void)fileJudge{
    //判斷當(dāng)前目錄下有無已有下載的臨時文件
    if ([_fileManager fileExistsAtPath:self.videoTempPath]) {
        //存在已下載數(shù)據(jù)的文件
        _fileHandle = [NSFileHandle fileHandleForUpdatingAtPath:self.videoTempPath];
        _curruentLength = [_fileHandle seekToEndOfFile];
        
    }else{
        //不存在文件
        _curruentLength = 0;
        //創(chuàng)建文件
        [_fileManager createFileAtPath:self.videoTempPath contents:nil attributes:nil];
        _fileHandle = [NSFileHandle fileHandleForUpdatingAtPath:self.videoTempPath];
    }
    //發(fā)起請求
    [self sendHttpRequst];
}

//網(wǎng)路請求方法
- (void)sendHttpRequst
{
    [_fileHandle seekToEndOfFile];
    NSURL *url = [NSURL URLWithString:_videoUrl];
    NSMutableURLRequest *requeset = [NSMutableURLRequest requestWithURL:url];
    
    //指定頭信息  當(dāng)前已下載的進度
    [requeset setValue:[NSString stringWithFormat:@"bytes=%ld-", _curruentLength] forHTTPHeaderField:@"Range"];
    
    //創(chuàng)建請求
    NSURLSessionDataTask *dataTask = [self.session dataTaskWithRequest:requeset];
    self.dataTask = dataTask;
    
    //發(fā)起請求
    [self.dataTask resume];
}

-(void)URLSession:(NSURLSession *)session task:(NSURLSessionTask *)task didCompleteWithError:(NSError *)error {
    
    if (error == nil) { //下載成功
        //當(dāng)前下載文件的臨時路徑
        NSURL *tempPathURL = [NSURL fileURLWithPath:self.videoTempPath];
        //緩存路徑
        NSURL *cachefileURL = [NSURL fileURLWithPath:self.videoCachePath];

        // 如果沒有該文件夾，創(chuàng)建文件夾
        if (![self.fileManager fileExistsAtPath:self.videoCachePath]) {
            [self.fileManager createDirectoryAtPath:self.videoCachePath withIntermediateDirectories:YES attributes:nil error:nil];
        }
        
        // 如果該路徑下文件已經(jīng)存在，就要先將其移除，在移動文件
        if ([self.fileManager fileExistsAtPath:[cachefileURL path] isDirectory:NULL]) {
            [self.fileManager removeItemAtURL:cachefileURL error:NULL];
        }
        //移動文件至緩存目錄
        [self.fileManager moveItemAtURL:tempPathURL toURL:cachefileURL error:NULL];
    }
}

三、自定義控制面板

該控制面板具有一個視頻播放器應(yīng)該具備的基本功能：播放與暫停、滑塊拖動播放、顯示視頻當(dāng)前播放時間和總的時間。另外我增加了一些手勢的操作：左右滑動實現(xiàn)前進和后退，上下滑動實現(xiàn)音量的加減，單擊實現(xiàn)面板的顯示與收起。
因為系統(tǒng)的滑塊UISlider滑塊控件要說實用倒也是能用，但是要改成自己想要的UI那也是件蛋疼的事情，所以我專門對滑塊又做了一次單獨的封裝，封裝好的滑塊控件LYSlider，想要改變其高度和大小只需要改變相應(yīng)的兩個屬性(trackHeight、thumbVisibleSize)就行了，當(dāng)然想到系統(tǒng)的滑塊和進度條是兩個分開的控件，在此我也將進度條一起封裝進去了，也就是滑塊里具有緩沖進度條的功能，只要你對bufferProgress這個屬性傳值，那么這個進度條就會顯示出來了。這里就上LYSlider初始化時候的代碼了，想要一談究竟的小伙伴就去我的github（地址在最后）下載源碼吧！碼字不容易寫代碼更不容易！記得給我star哦~


- (LYSlider *)videoSlider{
    if (!_videoSlider) {
        _videoSlider = [[LYSlider alloc] initWithFrame:CGRectMake(CGRectGetMaxX(self.currentLabel.frame) + 5, 0, _frame.size.width - CGRectGetMaxX(self.currentLabel.frame) - self.totalLabel.frame.size.width - 20 , BottomHeight)];
        
        //設(shè)置滑塊圖片樣式
        // 1 通過顏色創(chuàng)建 Image
         UIImage *normalImage = [UIImage createImageWithColor:[UIColor redColor] radius:5.0];
        
        // 2 通過view 創(chuàng)建 Image
        UIView *highlightView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 12, 12)];
        highlightView.layer.cornerRadius = 6;
        highlightView.layer.masksToBounds = YES;
        highlightView.backgroundColor = [UIColor redColor];
        UIImage *highlightImage = [UIImage creatImageWithView:highlightView];

        [_videoSlider setThumbImage:normalImage forState:UIControlStateNormal];
        [_videoSlider setThumbImage:highlightImage forState:UIControlStateHighlighted];
        
        _videoSlider.trackHeight = 1.5;    //設(shè)置軌道高度
        _videoSlider.thumbVisibleSize = 12;//設(shè)置滑塊（可見的）大小
        
        [_videoSlider addTarget:self action:@selector(sliderValueChange:) forControlEvents:UIControlEventValueChanged];//正在拖動
        [_videoSlider addTarget:self action:@selector(sliderTouchEnd:) forControlEvents:UIControlEventEditingDidEnd];//拖動結(jié)束
        [self.bottomView addSubview:_videoSlider];
    }
    return _videoSlider;
}
最后的話

本篇文章只是對播放器的簡單的封裝，如有不合理的地方還望指正！如果你看了這篇文章對你有些許的幫助，我也將感到非常榮幸！也請點擊下方的喜歡或關(guān)注本人

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

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

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