前言
如果仅仅是播放视频两者的使用都非常简单，但是相比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
|
1
2
3
4
5
|
// 初始化player 和playerlayerself.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
|
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];} |
最后，视频播放器大致这个样子
总结
其中还有许多需要完善的地方，一些功能也没有实现，例如两个占位的button，将来可以用来下载视频和控制弹幕的开关，播放结束之后分享按钮也没有实现。以后实现后给大家继续分享，以上就是这篇文章的全部内容了，希望本文的内容对大家能有所帮助，如果有疑问大家可以留言交流。
