最近在仿做一個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-視頻播放器的簡單封裝