iOS中视频播放器的简单封装详解

1、iOS中视频播放器的简单封装详解要实现封装视频播放器，首先需要实现视频播放器，然后再去考虑怎样封装可以让以后自己使用起来方便快捷。iOS9之前可以使用MediaPlayer来进行视频的播放，iOS9之后系统推荐使用AVFoundation框架实现视频的播放。下面通过本文来看看详细的介绍吧。前言如果仅仅是播放视频两者的使用都非常简单，但是相比MediaPlayer，AVPlayer对于视频播放的可控制性更强一些，可以通过自定义的一些控件来实现视频的播放暂停等等。因此这里使用AVPlayer的视频播放。视频播放器布局首先使用xib创建CLAVPlayerView继承UIView用来承载播放器，这样

2、我们在外部使用的时候，直接在控制器View或者Cell上添加CLAVPlayerView即可，至于播放器播放或者暂停等操作交给CLAVPlayerView来管理。下面来看一下CLAVPlayerView的结构。CLAVPlayerView的结构CLAVPlayerView的布局很简单，重点在于约束的添加和控件层次关系，添加约束只要自己挨个细心添加就没有问题，需要注意控件的层次关系，从上图中可以看出四个控件是分先后顺序平行添加在CLAVPlayerView上的，要注意他们的层次关系，避免相互遮挡。视频播放器实现布局完成之后，就是实现播放器功能，我们把播放器功能大致分为四部分来完成一. 通过播放按

3、钮实现视频播放。首先CLAVPlayerView加载时需要将播放器layer添加到imageView的layer上，此时蒙版和底部工具条一定都是隐藏的，点击中间播放按钮，视频开始播放并隐藏播放按钮。因此我们需要在CLAVPlayerView的awakeFromNib方法中，在加载CLAVPlayerView时对其做一些处理。1、初始化AVPlayer和AVPlayerLayer，并将AVPlayerLayer添加到imageView的layer上，在layoutSubviews中设置playerLayer的frame/ 初始化player 和playerLayerself.player = A

4、VPlayer allocinit;self.playerLayer = AVPlayerLayer playerLayerWithPlayer:self.player;/ imageView上添加playerLayerself.imageView.layer addSublayer:self.playerLayer;-(void)layoutSubviewssuper layoutSubviews;self.playerLayer.frame = self.imageView.bounds;2、根据播放视频的url创建AVPlayerItemNSURL *url = NSURL URLWit

5、hString:86:32812/resources/videos/minion_02.mp4;self.playerItem = AVPlayerItem playerItemWithURL:url;3、设置Slider原点以及最大点最小点图片/ 设置SgressSlider setThumbImage:UIImage imageNamed:thumbImage forState:UIControlStateNormal;gressSlider setMaximumTrackImage:UIImage imageNamed:M

6、aximumTrackImage forState:UIControlStateNormal;gressSlider setMinimumTrackImage:UIImage imageNamed:MinimumTrackImage forState:UIControlStateNormal;4、给imageView添加tap手势，点击imageView则显示工具栏/imageView添加手势UITapGestureRecognizer *tap = UITapGestureRecognizer allocinitWithTarget:self action:selector(

7、tapAction:);self.imageView addGestureRecognizer:tap;注意：如果使用xib给imageVIew添加手势，则通过loadNibNamed加载xib的时候需要获取返回数组的firstObject，得到的才是xib的View，如果获取lastObject，得到是的tap手势，会报错tap手势对象没有View的方法。5、其他控件显示以及状态的设置/ 隐藏遮盖版self.coverView.hidden = YES;/ 设置工具栏状态self.toolView.alpha = 0;self.isShowToolView = NO;/ 设置工具栏播放按钮状

8、态self.playOrPauseBtn.selected = NO;这盖板只有播放完毕之后显现，点击重播之后又隐藏，因此使用hidden直接隐藏即可，而工具栏需要重复显示，并且我们为了能让工具栏的显示有动画效果，这里通过设置toolView的alpha来显示或隐藏工具栏，并通过isShowToolView来记录toolView的显示或隐藏。6、中间播放按钮的点击- (IBAction)playOrPauseBigBtnClick:(UIButton *)sender / 隐藏中间播放按钮，工具栏播放按钮为选中状态sender.hidden = YES;self.playOrPauseBtn.

