前言

如果僅僅是播放視頻兩者的使用都非常簡單，但是相比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 = [[AVPlayer alloc]init];
self.playerLayer = [AVPlayerLayer playerLayerWithPlayer:self.player];
// imageView上添加playerLayer
[self.imageView.layer addSublayer:self.playerLayer];

-(void)layoutSubviews
{
 [super layoutSubviews];
 self.playerLayer.frame = self.imageView.bounds;
}

2、根據播放視頻的url創建AVPlayerItem

NSURL *url = [NSURL URLWithString:@"http://120.25.226.186:32812/resources/videos/minion_02.mp4"];
self.playerItem = [AVPlayerItem playerItemWithURL:url];

3、設置Slider原點以及最大點最小點圖片

// 設置Slider
[self.progressSlider setThumbImage:[UIImage imageNamed:@"thumbImage"] forState:UIControlStateNormal];
[self.progressSlider setMaximumTrackImage:[UIImage imageNamed:@"MaximumTrackImage"] forState:UIControlStateNormal];
[self.progressSlider setMinimumTrackImage:[UIImage imageNamed:@"MinimumTrackImage"] forState:UIControlStateNormal];

4、給imageView添加tap手勢，點擊imageView則顯示工具欄

//imageView添加手勢
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(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;
// 設置工具欄播放按鈕狀態
self.playOrPauseBtn.selected = NO;

這蓋板只有播放完畢之後顯現，點擊重播之後又隱藏，因此使用hidden直接隱藏即可，而工具欄需要重復顯示，並且我們為了能讓工具欄的顯示有動畫效果，這裡通過設置toolView的alpha來顯示或隱藏工具欄，並通過isShowToolView來記錄toolView的顯示或隱藏。

6、中間播放按鈕的點擊

- (IBAction)playOrPauseBigBtnClick:(UIButton *)sender {
 // 隱藏中間播放按鈕，工具欄播放按鈕為選中狀態
 sender.hidden = YES;
 self.playOrPauseBtn.selected = YES;
 // 替換播放內容
 [self.player replaceCurrentItemWithPlayerItem:self.playerItem];
 [self.player play];
 [self addProgressTimer];
}

此時，當我們點擊中間播放按鈕播放器就可以播放視頻了。

二. 工具條的顯示與隱藏

在播放狀態時，當點擊imageView，就會彈出底部工具條，可以查看當前播放的時間，視頻總時間或進行暫停視頻、全屏播放等操作。如果沒有操作，工具欄會在5秒之後自動隱藏。而當未播放狀態時，點擊imageView和中間播放按鈕效果一樣，開始播放視頻。

1、添加定時器，5秒鐘之後隱藏底部工具條，並提供移除定時器的方法。

/** toolView顯示時開始計時，5s後隱藏toolView */
-(void)addShowTime
{
 self.showTime = [NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:@selector(upDateToolView) userInfo:nil repeats:NO];
 [[NSRunLoop mainRunLoop]addTimer:self.showTime forMode:NSRunLoopCommonModes];
}
/** 將toolView隱藏 */
-(void)upDateToolView
{
 self.isShowToolView = !self.isShowToolView;
 [UIView animateWithDuration:0.5 animations:^{
  self.toolView.alpha = 0;
 }];
}
/**移除定時器*/
-(void)removeShowTime
{
 [self.showTime invalidate];
 self.showTime = nil;
}

2、imageView的tap手勢點擊方法實現，這裡分為幾種情況，當視頻未播放的時候，點擊imageView不會顯示工具欄，而是與點擊中間播放按鈕相同，開始播放視頻，播放過程中點擊imageView會顯示工具欄，而如果此時點擊了工具欄中的暫停按鈕，播放暫停，則此時工具欄不會消失，重新開始播放視頻，工具欄在5秒內消失。

/** imageView的tap手勢方法 */
-(void)tapAction:(UITapGestureRecognizer *)tap
{
 // 當未播放狀態，點擊imageView等同於點擊中間播放按鈕，開始播放視頻
 if (self.player.status == AVPlayerStatusUnknown) {
  [self playOrPauseBigBtnClick:self.playOrPauseBigBtn];
  return;
 }
 // 記錄底部工具欄顯示或隱藏的狀態
 self.isShowToolView = !self.isShowToolView;
 // 如果需要工具欄顯示，添加動畫顯示
 if (self.isShowToolView){
  [UIView animateWithDuration:0.5 animations:^{
   self.toolView.alpha = 1;
  }];
  // 工具欄的播放按鈕為播放狀態的時候，添加計時器，5秒鐘之後工具欄隱藏
  if (self.playOrPauseBtn.selected) {
   [self addShowTime];
  }
 // 如果需要隱藏工具欄，移除計時器，並將工具欄隱藏
 }else{
  [self removeShowTime];
  [UIView animateWithDuration:0.5 animations:^{
   self.toolView.alpha = 0;
  }];
 }
}

3、工具欄中播放/暫停按鈕的點擊也需要做一些處理，當處於暫停狀態時，工具欄alpha值設為1，並將定時器移除，重新開始播放視頻時，則重新添加定時器開始計時，5秒鐘之後讓工具欄消失。具體代碼會在播放時間、Slider與視頻播放的同步中詳細貼出。

三. 播放時間、Slider與視頻播放的同步

底部工具條中播放時間、視頻總時間以及Slider的滑動需要與視頻播放時間進行同步。

1、添加視頻播放和Slider的定時器，每1秒鐘重復調用更新時間label和Slider滑塊

 /** slider定時器添加 */
 -(void)addProgressTimer
 {
  self.progressTimer = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(updateProgressInfo) userInfo:nil repeats:YES];
  [[NSRunLoop mainRunLoop]addTimer:self.progressTimer forMode:NSRunLoopCommonModes];
 }
 /** 移除slider定時器 */
 -(void)removeProgressTimer
 {
  [self.progressTimer invalidate];
  self.progressTimer = nil;
 }
 /** 更新slider和timeLabel */
 - (void)updateProgressInfo
 {
 NSTimeInterval currentTime = CMTimeGetSeconds(self.player.currentTime);
  NSTimeInterval durationTime = CMTimeGetSeconds(self.player.currentItem.duration);

  self.timeLabel.text = [self timeToStringWithTimeInterval:currentTime];
  self.allTimeLabel.text = [self timeToStringWithTimeInterval:durationTime];
  self.progressSlider.value = CMTimeGetSeconds(self.player.currentTime) / CMTimeGetSeconds(self.player.currentItem.duration);

  if (self.progressSlider.value == 1) {
   [self removeProgressTimer];
   self.coverView.hidden = NO;
  } 
 }

