最近因公司需求，要做一個類似QQ空間視頻的輪播效果，故封裝了一個功能齊全的視頻播放器來實現項目的需求。現在我將封裝過程中遇到的難題寫出來和大家分享，以下只對重點進行說明，源碼里有非常詳細的注釋，有興趣的小伙伴可以下載參考。如果有此相似需求的小伙伴可以直接使用，在項目中播放視頻只需簡單兩步。
self.videoPlayer = [[LYVideoPlayer alloc] init];
[self.videoPlayer playWithUrl:self.videoUrl showView:self.view];
本篇文章將從三個大的模塊為大家介紹一個視頻播放器的封裝。
- 第一：視頻播放的實現；
- 第二：離線緩存的實現；
- 第三：自定義控制面板（自定義滑塊可隨意調整滑塊大小和軌道高度、手勢前進/后退、手勢音量加減）。
首先來看一下實現的效果：
一、視頻播放的實現
1、要現實視頻的播放，得先知道在AVFoundation框架下的三個類：AVPlayerItem、AVPlayer、AVPlayerLayer。AVPlayerItem是一個媒體資源管理類，負責數據的獲取與分發；AVPlayer負責解碼數據；AVPlayerLayer 是圖層顯示，用于數據的展示。
//1.創建播放器
self.currentPlayerItem = [AVPlayerItem playerItemWithURL:url];
self.player = [AVPlayer playerWithPlayerItem:self.currentPlayerItem];
self.currentPlayerLayer = [AVPlayerLayer playerLayerWithPlayer:self.player];
2、第一步已經創建好了播放器，接下來就是去播放了，那么問題就來了，咱們怎么知道什么時候可以開始播放了呢？這就需要去監聽播放器的狀態了，通過KVO監聽AVPlayerItem的狀態，獲得狀態后就可以去讓AVPlayer執行播放的方法了。
//1.通過KVO監聽AVPlayerItem的狀態
[self.currentPlayerItem addObserver:self forKeyPath:@"status" options:NSKeyValueObservingOptionNew context:nil];
//2.方法回調-根據狀態做相應的邏輯處理
- (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、視頻的播放很簡單，但是只有播放功能還遠遠不能滿足咱們的需求?。『冒?，繼續來。其中比較傷腦筋的是菊花（此菊花非彼菊花~）的顯示邏輯，有多傷腦筋我就不說太細了，反正我相信做過這個的小伙伴應該是明白菊花帶來的傷痛的。首先菊花的顯示第一次肯定是在加載數據的時候進行顯示的，再者就是在播放到沒有緩沖數據的時候進行顯示，這個很容易實現。實現方法就是利用AVPlayerItem進行監聽，代碼如下
//監聽到當前沒有緩沖數據
[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進行播放的監聽啊，當視頻播放的時候就讓菊花消失就行了。當然這是肯定的，會在這里監聽做事情，但是事情遠不止這一點。比如當正在緩沖的時候被暫停了，那么監聽視頻的播放來讓菊花消失肯定是不能滿足需求的，還有一個非常蛋疼的問題就是當拖動滑塊到沒有緩沖的地方的時候，這時候明明正在緩沖數據沒有播放，但是這個時候莫名其妙的就還會來到這個地方，所以我不得已在代碼里做了一些不人性化的操作，就是獲取當前的本地時間，然后在拖動滑塊的時候記錄下當前時間來和下次進入這個方法的時候作對比，如果是時間差大于1秒以上的一般就是真正的在播放了。
- (void)addObserver {
//監聽播放進度
__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;
/***** 這里是比較蛋疼的，當拖動滑塊到沒有緩沖的地方并且沒有開始播放時，也會走到這里 *************/
if (weakSelf.isCanToGetLocalTime) {
weakSelf.localTime = [weakSelf getLocalTime];
}
NSInteger timeNow = [weakSelf getLocalTime];
if (timeNow - weakSelf.localTime > 1.5) {
[weakSelf.videoPlayControl videoPlayerDidBeginPlay];
weakSelf.isCanToGetLocalTime = YES;
}
}];
}
二、離線緩存的實現
實現數據的離線緩存，我的做法是，當在建立起數據請求的時候，根據url生成一個文件路徑，讓數據下載到一個臨時的文件路徑下。第一種情況：當請求發起時一直下載到下載成功，這時候就將該文件移動到緩存目錄下緩存起來。第二種情況：當中斷下載數據時，對該臨時文件不做任何處理，然后再次播放該視頻請求數據時，根據url生成的路徑查找當前的臨時路徑下有無該文件，如果有說明該文件沒有下載完成，則需要讀到這個文件然后做斷點續傳操作，讓該文件繼續下載，而不是重頭開始下載。我在這里是提供了一個離線緩存的思路，如想深入研究離線緩存和斷點下載的小伙伴可以去這里看看【補充】NSURLSession 詳解離線斷點下載的實現
- (void)fileJudge{
//判斷當前目錄下有無已有下載的臨時文件
if ([_fileManager fileExistsAtPath:self.videoTempPath]) {
//存在已下載數據的文件
_fileHandle = [NSFileHandle fileHandleForUpdatingAtPath:self.videoTempPath];
_curruentLength = [_fileHandle seekToEndOfFile];
}else{
//不存在文件
_curruentLength = 0;
//創建文件
[_fileManager createFileAtPath:self.videoTempPath contents:nil attributes:nil];
_fileHandle = [NSFileHandle fileHandleForUpdatingAtPath:self.videoTempPath];
}
//發起請求
[self sendHttpRequst];
}
//網路請求方法
- (void)sendHttpRequst
{
[_fileHandle seekToEndOfFile];
NSURL *url = [NSURL URLWithString:_videoUrl];
NSMutableURLRequest *requeset = [NSMutableURLRequest requestWithURL:url];
//指定頭信息 當前已下載的進度
[requeset setValue:[NSString stringWithFormat:@"bytes=%ld-", _curruentLength] forHTTPHeaderField:@"Range"];
//創建請求
NSURLSessionDataTask *dataTask = [self.session dataTaskWithRequest:requeset];
self.dataTask = dataTask;
//發起請求
[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];
// 如果沒有該文件夾，創建文件夾
if (![self.fileManager fileExistsAtPath:self.videoCachePath]) {
[self.fileManager createDirectoryAtPath:self.videoCachePath withIntermediateDirectories:YES attributes:nil error:nil];
}
// 如果該路徑下文件已經存在，就要先將其移除，在移動文件
if ([self.fileManager fileExistsAtPath:[cachefileURL path] isDirectory:NULL]) {
[self.fileManager removeItemAtURL:cachefileURL error:NULL];
}
//移動文件至緩存目錄
[self.fileManager moveItemAtURL:tempPathURL toURL:cachefileURL error:NULL];
}
}
三、自定義控制面板
該控制面板具有一個視頻播放器應該具備的基本功能：播放與暫停、滑塊拖動播放、顯示視頻當前播放時間和總的時間。另外我增加了一些手勢的操作：左右滑動實現前進和后退，上下滑動實現音量的加減，單擊實現面板的顯示與收起。
因為系統的滑塊UISlider滑塊控件要說實用倒也是能用，但是要改成自己想要的UI那也是件蛋疼的事情，所以我專門對滑塊又做了一次單獨的封裝，封裝好的滑塊控件LYSlider，想要改變其高度和大小只需要改變相應的兩個屬性(trackHeight、thumbVisibleSize)就行了，當然想到系統的滑塊和進度條是兩個分開的控件，在此我也將進度條一起封裝進去了，也就是滑塊里具有緩沖進度條的功能，只要你對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 通過顏色創建 Image
UIImage *normalImage = [UIImage createImageWithColor:[UIColor redColor] radius:5.0];
// 2 通過view 創建 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];//拖動結束
[self.bottomView addSubview:_videoSlider];
}
return _videoSlider;
}
最后的話
本篇文章只是對播放器的簡單的封裝，如有不合理的地方還望指正！如果你看了這篇文章對你有些許的幫助，我也將感到非常榮幸！也請點擊下方的喜歡或關注本人