9、selected = YES;/ 替换播放内容self.player replaceCurrentItemWithPlayerItem:self.playerItem;self.player play;self addProgressTimer;此时，当我们点击中间播放按钮播放器就可以播放视频了。二. 工具条的显示与隐藏在播放状态时，当点击imageView，就会弹出底部工具条，可以查看当前播放的时间，视频总时间或进行暂停视频、全屏播放等操作。如果没有操作，工具栏会在5秒之后自动隐藏。而当未播放状态时，点击imageView和中间播放按钮效果一样，开始播放视频。1、添加定时器，5秒钟之后隐藏底

10、部工具条，并提供移除定时器的方法。/* toolView显示时开始计时，5s后隐藏toolView */-(void)addShowTimeself.showTime = NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:selector(upDateToolView) userInfo:nil repeats:NO;NSRunLoop mainRunLoopaddTimer:self.showTime forMode:NSRunLoopCommonModes;/* 将toolView隐藏 */-(void)upDa

11、teToolViewself.isShowToolView = !self.isShowToolView;UIView animateWithDuration:0.5 animations:self.toolView.alpha = 0;/*移除定时器*/-(void)removeShowTimeself.showTime invalidate;self.showTime = nil;2、imageView的tap手势点击方法实现，这里分为几种情况，当视频未播放的时候，点击imageView不会显示工具栏，而是与点击中间播放按钮相同，开始播放视频，播放过程中点击imageView会显示工具栏，

12、而如果此时点击了工具栏中的暂停按钮，播放暂停，则此时工具栏不会消失，重新开始播放视频，工具栏在5秒内消失。/* imageView的tap手势方法 */-(void)tapAction:(UITapGestureRecognizer *)tap/ 当未播放状态，点击imageView等同于点击中间播放按钮，开始播放视频if (self.player.status = AVPlayerStatusUnknown) self playOrPauseBigBtnClick:self.playOrPauseBigBtn;return;/ 记录底部工具栏显示或隐藏的状态self.isShowToolVi

13、ew = !self.isShowToolView;/ 如果需要工具栏显示，添加动画显示if (self.isShowToolView)UIView animateWithDuration:0.5 animations:self.toolView.alpha = 1;/ 工具栏的播放按钮为播放状态的时候，添加计时器，5秒钟之后工具栏隐藏if (self.playOrPauseBtn.selected) self addShowTime;/ 如果需要隐藏工具栏，移除计时器，并将工具栏隐藏elseself removeShowTime;UIView animateWithDuration:0.5

14、animations:self.toolView.alpha = 0;3、工具栏中播放/暂停按钮的点击也需要做一些处理，当处于暂停状态时，工具栏alpha值设为1，并将定时器移除，重新开始播放视频时，则重新添加定时器开始计时，5秒钟之后让工具栏消失。具体代码会在播放时间、Slider与视频播放的同步中详细贴出。三. 播放时间、Slider与视频播放的同步底部工具条中播放时间、视频总时间以及Slider的滑动需要与视频播放时间进行同步。1、添加视频播放和Slider的定时器，每1秒钟重复调用更新时间label和Slider滑块/* slider定时器添加 */-(void)addProgress

15、TgressTimer = NSTimer timerWithTimeInterval:1.0 target:self selector:selector(updateProgressInfo) userInfo:nil repeats:YES;NSRunLoop mainRunLoopaddTimer:gressTimer forMode:NSRunLoopCommonModes;/* 移除slider定时器 */-(void)removeProgressTgressTimer invalidate;gressT

16、imer = nil;/* 更新slider和timeLabel */- (void)updateProgressInfoNSTimeInterval currentTime = CMTimeGetSeconds(self.player.currentTime);NSTimeInterval durationTime = CMTimeGetSeconds(self.player.currentItem.duration);self.timeLabel.text = self timeToStringWithTimeInterval:currentTime;self.allTimeLabel.t

17、ext = self timeToStringWithTimeInterval:durationTime;gressSlider.value = CMTimeGetSeconds(self.player.currentTime) / CMTimeGetSeconds(self.player.currentI.duration);if (gressSlider.value = 1) self removeProgressTimer;self.coverView.hidden = NO; 获取到的当前播放时间和总时间是CMTime类型的，需要将他们转化为NSTime

18、Interval并将秒转化为分钟和时间，将转化方法提出来/* 转换播放时间和总时间的方法 */-(NSString *)timeToStringWithTimeInterval:(NSTimeInterval)interval;NSInteger Min = interval / 60;NSInteger Sec = (NSInteger)interval % 60;NSString *intervalString = NSString stringWithFormat:%02ld:%02ld,Min,Sec;return intervalString;2、当点击中间播放按钮开始播放的时候添加