獲取到的當前播放時間和總時間是CMTime類型的，需要將他們轉化為NSTimeInterval並將秒轉化為分鐘和時間，將轉化方法提出來

/** 轉換播放時間和總時間的方法 */
-(NSString *)timeToStringWithTimeInterval:(NSTimeInterval)interval;
{
 NSInteger Min = interval / 60;
 NSInteger Sec = (NSInteger)interval % 60;
 NSString *intervalString = [NSString stringWithFormat:@"%02ld:%02ld",Min,Sec];
 return intervalString;
}

2、當點擊中間播放按鈕開始播放的時候添加定時器，同步更新播放時間和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 pause];
  [self removeProgressTimer];
 }else{
  [self addShowTime];
  [self.player play];
  [self addProgressTimer];
 }
}

3、Slider的拖動跳躍播放視頻

根據Slider滑動拖動滑動位置播放視頻需要監聽Slider的按下，拖動（數據改變），松開三個階段。按下時移除定時器，拖動時根據拖動的值即時的計算當前播放時間並顯示在label上，松開時計算當前播放時間，並跳轉到當前播放時間進行播放。

/** slider拖動和點擊事件 */
- (IBAction)touchDownSlider:(UISlider *)sender {
 // 按下去 移除監聽器
 [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)touchUpInside:(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:kCMTimeZero];
 [self addShowTime];
}

