iOS使用AVPlayer及MPPlayer播放在线视频

最近在仿做一个APP,其中使用到视频流播放,原本是打算使用MPPlayer进行在线播放出来的,但是发现iOS9之后以及不在支持MP了,刚好也没怎么接触过AVPlyer借此机会刚好学习一番。因为AVPlayer所有控件都是需要自定义,如果只是简单的播放视频其实是不如MPPlayer方便的。

实现过程

1. 简单点的MPPlayer

  • 声明一个MPMoviePlayerController 的属性
@property (nonatomic, strong) MPMoviePlayerController *moviePlayer;
@property (nonatomic, strong) NSString *moviePath;//播放路径
  • 懒加载
 if (!_moviePlayer) {
        _moviePlayer = [[MPMoviePlayerController alloc]init];
        [_moviePlayer.view setFrame:CGRectMake(0, 300, self.view.bounds.size.width, self.view.bounds.size.height/3)];
        //设置自动播放
        [_moviePlayer setShouldAutoplay:NO];
        //设置源类型 因为新特性一般都是播放本地的小视频 所以设置源类型为file
        _moviePlayer.movieSourceType = MPMovieSourceTypeStreaming;

        [self.view addSubview:_moviePlayer.view];
    }
    return _moviePlayer;

如果只是播放暂停之类的几乎是不需要自己做什么的,很简单。

  • 设置播放源
    我是在set方法中设置的,不过这个都无所谓。
- (void)setMoviePath:(NSString *)moviePath{
    _moviePath = [moviePath copy];
    self.moviePlayer.view.backgroundColor = [UIColor clearColor];
    // 设置播放的路径
    self.moviePlayer.contentURL = [NSURL URLWithString:moviePath];
    [self.moviePlayer prepareToPlay];
    [self.moviePlayer play];
}
  • viewDidLoad调用
    self.moviePath = @"http://baobab.wdjcdn.com/1455782903700jy.mp4";

  • 大功告成
MPPlyer播放

2.主角AVPlayer

  • AVPlayer需要的属性,这是播放器基础
@property (nonatomic, strong) AVPlayer *player;
@property (nonatomic, strong) AVPlayerItem *playerItem;
@property (nonatomic, strong) AVPlayerLayer *playerLayer;

  • 实现AVPlayer播放
     NSURL *url = [NSURL URLWithString:_playerUrl];
    _item = [[AVPlayerItem alloc] initWithURL:url];
    _player = [AVPlayer playerWithPlayerItem:_item];
    _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
    _playerLayer.videoGravity = AVLayerVideoGravityResizeAspect;
    [self.layer addSublayer:_playerLayer];
    [_player play];

虽然是可以播放视频了但仅仅是能播放而已,暂停播放快进等功能都没有,下面对他进行完善。

  • 添加底部工具栏
@property (nonatomic, strong) UIView *toolView;//工具栏
@property (nonatomic, strong) UISlider *slider;//用来现实视频的播放进度
@property (nonatomic, assign) BOOL isShowToolView;//是否显示工具栏
@property (nonatomic, strong) UIButton *playOrPause;//播放暂停按钮

