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

前言

如果仅仅是播放视频两者的使用都非常简单，但是相比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，将来可以用来下载视频和控制弹幕的开关，播放结束之后分享按钮也没有实现。以后实现后给大家继续分享，以上就是这篇文章的全部内容了，希望本文的内容对大家能有所帮助，如果有疑问大家可以留言交流。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ios视频播放器
ios简单的封装
ios播放器封装单例、ios简单音乐播放器、ios 封装sdk详解、ios 封装简单button、封装音乐播放器，以便于您获取更多的相关知识。

时间： 2024-09-01 03:28:31

iOS中视频播放器的简单封装详解_IOS的相关文章

IOS开发中NSURL的基本操作及用法详解_IOS

NSURL其实就是我们在浏览器上看到的网站地址,这不就是一个字符串么,为什么还要在写一个NSURL呢,主要是因为网站地址的字符串都比较复杂,包括很多请求参数,这样在请求过程中需要解析出来每个部门,所以封装一个NSURL,操作很方便. 1.URL URL是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它. URL可能包含远程服务器上的资源的位置,本地磁盘上的文件的路径,甚

iOS开发系列--通知与消息机制详解_IOS

概述 在多数移动应用中任何时候都只能有一个应用程序处于活跃状态,如果其他应用此刻发生了一些用户感兴趣的那么通过通知机制就可以告诉用户此时发生的事情.iOS中通知机制又叫消息机制,其包括两类:一类是本地通知:另一类是推送通知,也叫远程通知.两种通知在iOS中的表现一致,可以通过横幅或者弹出提醒两种形式告诉用户,并且点击通知可以会打开应用程序,但是实现原理却完全不同.今天就和大家一块去看一下如何在iOS中实现这两种机制,并且在文章后面会补充通知中心的内容避免初学者对两种概念的混淆. 本地通知 本地通

iOS利用Block逆向传值的方式详解_IOS

前言 在iOS通过代理逆向传值的方式详解一文中,分析了如何利用代理模式来逆向传值,其实还有一些其他的方式,如通知.Block等,相比较代理,我个人认为反而要简单些,但是需要处理好细节问题,如Block循环引用.还是用前文的案例,本次使用Block来实现,Block的基本知识本文不再赘述. 一.书写规范 Block传值,需要注意的是,谁传值就需要定义Block,捕获方仅仅需要传递Block给传值方,并处理捕获的值. 传值方      1.定义Block用于传值      2.声明一个上述Block

使用Swift代码实现iOS手势解锁、指纹解锁实例详解_IOS

一.手势密码 1. 1.1.用UIButton组成手势的节点. 1.2.当手指接触屏幕时,调用重写的 touchesBegan:withEvent方法(在touchesBegan里调用setNeedsDisplay,这样就会自动调用drawRect方法). 1.3.当手指在屏幕上滑动时,调用重写的touchesEnded:withEvent方法. 这两个方法执行的操作是一样的:通过locationInView获取 触摸的坐标,然后用 CGRectContainsPoint 判断手指是否经过UIB

iOS中 HTTP/Socket/TCP/IP通信协议详解 韩俊强的博客

版权声明:本文为博主原创文章,未经博主允许不得转载. 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 简单介绍: [objc] view plain copy // OSI(开放式系统互联), 由ISO(国际化标准组织)制定   // 1. 应用层   // 2. 表示层   // 3. 会话层   // 4. 传输层   // 5. 网络层   // 6. 数据链接层   // 7. 物理层      // TCP/IP, 由美国国防部制定   // 1. 

iOS百度地图简单使用详解_IOS

百度地图 iOS SDK是一套基于iOS 5.0及以上版本设备的应用程序接口,不仅提供展示地图的基本接口,还提供POI检索.路径规划.地图标注.离线地图.定位.周边雷达等丰富的LBS能力 . 今天主要介绍以下接口 基础地图 POI检索 定位 首先配置环境 1.自动配置.framework形式开发包(使用CocoaPods)<推荐> 2.手动配置.framework形式开发包 特别注意: (API里有很多注意点,大家可以具体去看.但是我说的后两点少其中一个都会失败,第一点是有需求的话,必须加上)

iOS开发系列--地图与定位源代码详解_IOS

概览 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一个陌生的地方想要查找附近的酒店.超市等就可以打开软件搜索周边;类似的,还有很多团购软件可以根据你所在的位置自动为你推荐某些商品.总之,目前地图和定位功能已经大量引入到应用开发中.今天就和大家一起看一下iOS如何进行地图和定位开发. 定位 地图 定位 要实现地图.导航功能,往往需要先熟悉定位功能,在iO

IOS 关键字const 、static、extern详解_IOS

IOS 关键字const .static.extern详细介绍: 一.前言 阅读别人的代码(一些优秀的源码)总能发现一些常见的关键字,随着编程经验的积累大部分还是知道是什么意思的,但在概念上和具体的用法上却依然有些模糊,故特意整理汇总了下三个比较常见的关键字--const/static/extern. 二.关键字const/static/extern的释义和用法 1.const 这个单词翻译成中文是"常量"的意思.在程序中我们知道"常量"的值是不能变的,固定的.所以

IOS开发之JSON转PLIST实例详解_IOS

 IOS JSON转PLIST   从xx.json文件中读取JSON数据,写入到xx.plist文件中,实现代码如下: NSString *path = @"/Users/android_ls/Desktop/city_province.json"; NSArray *array = [NSJSONSerialization JSONObjectWithData:[NSData dataWithContentsOfFile:path] options:NSJSONReadingMut