iOS-视频播放器的简单封装

iOS-视频播放器的简单封装

封装视频播放器,首先需要了解视频播放器的实现,iOS9之前可以使用MediaPlayer来进行视频的播放,iOS9之后系统推荐使用AVFoundation框架实现视频的播放。 如果仅仅是播放视频两者的使用都非常简单,但是相比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;
}
  1. 根据播放视频的url创建AVPlayerItem
NSURL *url = [NSURL URLWithString:@"http://120.25.226.186:32812/resources/videos/minion_02.mp4"];
self.playerItem = [AVPlayerItem playerItemWithURL:url];
  1. 设置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];
  1. 给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的方法。

  1. 其他控件显示以及状态的设置
// 隐藏遮盖版
self.coverView.hidden = YES;
// 设置工具栏状态
self.toolView.alpha = 0;
self.isShowToolView = NO;
// 设置工具栏播放按钮状态
self.playOrPauseBtn.selected = NO;

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

  1. 中间播放按钮的点击 - (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;
}
  1. 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;
        }];
    }
}
  1. 工具栏中播放/暂停按钮的点击也需要做一些处理,当处于暂停状态时,工具栏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;
}
  1. 当点击中间播放按钮开始播放的时候添加定时器,同步更新播放时间和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]; } }
  2. 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,将来可以用来下载视频和控制弹幕的开关,播放结束之后分享按钮也没有实现。源码已上传至CLxxcc-GitHub,欢迎下载,并提出意见。


文中如果有不对的地方欢迎指出。我是xx_cc,一只长大很久但还没有二够的家伙。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏西枫里博客

SEO中不可忽视的h1到h6的应用

那天在群里有位SEO大拿,于是我吵吵着让大佬帮我看下我的博客优化还能怎么搞,他回我说我的博客缺少h1标签。从这里拉开了话题。着重聊了些h1标签的内容,其实也都是...

802
来自专栏葬爱家族

Android高级动画(4)完结篇目录回顾封装库总结

Android高级动画(1)http://www.jianshu.com/p/48554844a2db Android高级动画(2)http://www.ji...

1862
来自专栏进步博客

深入理解视觉格式化模型( VISUAL FORMATTING MODEL)

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免...

1323
来自专栏非著名程序员

基础篇章:React Native之 ScrollView 的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 编者按:其实我并不太喜欢在周末发公众号,毕竟...

2835
来自专栏HTML5学堂

几个前端工程师应当掌握的“词语”

HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,...

3646
来自专栏非典型技术宅

iOS动画系列之五:基础动画之缩放篇&旋转篇Swift+OC1. 思路和最终成果2. 抽取公共方法3. 懒加载Layer4. 添加动画

1631
来自专栏夏时

分享几段有趣的代码(一)

4603
来自专栏菩提树下的杨过

scrollTop与offsetTop研究

虽然我是做后台出身的,但最近心血来潮越来越关注前台技术了^_^,前二天看了“司徒正美”先生的图片无缝滚动分析后,对于scrollTop和offsetTop这二个...

2245
来自专栏非典型技术宅

iOS动画系列之六:利用CABasic Animation完成带动画特效的登录界面1. 画风突变的笑脸2. 心跳3. iOS实践:实现一个带动效的登录界面

1406
来自专栏编程之旅

iOS开发——影响图形性能的因素以及检测方法

我想各位攻城狮们肯定听过一句话:“过早的优化是万恶之源”。若是你有着丰富的项目经验,一定会对这句话有着自己的体会,而若是编程新手,那么,请牢记这句话。在一个项目...

1222

扫码关注云+社区

领取腾讯云代金券