@property (nonatomic, strong) NSTimer *showTimer;//显示工具栏时间
@property (nonatomic, strong) NSTimer *progressTimer;//进度条计时器
@property (nonatomic, strong) UILabel *timerLabel;//播放时间
@property (nonatomic, strong) UILabel *allTimeLabel;//总时间
@property (nonatomic, strong) UIButton *bigPlayBtn;//中间播放按钮
@property (nonatomic, strong) UIView *coverView;//遮盖版

  • 下面就是界面实现了
 //工具栏
        self.toolView = [[UIView alloc]initWithFrame:CGRectMake(0, self.bounds.size.height - kToolViewHieght, self.bounds.size.width, kToolViewHieght)];
        self.toolView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.8];
        [self addSubview:self.toolView];
        [self bringSubviewToFront:self.toolView];
  //播放按钮
        self.playOrPause = [UIButton buttonWithType:UIButtonTypeCustom];
        [self.playOrPause setImage:[UIImage imageNamed:@"videoplay"] forState:UIControlStateNormal];
        [self.playOrPause setImage:[UIImage imageNamed:@"videopause"] forState:UIControlStateSelected];
        self.playOrPause.contentMode = UIViewContentModeCenter;
        [self.playOrPause addTarget:self action:@selector(playOrPauseClick:) forControlEvents:UIControlEventTouchUpInside];
        self.playOrPause.frame = CGRectMake(0, 0, 30, kToolViewHieght);
        [self.toolView addSubview:self.playOrPause];

  • 其他控件
        self.timerLabel = [[UILabel alloc]initWithFrame:CGRectMake(30, 0, 40, kToolViewHieght)];
        self.timerLabel.font = [UIFont systemFontOfSize:10.0];
        self.timerLabel.textColor = [UIColor whiteColor];
        [self.toolView addSubview:self.timerLabel];
        
        self.allTimeLabel  =[[UILabel alloc]initWithFrame:CGRectMake(70, 0, 40, kToolViewHieght)];
        self.allTimeLabel.font = [UIFont systemFontOfSize:10.0];
        self.allTimeLabel.textColor = [UIColor whiteColor];
        [self.toolView addSubview:self.allTimeLabel];
        
        self.bigPlayBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [self.bigPlayBtn setImage:[UIImage imageNamed:@"videoplay"] forState:UIControlStateNormal];
        [self.bigPlayBtn addTarget:self action:@selector(playOrPauseBigClick:) forControlEvents:UIControlEventTouchUpInside];
        self.bigPlayBtn.frame = self.bounds;
        self.bigPlayBtn.contentMode = UIViewContentModeScaleAspectFill;
        [self addSubview:self.bigPlayBtn];
        
        
        self.coverView.hidden = YES;
        self.toolView.alpha = 0;
        self.isShowToolView = NO;
        self.playOrPause.selected = NO;

  • 进度条