19、定时器，同步更新播放时间和Slider，当播放途中点击工具栏暂停按钮暂停播放，需要将视频暂停，并移除定时器，重新开始播放时在添加定时器，并开始播放/* toolView上暂停按钮的点击事件 */- (IBAction)playOrPauseBtnClick:(UIButton *)sender / 播放状态按钮selected为YES,暂停状态selected为NO。sender.selected = !sender.selected;if (!sender.selected) self.toolView.alpha = 1;self removeShowTime;self.player pa

20、use;self removeProgressTimer;elseself addShowTime;self.player play;self addProgressTimer;3、Slider的拖动跳跃播放视频根据Slider滑动拖动滑动位置播放视频需要监听Slider的按下，拖动（数据改变），松开三个阶段。按下时移除定时器，拖动时根据拖动的值即时的计算当前播放时间并显示在label上，松开时计算当前播放时间，并跳转到当前播放时间进行播放。/* slider拖动和点击事件 */- (IBAction)touchDownSlider:(UISlider *)sender / 按下去 移除监听器

21、self removeProgressTimer;self removeShowTime;- (IBAction)valueChangedSlider:(UISlider *)sender / 计算slider拖动的点对应的播放时间NSTimeInterval currentTime = CMTimeGetSeconds(self.player.currentItem.duration) * sender.value;self.timeLabel.text = self timeToStringWithTimeInterval:currentTime;- (IBAction)touchUpIn

22、side:(UISlider *)sender self addProgressTimer;/计算当前slider拖动对应的播放时间NSTimeInterval currentTime = CMTimeGetSeconds(self.player.currentItem.duration) * sender.value;/ seekToTime:播放跳转到当前播放时间self.player seekToTime:CMTimeMakeWithSeconds(currentTime, NSEC_PER_SEC) toleranceBefore:kCMTimeZero toleranceAfter:

23、kCMTimeZero;self addShowTime;四. 重播按钮和全屏播放按钮的实现1、在定时器每秒调用的更新Slider的方法中判断当视频播放完毕之后，显示遮盖View，而重播按钮的实现，其实就是将Slider的value置为0并重新调用点击Slider松开时的方法，将当前播放时间置为0，重新隐藏遮盖View，并调用中间播放按钮开始播放。/* 重播按钮点击 */- (IBAction)repeatBtnClick:(UIButton *)sender gressSlider.value = 0;self touchUpInside:progressSlider;sel

24、f.coverView.hidden = YES;self playOrPauseBigBtnClick:self.playOrPauseBigBtn;2、全屏播放的实现全屏播放需要控制器Moda出一个全屏播放的控制器进行全屏播放，创建全屏播放控制器CLFullViewController，并使其支持左右方向的旋转，Moda出CLFullViewController控制器，并将CLAVPlayerView添加到CLFullViewController的View上并设置frame即可，当退出全屏时，dismiss掉CLFullViewController然后将CLAVPlayerView的fra

25、me设置为原来的值。CLFullViewController中设置可以旋转和旋转方向- (UIInterfaceOrientationMask)supportedInterfaceOrientationsreturn UIInterfaceOrientationMaskLandscape;- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientationreturn YES;全屏播放按钮点击事件/* 全屏按钮点击事件 */- (IBAction)fullViewBtnClic

26、k:(UIButton *)sender sender.selected = !sender.selected;self videoplayViewSwitchOrientation:sender.selected;/* 弹出全屏播放器 */- (void)videoplayViewSwitchOrientation:(BOOL)isFullif (isFull) self.contrainerViewController presentViewController:self.fullVc animated:NO completion:self.fullVc.view addSubview:s

27、elf;self.center = self.fullVc.view.center;UIView animateWithDuration:0.15 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:self.frame = self.fullVc.view.bounds; completion:nil; else self.fullVc dismissViewControllerAnimated:NO completion:self.contrainerViewController.view addSubview:

28、self;UIView animateWithDuration:0.15 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:self.frame = CGRectMake(0, 200, self.contrainerViewController.view.bounds.size.width, self.contrainerViewController.view.bounds.size.width * 9 / 16); completion:nil;注意：这里需要拿到外面控制器来Moda出全屏播放控制器，所以给CLAVPlayerView添加contrainerViewController属性来拿到控制器。简单封装此时已经实现了播放器基本的功能，接下来考虑如何封装能使我们使用起来更加方便，其实我们已经将大部分封装完成，接下来需要做的就是提供简单易用的接口，使外部可以轻松调用实现播放器。1、提供类方法快速创建播放器+ (instancetype)videoPlayViewretu