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

时间:2022-01-26 16:22:52

前言

如果仅仅是播放视频两者的使用都非常简单,但是相比mediaplayer,avplayer对于视频播放的可控制性更强一些,可以通过自定义的一些控件来实现视频的播放暂停等等。因此这里使用avplayer的视频播放。

视频播放器布局

首先使用xib创建clavplayerview继承uiview用来承载播放器,这样我们在外部使用的时候,直接在控制器view或者cell上添加clavplayerview即可,至于播放器播放或者暂停等操作交给clavplayerview来管理。下面来看一下clavplayerview的结构。

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

clavplayerview的布局很简单,重点在于约束的添加和控件层次关系,添加约束只要自己挨个细心添加就没有问题,需要注意控件的层次关系,从上图中可以看出四个控件是分先后顺序平行添加在clavplayerview上的,要注意他们的层次关系,避免相互遮挡。

视频播放器实现

布局完成之后,就是实现播放器功能,我们把播放器功能大致分为四部分来完成

一. 通过播放按钮实现视频播放。

首先clavplayerview加载时需要将播放器layer添加到imageview的layer上,此时蒙版和底部工具条一定都是隐藏的,点击中间播放按钮,视频开始播放并隐藏播放按钮。因此我们需要在clavplayerview的awakefromnib方法中,在加载clavplayerview时对其做一些处理。

1、初始化avplayer和avplayerlayer,并将avplayerlayer添加到imageview的layer上,在layoutsubviews中设置playerlayer的frame

?
1
2
3
4
5
// 初始化player 和playerlayer
self.player = [[avplayer alloc]init];
self.playerlayer = [avplayerlayer playerlayerwithplayer:self.player];
// imageview上添加playerlayer
[self.imageview.layer addsublayer:self.playerlayer];
?
1
2
3
4
5
-(void)layoutsubviews
{
 [super layoutsubviews];
 self.playerlayer.frame = self.imageview.bounds;
}

2、根据播放视频的url创建avplayeritem

?
1
2
nsurl *url = [nsurl urlwithstring:@"http://120.25.226.186:32812/resources/videos/minion_02.mp4"];
self.playeritem = [avplayeritem playeritemwithurl:url];

3、设置slider原点以及最大点最小点图片

?
1
2
3
4
// 设置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则显示工具栏

?
1
2
3
//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、其他控件显示以及状态的设置

?
1
2
3
4
5
6
7
// 隐藏遮盖版
self.coverview.hidden = yes;
// 设置工具栏状态
self.toolview.alpha = 0;
self.isshowtoolview = no;
// 设置工具栏播放按钮状态
self.playorpausebtn.selected = no;

这盖板只有播放完毕之后显现,点击重播之后又隐藏,因此使用hidden直接隐藏即可,而工具栏需要重复显示,并且我们为了能让工具栏的显示有动画效果,这里通过设置toolview的alpha来显示或隐藏工具栏,并通过isshowtoolview来记录toolview的显示或隐藏。

6、中间播放按钮的点击

?
1
2
3
4
5
6
7
8
9
- (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秒钟之后隐藏底部工具条,并提供移除定时器的方法。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/** 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秒内消失。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/** 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滑块

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/** 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并将秒转化为分钟和时间,将转化方法提出来

?
1
2
3
4
5
6
7
8
/** 转换播放时间和总时间的方法 */
-(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,当播放途中点击工具栏暂停按钮暂停播放,需要将视频暂停,并移除定时器,重新开始播放时在添加定时器,并开始播放

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/** 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上,松开时计算当前播放时间,并跳转到当前播放时间进行播放。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/** 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,并调用中间播放按钮开始播放。

?
1
2
3
4
5
6
7
/** 重播按钮点击 */
- (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中设置可以旋转和旋转方向

?
1
2
3
4
5
6
7
8
- (uiinterfaceorientationmask)supportedinterfaceorientations
{
 return uiinterfaceorientationmasklandscape;
}
- (bool)shouldautorotatetointerfaceorientation:(uiinterfaceorientation)tointerfaceorientation
{
 return yes;
}

全屏播放按钮点击事件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/** 全屏按钮点击事件 */
- (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、提供类方法快速创建播放器

?
1
2
3
4
+ (instancetype)videoplayview
{
 return [[[nsbundle mainbundle]loadnibnamed:@"clavplayerview" owner:nil options:nil]lastobject];
}

2、播放视频的资源应该由外部决定,因此我们提供urlstring属性用来接收视频的资源,然后通过重写其set方法来播放视频
/** 需要播放的视频资源set方法 */

?
1
2
3
4
5
6
-(void)seturlstring:(nsstring *)urlstring
{
 _urlstring = urlstring;
 nsurl *url = [nsurl urlwithstring:urlstring];
 self.playeritem = [avplayeritem playeritemwithurl:url];
}

此时我们在外部使用播放器就非常简单了,无需考虑内部逻辑,只需快速创建clavplayerview,添加到控制器view,设置其frame,然后指定其播放视频资源就可以了。

?
1
2
3
4
5
6
7
8
9
10
11
12
- (void)viewdidload {
 [super viewdidload];
 [self setupvideoplayview];
}
-(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];
}

最后,视频播放器大致这个样子

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

总结

其中还有许多需要完善的地方,一些功能也没有实现,例如两个占位的button,将来可以用来下载视频和控制弹幕的开关,播放结束之后分享按钮也没有实现。以后实现后给大家继续分享,以上就是这篇文章的全部内容了,希望本文的内容对大家能有所帮助,如果有疑问大家可以留言交流。