//懒加载进度条
- (UISlider *)slider{
    if (!_slider) {
        _slider.backgroundColor = [UIColor whiteColor];
        _slider = [[UISlider alloc]initWithFrame:CGRectMake(110, 0, 200, kToolViewHieght)];
        //设置slider原点已经最大点最小点图片
        [_slider setThumbImage:[UIImage imageNamed:@"videothumb"] forState:UIControlStateNormal];
        [_slider addTarget:self action:@selector(touchDown:) forControlEvents:UIControlEventTouchDown];
        [_slider addTarget:self action:@selector(valueChange:) forControlEvents:UIControlEventValueChanged];
        [_slider addTarget:self action:@selector(touchUpInside:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _slider;
}

  • 进度条点击方法
- (void)touchDown:(UISlider *)slider{
    // 按下去 移除监听器
    [self removeProgressTimer];
    [self removeShowTime];
}
- (void)valueChange:(UISlider *)slider{
    NSTimeInterval currentTime = CMTimeGetSeconds(self.player.currentItem.duration) * slider.value;
    self.timerLabel.text = [self timeToStringWithTimeInterval:currentTime];
}
- (void)touchUpInside:(UISlider *)slider{
    [self addProgressTimer];
    //计算当前slider拖动对应的播放时间
    NSTimeInterval currentTime = CMTimeGetSeconds(self.player.currentItem.duration) * slider.value;
    // seekToTime:播放跳转到当前播放时间
    [self.player seekToTime:CMTimeMakeWithSeconds(currentTime, NSEC_PER_SEC) toleranceBefore:kCMTimeZero toleranceAfter:kCMTimeZero];
    [self toolViewShow];
}
  • slider定时器
- (NSTimer *)progressTimer{
    if (!_progressTimer) {
        _progressTimer = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(updateProgressInfo) userInfo:nil repeats:YES];
        [[NSRunLoop mainRunLoop]addTimer:self.progressTimer forMode:NSRunLoopCommonModes];
    }
    return _progressTimer;
}
  • 更新slider和time
- (void)updateProgressInfo{
    NSTimeInterval currentTime = CMTimeGetSeconds(self.player.currentTime);
    NSTimeInterval durationTime = CMTimeGetSeconds(self.player.currentItem.duration);
    
    self.timerLabel.text = [self timeToStringWithTimeInterval:currentTime];
    self.allTimeLabel.text = [self timeToStringWithTimeInterval:durationTime];
    self.slider.value = CMTimeGetSeconds(self.player.currentTime)/CMTimeGetSeconds(self.player.currentItem.duration);
    
    if (self.slider.value == 1) {
        [self removeProgressTimer];
        self.coverView.hidden = NO;
    }
}
  • 移除slider定时器
//移除slider定时器
- (void)removeProgressTimer{
    [self.progressTimer invalidate];
    self.progressTimer = nil;
}
  • 播放器的手势点击
//手势点击
- (void)playTap:(UITapGestureRecognizer *)tap{
    //未播放状态,点击view会直接播放
    if (self.player.status == AVPlayerStatusUnknown) {
        [self playOrPauseClick:self.playOrPause];
        return;
    }
    //记录工具栏的是否隐藏
    self.isShowToolView = !self.isShowToolView;
    if (self.isShowToolView) {
        [UIView animateWithDuration:0.5 animations:^{
            self.toolView.alpha = 0.8;
        }];
        //工具栏的按钮为播放状态是,添加计时器,5秒之后自动隐藏
        if (self.playOrPause.selected) {
            [self toolViewShow];
        }
    }else{
        [self removeShowTime];
        [UIView animateWithDuration:0.5 animations:^{
            self.toolView.alpha = 0;
        }];
    }
}

  • 播放按钮方法
- (void)playOrPauseClick:(UIButton *)btn{
    btn.selected = !btn.selected;
    if (!btn.selected) {
        self.toolView.alpha = 0.8;
        [self removeShowTime];
        [self.player pause];
        [self removeProgressTimer];
    }else{
        [self toolViewShow];
        [self.player play];
        [self addProgressTimer];
    }
}
  • 中间播放按钮的方法
//中间播放按钮的方法
- (void)playOrPauseBigClick:(UIButton *)btn{
    btn.hidden = YES;
    self.playOrPause.selected = YES;
    [self.player replaceCurrentItemWithPlayerItem:self.playerItem];
    [self.player play];
    [self addProgressTimer];
}
  • 工具栏的显示及隐藏
- (void)toolViewShow{
    self.showTimer = [NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:@selector(toolViewHide) userInfo:nil repeats:NO];
    [[NSRunLoop mainRunLoop]addTimer:self.showTimer forMode:NSRunLoopCommonModes];
}
- (void)toolViewHide{
    self.isShowToolView = !self.isShowToolView;
    [UIView animateWithDuration:0.5 animations:^{
        self.toolView.alpha = 0;
    }];
    NSLog(@"工具栏隐藏");
}
  • 添加遮罩视图用于播放完成后
- (UIView *)coverView{
    if (!_coverView) {
        _coverView = [UIView new];
        _coverView.center = self.center;
        _coverView.bounds = CGRectMake(0, 0, 100, 100);
        _coverView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.9];
        [self addSubview:_coverView];
    }
    return _coverView;
}
  • 在遮罩视图上添加重播按钮
        UIButton *ReplayBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [ReplayBtn setImage:[UIImage imageNamed:@"chongshe"] forState:UIControlStateNormal];
        ReplayBtn.center = self.coverView.center;
        ReplayBtn.frame = CGRectMake(0, 0, 100, 100);
        [ReplayBtn addTarget:self action:@selector(rePlayClick) forControlEvents:UIControlEventTouchUpInside];
        [self.coverView addSubview:ReplayBtn];

  • 重播按钮的方法
- (void)rePlayClick{
    self.slider.value = 0;
    [self touchUpInside:self.slider];
    self.coverView.hidden = YES;
    [self playOrPauseBigClick:self.bigPlayBtn];
}

  • 到这里一个带有播放暂停重播等基本功能的播发器就完成了
完成效果图

后记

  • 上面是我用AVPlayer实现播放的一点心得。demo做的很简陋,有诸多的不足,需要完善的地方也有很多,主要是为了给大家提供一个思路抛砖引玉,希望可以帮到大家。
  • 惯例放上项目源码还有我的个人网站,有需要的可以去看一下。
  • 参考文章iOS-视频播放器的简单封装
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,980评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,422评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,130评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,553评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,408评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,326评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,720评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,373评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,678评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,722评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,486评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,335评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,738评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,283评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,692评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,893评论 2 335

推荐阅读更多精彩内容