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

最近因公司需求感憾,要做一個類似QQ空間視頻的輪播效果蜡励,故封裝了一個功能齊全的視頻播放器來實現(xiàn)項目的需求。現(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是一個媒體資源管理類鲜侥,負責數(shù)據(jù)的獲取與分發(fā)褂始;AVPlayer負責解碼數(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)做相應的邏輯處理
- (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ù)來斑司。其中比較傷腦筋的是菊花(此菊花非彼菊花~)的顯示邏輯渗饮,有多傷腦筋我就不說太細了,反正我相信做過這個的小伙伴應該是明白菊花帶來的傷痛的宿刮。首先菊花的顯示第一次肯定是在加載數(shù)據(jù)的時候進行顯示的互站,再者就是在播放到?jīng)]有緩沖數(shù)據(jù)的時候進行顯示,這個很容易實現(xiàn)僵缺。實現(xiàn)方法就是利用AVPlayerItem進行監(jiān)聽胡桃,代碼如下

 //監(jiān)聽到當前沒有緩沖數(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)聽啊,當視頻播放的時候就讓菊花消失就行了自脯。當然這是肯定的之景,會在這里監(jiān)聽做事情,但是事情遠不止這一點冤今。比如當正在緩沖的時候被暫停了闺兢,那么監(jiān)聽視頻的播放來讓菊花消失肯定是不能滿足需求的,還有一個非常蛋疼的問題就是當拖動滑塊到?jīng)]有緩沖的地方的時候戏罢,這時候明明正在緩沖數(shù)據(jù)沒有播放屋谭,但是這個時候莫名其妙的就還會來到這個地方,所以我不得已在代碼里做了一些不人性化的操作龟糕,就是獲取當前的本地時間桐磁,然后在拖動滑塊的時候記錄下當前時間來和下次進入這個方法的時候作對比,如果是時間差大于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;
        
        /***** 這里是比較蛋疼的我擂,當拖動滑塊到?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ù)的離線緩存校摩,我的做法是看峻,當在建立起數(shù)據(jù)請求的時候,根據(jù)url生成一個文件路徑衙吩,讓數(shù)據(jù)下載到一個臨時的文件路徑下互妓。第一種情況:當請求發(fā)起時一直下載到下載成功,這時候就將該文件移動到緩存目錄下緩存起來坤塞。第二種情況:當中斷下載數(shù)據(jù)時冯勉,對該臨時文件不做任何處理,然后再次播放該視頻請求數(shù)據(jù)時摹芙,根據(jù)url生成的路徑查找當前的臨時路徑下有無該文件灼狰,如果有說明該文件沒有下載完成,則需要讀到這個文件然后做斷點續(xù)傳操作浮禾,讓該文件繼續(xù)下載交胚,而不是重頭開始下載。我在這里是提供了一個離線緩存的思路伐厌,如想深入研究離線緩存和斷點下載的小伙伴可以去這里看看【補充】NSURLSession 詳解離線斷點下載的實現(xiàn)


- (void)fileJudge{
    //判斷當前目錄下有無已有下載的臨時文件
    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];
    
    //指定頭信息  當前已下載的進度
    [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) { //下載成功
        //當前下載文件的臨時路徑
        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];
    }
}

三军熏、自定義控制面板

該控制面板具有一個視頻播放器應該具備的基本功能:播放與暫停、滑塊拖動播放卷扮、顯示視頻當前播放時間和總的時間荡澎。另外我增加了一些手勢的操作:左右滑動實現(xiàn)前進和后退,上下滑動實現(xiàn)音量的加減晤锹,單擊實現(xiàn)面板的顯示與收起摩幔。
因為系統(tǒng)的滑塊UISlider滑塊控件要說實用倒也是能用,但是要改成自己想要的UI那也是件蛋疼的事情鞭铆,所以我專門對滑塊又做了一次單獨的封裝,封裝好的滑塊控件LYSlider车遂,想要改變其高度和大小只需要改變相應的兩個屬性(trackHeight封断、thumbVisibleSize)就行了,當然想到系統(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)];
        
        //設置滑塊圖片樣式
        // 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;    //設置軌道高度
        _videoSlider.thumbVisibleSize = 12;//設置滑塊(可見的)大小
        
        [_videoSlider addTarget:self action:@selector(sliderValueChange:) forControlEvents:UIControlEventValueChanged];//正在拖動
        [_videoSlider addTarget:self action:@selector(sliderTouchEnd:) forControlEvents:UIControlEventEditingDidEnd];//拖動結(jié)束
        [self.bottomView addSubview:_videoSlider];
    }
    return _videoSlider;
}
最后的話

本篇文章只是對播放器的簡單的封裝蒲跨,如有不合理的地方還望指正!如果你看了這篇文章對你有些許的幫助详囤,我也將感到非常榮幸财骨!也請點擊下方的喜歡或關注本人

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市藏姐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌该贾,老刑警劉巖羔杨,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異杨蛋,居然都是意外死亡兜材,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進店門逞力,熙熙樓的掌柜王于貴愁眉苦臉地迎上來曙寡,“玉大人,你說我怎么就攤上這事寇荧【偈” “怎么了?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵揩抡,是天一觀的道長户侥。 經(jīng)常有香客問我,道長峦嗤,這世上最難降的妖魔是什么蕊唐? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮烁设,結(jié)果婚禮上替梨,老公的妹妹穿的比我還像新娘。我一直安慰自己装黑,他們只是感情好副瀑,可當我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著曹体,像睡著了一般俗扇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上箕别,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天铜幽,我揣著相機與錄音滞谢,去河邊找鬼。 笑死除抛,一個胖子當著我的面吹牛狮杨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播到忽,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼橄教,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了喘漏?” 一聲冷哼從身側(cè)響起护蝶,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎翩迈,沒想到半個月后持灰,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡负饲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年堤魁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片返十。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡妥泉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出洞坑,到底是詐尸還是另有隱情盲链,我是刑警寧澤,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布检诗,位于F島的核電站匈仗,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏逢慌。R本人自食惡果不足惜悠轩,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望攻泼。 院中可真熱鬧火架,春花似錦、人聲如沸忙菠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽牛欢。三九已至骡男,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間傍睹,已是汗流浹背隔盛。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工犹菱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人吮炕。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓腊脱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親龙亲。 傳聞我的和親對象是個殘疾皇子陕凹,可洞房花燭夜當晚...
    茶點故事閱讀 45,440評論 2 359

推薦閱讀更多精彩內(nèi)容