四. 重播按鈕和全屏播放按鈕的實現

1、在定時器每秒調用的更新Slider的方法中判斷當視頻播放完畢之後，顯示遮蓋View，而重播按鈕的實現，其實就是將Slider的value置為0並重新調用點擊Slider松開時的方法，將當前播放時間置為0，重新隱藏遮蓋View，並調用中間播放按鈕開始播放。

/** 重播按鈕點擊 */
- (IBAction)repeatBtnClick:(UIButton *)sender {
 self.progressSlider.value = 0;
 [self touchUpInside:self.progressSlider];
 self.coverView.hidden = YES;
 [self playOrPauseBigBtnClick:self.playOrPauseBigBtn];
}

2、全屏播放的實現

全屏播放需要控制器Moda出一個全屏播放的控制器進行全屏播放，創建全屏播放控制器CLFullViewController，並使其支持左右方向的旋轉，Moda出CLFullViewController控制器，並將CLAVPlayerView添加到CLFullViewController的View上並設置frame即可，當退出全屏時，dismiss掉CLFullViewController然後將CLAVPlayerView的frame設置為原來的值。
CLFullViewController中設置可以旋轉和旋轉方向

- (UIInterfaceOrientationMask)supportedInterfaceOrientations
{
 return UIInterfaceOrientationMaskLandscape;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
{
 return YES;
}

全屏播放按鈕點擊事件

/** 全屏按鈕點擊事件 */
- (IBAction)fullViewBtnClick:(UIButton *)sender {
 sender.selected = !sender.selected;
 [self videoplayViewSwitchOrientation:sender.selected];
}
/** 彈出全屏播放器 */
- (void)videoplayViewSwitchOrientation:(BOOL)isFull
{
 if (isFull) {
  [self.contrainerViewController presentViewController:self.fullVc animated:NO completion:^{
   [self.fullVc.view addSubview:self];
   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: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)videoPlayView
{
 return [[[NSBundle mainBundle]loadNibNamed:@"CLAVPlayerView" owner:nil options:nil]lastObject];
}

2、播放視頻的資源應該由外部決定，因此我們提供urlString屬性用來接收視頻的資源，然後通過重寫其set方法來播放視頻
/** 需要播放的視頻資源set方法 */

-(void)setUrlString:(NSString *)urlString
{
 _urlString = urlString;
 NSURL *url = [NSURL URLWithString:urlString];
 self.playerItem = [AVPlayerItem playerItemWithURL:url];
}

此時我們在外部使用播放器就非常簡單了，無需考慮內部邏輯，只需快速創建CLAVPlayerView，添加到控制器View，設置其frame，然後指定其播放視頻資源就可以了。

- (void)viewDidLoad {
 [super viewDidLoad];
 [self setUpVideoPlayView]; 
 self.playView.urlString = @"http://120.25.226.186:32812/resources/videos/minion_02.mp4";
}
-(void)setUpVideoPlayView
{
 self.playView = [CLAVPlayerView videoPlayView];
 self.playView.frame = CGRectMake(0, 200, self.view.frame.size.width, self.view.frame.size.width * 9 / 16);
 self.playView.contrainerViewController = self;
 [self.view addSubview:self.playView];
}

最後，視頻播放器大致這個樣子

總結

其中還有許多需要完善的地方，一些功能也沒有實現，例如兩個占位的Button，將來可以用來下載視頻和控制彈幕的開關，播放結束之後分享按鈕也沒有實現。以後實現後給大家繼續分享，以上就是這篇文章的全部內容了，希望本文的內容對大家能有所幫助，如果有疑問大家可以留言交流。