iOS中视频播放器的简单封装详解
要实现封装视频播放器，首先需要实现视频播放器，然后再去考虑怎样封装可以让以后自己使用起来方便快捷。iOS9之前可以使用MediaPlayer来进行视频的播放，iOS9之后系统推荐使用AVFoundation框架实现视频的播放。下面通过本文来看看详细的介绍吧。
前言
如果仅仅是播放视频两者的使用都非常简单，但是相比MediaPlayer，AVPlayer对于视频播放的可控制性更强一些，可以通过自定义的一些控件来实现视频的播放暂停等等。因此这里使用AVPlayer的视频播放。
视频播放器布局
首先使用xib创建CLAVPlayerView继承UIView用来承载播放器，这样我们在外部使用的时候，直接在控制器View或者Cell上添加CLAVPlayerView即可，至于播放器播放或者暂停等操作交给CLAVPlayerView来管理。下面来看一下CLAVPlayerView的结构。
CLAVPlayerView的结构
CLAVPlayerView的布局很简单，重点在于约束的添加和控件层次关系，添加约束只要自己挨个细心添加就没有问题，需要注意控件的层次关系，从上图中可以看出四个控件是分先后顺序平行添加在CLAVPlayerView上的，要注意他们的层次关系，避免相互遮挡。
视频播放器实现
布局完成之后，就是实现播放器功能，我们把播放器功能大致分为四部分来完成
一.通过播放按钮实现视频播放。
首先CLAVPlayerView加载时需要将播放器layer添加到imageView的layer上，此时蒙版和底部工具条一定都是隐藏的，点击中间播放按钮，视频开始播放并隐藏播放按钮。因此我们需要在CLAVPlayerView的awakeFromNib方法中，在加载CLAVPlayerView时对其做一些处理。
1、初始化AVPlayer和AVPlayerLayer，并将AVPlayerLayer添加到imageView的layer上，在layoutSubviews中设置playerLayer的frame
//初始化player和playerLayer
self.player=[[AVPlayeralloc]init];
self.playerLayer=[AVPlayerLayerplayerLayerWithPlayer:self.player];
//imageView上添加playerLayer
[self.imageView.layeraddSublayer:self.playerLayer];
-(void)layoutSubviews
{
[superlayoutSubviews];
self.playerLayer.frame=self.imageView.bounds;
}
2、根据播放视频的url创建AVPlayerItem
NSURLurl=[NSURLURLWithString:@"120.25.226.186:32812/resources/videos/minion_02.mp4"];
self.playerItem=[AVPlayerItemplayerItemWithURL:url];
3、设置Slider原点以及最大点最小点图片
//设置Slider
[self.progressSlidersetThumbImage:[UIImageimageNamed:@"thumbImage"]forState:UIControlStateNormal];
[self.progressSlidersetMaximumTrackImage:[UIImageimageNamed:@"MaximumTrackImage"]forState:UIControlStateNormal];
[self.progressSlidersetMinimumTrackImage:[UIImageimageNamed:@"MinimumTrackImage"]forState:UIControlStateNormal];
4、给imageView添加tap手势，点击imageView则显示工具栏
//imageView添加手势
UITapGestureRecognizertap=[[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(tapAction:)];
[self.imageViewaddGestureRecognizer:tap];
注意：如果使用xib给imageVIew添加手势，则通过loadNibNamed加载xib的时候需要获取返回数组的firstObject，得到的才是xib的View，如果获取lastObject，得到是的tap手势，会报错tap手势对象没有View的方法。
5、其他控件显示以及状态的设置
//隐藏遮盖版
self.coverView.hidden=YES;
//设置工具栏状态
self.toolView.alpha=0;
self.isShowToolView=NO;
//设置工具栏播放按钮状态
self.playOrPauseBtn.selected=NO;
这盖板只有播放完毕之后显现，点击重播之后又隐藏，因此使用hidden直接隐藏即可，而工具栏需要重复显示，并且我们为了能让工具栏的显示有动画效果，这里通过设置toolView的alpha来显示或隐藏工具栏，并通过isShowToolView来记录toolView的显示或隐藏。
6、中间播放按钮的点击
-(IBAction)playOrPauseBigBtnClick:(UIButton)sender{
//隐藏中间播放按钮，工具栏播放按钮为选中状态
sender.hidden=YES;
self.playOrPauseBtn.selected=YES;
//替换播放内容
[self.playerreplaceCurrentItemWithPlayerItem:self.playerItem];
[self.playerplay];
[selfaddProgressTimer];
}
此时，当我们点击中间播放按钮播放器就可以播放视频了。
二.工具条的显示与隐藏
在播放状态时，当点击imageView，就会弹出底部工具条，可以查看当前播放的时间，视频总时间或进行暂停视频、全屏播放等操作。如果没有操作，工具栏会在5秒之后自动隐藏。而当未播放状态时，点击imageView和中间播放按钮效果一样，开始播放视频。
1、添加定时器，5秒钟之后隐藏底部工具条，并提供移除定时器的方法。
/toolView显示时开始计时，5s后隐藏toolView/
-(void)addShowTime
{
self.showTime=[NSTimerscheduledTimerWithTimeInterval:5.0target:selfselector:@selector(upDateToolView)userInfo:nilrepeats:NO];
[[NSRunLoopmainRunLoop]addTimer:self.showTimeforMode:NSRunLoopCommonModes];
}
/将toolView隐藏/
-(void)upDateToolView
{
self.isShowToolView=!self.isShowToolView;
[UIViewanimateWithDuration:0.5animations:^{
self.toolView.alpha=0;
}];
}
/移除定时器/
-(void)removeShowTime
{
[self.showTimeinvalidate];
self.showTime=nil;
}
2、imageView的tap手势点击方法实现，这里分为几种情况，当视频未播放的时候，点击imageView不会显示工具栏，而是与点击中间播放按钮相同，开始播放视频，播放过程中点击imageView会显示工具栏，而如果此时点击了工具栏中的暂停按钮，播放暂停，则此时工具栏不会消失，重新开始播放视频，工具栏在5秒内消失。
/imageView的tap手势方法/
-(void)tapAction:(UITapGestureRecognizer)tap
{
//当未播放状态，点击imageView等同于点击中间播放按钮，开始播放视频
if(self.player.status==AVPlayerStatusUnknown){
[selfplayOrPauseBigBtnClick:self.playOrPauseBigBtn];
return;
}
//记录底部工具栏显示或隐藏的状态
self.isShowToolView=!self.isShowToolView;
//如果需要工具栏显示，添加动画显示
if(self.isShowToolView){
[UIViewanimateWithDuration:0.5animations:^{
self.toolView.alpha=1;
}];
//工具栏的播放按钮为播放状态的时候，添加计时器，5秒钟之后工具栏隐藏
if(self.playOrPauseBtn.selected){
[selfaddShowTime];
}
//如果需要隐藏工具栏，移除计时器，并将工具栏隐藏
}else{
[selfremoveShowTime];
[UIViewanimateWithDuration:0.5animations:^{
self.toolView.alpha=0;
}];
}
}
3、工具栏中播放/暂停按钮的点击也需要做一些处理，当处于暂停状态时，工具栏alpha值设为1，并将定时器移除，重新开始播放视频时，则重新添加定时器开始计时，5秒钟之后让工具栏消失。具体代码会在播放时间、Slider与视频播放的同步中详细贴出。
三.播放时间、Slider与视频播放的同步
底部工具条中播放时间、视频总时间以及Slider的滑动需要与视频播放时间进行同步。
1、添加视频播放和Slider的定时器，每1秒钟重复调用更新时间label和Slider滑块
/slider定时器添加/
-(void)addProgressTimer
{
self.progressTimer=[NSTimertimerWithTimeInterval:1.0target:selfselector:@selector(updateProgressInfo)userInfo:nilrepeats:YES];
[[NSRunLoopmainRunLoop]addTimer:self.progressTimerforMode:NSRunLoopCommonModes];
}
/移除slider定时器/
-(void)removeProgressTimer
{
[self.progressTimerinvalidate];
self.progressTimer=nil;
}
/更新slider和timeLabel/
-(void)updateProgressInfo
{
NSTimeIntervalcurrentTime=CMTimeGetSeconds(self.player.currentTime);
NSTimeIntervaldurationTime=CMTimeGetSeconds(self.player.currentItem.duration);
self.timeLabel.text=[selftimeToStringWithTimeInterval:currentTime];
self.allTimeLabel.text=[selftimeToStringWithTimeInterval:durationTime];
self.progressSlider.value=CMTimeGetSeconds(self.player.currentTime)/CMTimeGetSeconds(self.player.currentItem.www.hunanwang.net.duration);
if(self.progressSlider.value==1){
[selfremoveProgressTimer];
self.coverView.hidden=NO;
}
}
获取到的当前播放时间和总时间是CMTime类型的，需要将他们转化为NSTimeInterval并将秒转化为分钟和时间，将转化方法提出来
/转换播放时间和总时间的方法/
-(NSString)timeToStringWithTimeInterval:(NSTimeInterval)interval;
{
NSIntegerMin=interval/60;
NSIntegerSec=(NSInteger)interval%60;
NSStringintervalString=[NSStringstringWithFormat:@"%02ld:%02ld",Min,Sec];
returnintervalString;
}
2、当点击中间播放按钮开始播放的时候添加定时器，同步更新播放时间和Slider，当播放途中点击工具栏暂停按钮暂停播放，需要将视频暂停，并移除定时器，重新开始播放时在添加定时器，并开始播放
/toolView上暂停按钮的点击事件/
-(IBAction)playOrPauseBtnClick:(UIButton)sender{
//播放状态按钮selected为YES,暂停状态selected为NO。
sender.selected=!sender.selected;
if(!sender.selected){
self.toolView.alpha=1;
[selfremoveShowTime];
[self.playerpause];
[selfremoveProgressTimer];
}else{
[selfaddShowTime];
[self.playerplay];
[selfaddProgressTimer];
}
}
3、Slider的拖动跳跃播放视频
根据Slider滑动拖动滑动位置播放视频需要监听Slider的按下，拖动（数据改变），松开三个阶段。按下时移除定时器，拖动时根据拖动的值即时的计算当前播放时间并显示在label上，松开时计算当前播放时间，并跳转到当前播放时间进行播放。
/slider拖动和点击事件/
-(IBAction)touchDownSlider:(UISlider)sender{
//按下去移除监听器
[selfremoveProgressTimer];
[selfremoveShowTime];
}
-(IBAction)valueChangedSlider:(UISlider)sender{
//计算slider拖动的点对应的播放时间
NSTimeIntervalcurrentTime=CMTimeGetSeconds(self.player.currentItem.duration)sender.value;
self.timeLabel.text=[selftimeToStringWithTimeInterval:currentTime];
}
-(IBAction)touchUpInside:(UISlider)sender{
[selfaddProgressTimer];
//计算当前slider拖动对应的播放时间
NSTimeIntervalcurrentTime=CMTimeGetSeconds(self.player.currentItem.duration)sender.value;
//seekToTime:播放跳转到当前播放时间
[self.playerseekToTime:CMTimeMakeWithSeconds(currentTime,NSEC_PER_SEC)toleranceBefore:kCMTimeZerotoleranceAfter:kCMTimeZero];
[selfaddShowTime];
}
四.重播按钮和全屏播放按钮的实现
1、在定时器每秒调用的更新Slider的方法中判断当视频播放完毕之后，显示遮盖View，而重播按钮的实现，其实就是将Slider的value置为0并重新调用点击Slider松开时的方法，将当前播放时间置为0，重新隐藏遮盖View，并调用中间播放按钮开始播放。
/重播按钮点击/
-(IBAction)repeatBtnClick:(UIButton)sender{
self.progressSlider.value=0;
[selftouchUpInside:self.www.visa158.comprogressSlider];
self.coverView.hidden=YES;
[selfplayOrPauseBigBtnClick:self.playOrPauseBigBtn];
}
2、全屏播放的实现
全屏播放需要控制器Moda出一个全屏播放的控制器进行全屏播放，创建全屏播放控制器CLFullViewController，并使其支持左右方向的旋转，Moda出CLFullViewController控制器，并将CLAVPlayerView添加到CLFullViewController的View上并设置frame即可，当退出全屏时，dismiss掉CLFullViewController然后将CLAVPlayerView的frame设置为原来的值。
CLFullViewController中设置可以旋转和旋转方向
-(UIInterfaceOrientationMask)supportedInterfaceOrientations
{
returnUIInterfaceOrientationMaskLandscape;
}
-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
{
returnYES;
}
全屏播放按钮点击事件
/全屏按钮点击事件/
-(IBAction)fullViewBtnClick:(UIButton)sender{
sender.selected=!sender.selected;
[selfvideoplayViewSwitchOrientation:sender.selected];
}
/弹出全屏播放器/
-(void)videoplayViewSwitchOrientation:(BOOL)isFull
{
if(isFull){
[self.contrainerViewControllerpresentViewController:self.fullVcanimated:NOcompletion:^{
[self.fullVc.viewaddSubview:self];
self.center=self.fullVc.view.center;
[UIViewanimateWithDuration:0.15delay:0.0options:UIViewAnimationOptionLayoutSubviewsanimations:^{
self.frame=self.fullVc.view.bounds;
}completion:nil];
}];
}else{
[self.fullVcdismissViewControllerAnimated:NOcompletion:^{
[self.contrainerViewController.viewaddSubview:self];
[UIViewanimateWithDuration:0.15delay:0.0options:UIViewAnimationOptionLayoutSubviewsanimations:^{
self.frame=CGRectMake(0,200,self.contrainerViewController.view.bounds.size.width,self.contrainerViewController.view.bounds.size.width9/16);
}completion:nil];
}];
}
}
注意：这里需要拿到外面控制器来Moda出全屏播放控制器，所以给CLAVPlayerView添加contrainerViewController属性来拿到控制器。
简单封装
此时已经实现了播放器基本的功能，接下来考虑如何封装能使我们使用起来更加方便，其实我们已经将大部分封装完成，接下来需要做的就是提供简单易用的接口，使外部可以轻松调用实现播放器。
1、提供类方法快速创建播放器
+(instancetype)videoPlayView
{
return[[[NSBundlemainBundle]loadNibNamed:@"CLAVPlayerView"owner:niloptions:nil]lastObject];
}
2、播放视频的资源应该由外部决定，因此我们提供urlString属性用来接收视频的资源，然后通过重写其set方法来播放视频
/需要播放的视频资源set方法/
-(void)setUrlString:(NSString)urlString
{
_urlString=urlString;
NSURLurl=[NSURLURLWithString:urlString];
self.playerItem=[AVPlayerItemplayerItemWithURL:url];
}
此时我们在外部使用播放器就非常简单了，无需考虑内部逻辑，只需快速创建CLAVPlayerView，添加到控制器View，设置其frame，然后指定其播放视频资源就可以了。
-(void)viewDidLoad{
[superviewDidLoad];
[selfsetUpVideoPlayView];
self.playView.urlString=@"120.25.226.186:32812/resources/videos/minion_02.mp4";
}
-(void)setUpVideoPlayView
{
self.playView=[CLAVPlayerViewvideoPlayView];
self.playView.frame=CGRectMake(0,200,self.view.frame.size.width,self.view.frame.size.width9/16);
self.playView.contrainerViewController=self;
[self.viewaddSubview:self.playView];
}
最后，视频播放器大致这个样子
总结
其中还有许多需要完善的地方，一些功能也没有实现，例如两个占位的Button，将来可以用来下载视频和控制弹幕的开关，播放结束之后分享按钮也没有实现。以后实现后给大家继续分享，以上就是这篇文章的全部内容了，希望本文的内容对大家能有所帮助，如果有疑问大家可以留言交流。
|
|
