最近因公司需求感憾,要做一個類似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)的效果:
一蜀漆、視頻播放的實現(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;
}
最后的話
本篇文章只是對播放器的簡單的封裝蒲跨,如有不合理的地方還望指正!如果你看了這篇文章對你有些許的幫助详囤,我也將感到非常榮幸财骨!也請點擊下方的喜歡或關注本人