自定义视频播放器与慢放滚轮

受同学之邀，帮忙自定义一控件。需求是：开发慢放滚轮，用手指拨动实现帧级的慢速播放，滚轮可双向拨动，其滚动具有惯性，滚动速度决定视频播放的速度。需求很明朗，可我却是一头雾水。说实话，在此之前我还没有自定义过视频播放器，不懂怎么实现‘帧级慢速播放’。并且滚轮这个东西自定义起来，我也是没谱的。越是自己觉得陌生的东西，越是想办法回避，想着挑战一下自己，就尝试着做了起来。

本文来自简书，原文地址:http://www.jianshu.com/p/b2c67575adb4

要实现这个需求，首先滚轮是要自定义的。再说视频播放器，如果要用别人写好的视频播放器框架，需要coder刚好提供了一个方法，专门控制视频播放进度的。为了避免繁琐，我基于系统的AVPlayer自定义了视频播放器，实现了相关功能。DCVideoPlyer

界面效果图

滚轮慢放效果图

一、自定义慢放滚轮

设计思路：

1.滚轮有三个状态：开始触碰、持续滚动、结束触碰。基于这三个状态考虑，决定在Control上自定义。

2.滚轮看起来得有立体的感觉，刻度线间距应该有变化，并且长度也应该有变化，达到近大远小的效果。

3.滚轮上的刻度线是绕着圆心转动的，想象着平面上是一个半圆，刻度线的长度与间距从小到大，又从大到小变化，你是不是想起了高中所学三角函数，这里就是利用三角函数与反三角函数实现相关功能。

4.暂无

sin函数和cos函数

实现功能：

滚轮相关

实现滚轮刻度线的整体效果，其关键核心就是利用三角函数，计算出每条线条的起始点。要验证函数的正确性，可将0、π/2、π，三个弧度代入检验。

/*!@method  每条线初始点的集合。@abstract 初始化每条的初始位置点，并记录下来。@discussion 利用三角函数，反三角函数，将滚轮滑动的距离转换为弧度，并计算出每条线的初始点。*/
- (void)resetLinesArray
{[_linesArray removeAllObjects];double arcTheLine = asin((_kRadius - _scroledRange)/ (_kRadius));for (int i = 0; i < (LineCounts +1); i++) {double temArc =arcTheLine - i *_intervalTwoLine ;if (temArc < 0) {temArc += M_PI;}CGPoint pt;// 加π的原因是 滚轮转动的方向跟滑动方向相反，故加上π调整过来。pt.x = _kRadius - _kRadius*cos(temArc+M_PI);pt.y = (_layerLength * 0.5 + _layerLength* 0.5*sin(temArc+M_PI));[_linesArray addObject:[NSValue valueWithCGPoint:pt]];   }
}

画出刻度线：

/*!@method  画出每条刻度线。@abstract 利用CGContext 画出每条刻度线。@discussion 根据三角函数算出的点，转换成长短不一，距离不一的刻度线。@param layer layer 图层@param ctx 上下文*/
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{if (layer == self.layer) {for (NSValue *num in _linesArray) {CGPoint pt = [num CGPointValue];double y = pt.y;double x = pt.x;//加10的原因是：最长线条是滚轮宽度减20，所以加上10，以达到刻度线居中的目的。CGContextMoveToPoint(ctx, x, y+10);CGContextAddLineToPoint(ctx,x,_layerLength+10 - y);CGContextClosePath(ctx);CGContextSetLineWidth(ctx, 1);CGContextSetLineCap(ctx, kCGLineCapRound);CGContextSetStrokeColorWithColor(ctx,[UIColor whiteColor].CGColor);CGContextStrokePath(ctx);}}
}

重写Control的三个系统方法：

/*!@method  重写control的系统方法。@abstract control开始触碰。@discussion 开始触碰滚轮的方法,记录下触碰点。@param touch 触碰点@param event 事件@result 返回布尔值*/
- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{_lastTouchPoint = [touch locationInView:self];if (CGRectContainsPoint(self.layer.bounds, _lastTouchPoint)) {[self.layer setNeedsDisplay];return YES;}return NO;
}
/*!@method  重写control的系统方法。@abstract control持续触碰。@discussion 持续触碰滚轮的方法，根据触碰点计算滚动距离。@param touch 触碰点@param event 事件@result 返回布尔值*/
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{CGPoint pt = [touch locationInView:self];CGFloat temLength = pt.x - _lastTouchPoint.x;float radiuDelta = temLength/_kRadius;self.value = temLength;_scroledRange += temLength;NSLog(@"aaa==%f",temLength);_lastTouchPoint = pt;if (_scroledRange < 0) {_scroledRange =_kRadius + _scroledRange;}if (_scroledRange > _kRadius) {_scroledRange =_scroledRange - _kRadius;}// 有效滚动才重置layerif (radiuDelta != 0) {[self resetLinesArray];[self.layer setNeedsDisplay];}// 设置触发事件[self sendActionsForControlEvents:UIControlEventValueChanged];return YES;
}
/*!@method  重写control的系统方法。@abstract control结束触碰。@discussion 结束触碰滚轮的方法。@param touch 触碰点@param event 事件*/
- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{[self.layer setNeedsDisplay];// 设置触发事件[self sendActionsForControlEvents:UIControlEventValueChanged];}

使用方法：在ViewController中调用如下代码：

 DCRotatingWheel *control = [[DCRotatingWheel alloc]initWithFrame:CGRectMake(40, 340, self.view.frame.size.width-80, 50)];[control addTarget:self action:@selector(onControlTouchDown:) forControlEvents:UIControlEventTouchDown];[control addTarget:self action:@selector(onControlTouchUpInside:) forControlEvents:UIControlEventTouchUpInside];[control addTarget:self action:@selector(onControlValueChange:) forControlEvents:UIControlEventValueChanged];[self.view addSubview:control];

二、自定义视频播放器

AVPlayer相关

1.创建AVPlayer：

 NSString *filePath = [[NSBundle mainBundle]pathForResource:@"xiujian2" ofType:@"mp4"];NSURL *url = [NSURL fileURLWithPath:filePath];self.item = [[AVPlayerItem alloc]initWithURL:url];self.player = [[AVPlayer alloc]initWithPlayerItem:_item];AVPlayerLayer *avLayer = [AVPlayerLayer playerLayerWithPlayer:_player];avLayer.frame = CGRectMake(0, 70, self.view.frame.size.width, 180);avLayer.videoGravity = AVLayerVideoGravityResizeAspect;[self.view.layer addSublayer:avLayer];

2.注册三个通知：

 // 注册观察者,观察status属性[_item addObserver:self forKeyPath:@"status" options:NSKeyValueObservingOptionNew context:nil];// 观察缓冲进度[_item addObserver:self forKeyPath:@"loadedTimeRanges" options:NSKeyValueObservingOptionNew context:nil];// 播放完成通知[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(playbackFinished:) name:AVPlayerItemDidPlayToEndTimeNotification object:nil];

3.观察播放进度及缓冲进度：

// 观察播放进度
- (void)monitoringPlayBack:(AVPlayerItem *)item {__weak typeof(self)WeekSelf = self;// 播放进度, 每秒执行30次， CMTime 为30分之一秒_playTimeObserver = [_player addPeriodicTimeObserverForInterval:CMTimeMake(1, 30.0) queue:dispatch_get_main_queue() usingBlock:^(CMTime time) {// 当前播放秒float currentPlayTime = (double)item.currentTime.value/ item.currentTime.timescale;// 更新播放进度Slider[WeekSelf updateVideoSlider:currentPlayTime];}];
}
// 更新滑条
- (void)updateVideoSlider:(float)currentTime {self.mp4Slider.value = currentTime;self.startTime.text = [self convertTime:currentTime];
}

// 已缓冲进度
- (NSTimeInterval)availableDurationRanges {NSArray *loadedTimeRanges = [_item loadedTimeRanges]; // 获取item的缓冲数组// CMTimeRange 结构体 start duration 表示起始位置 和 持续时间CMTimeRange timeRange = [loadedTimeRanges.firstObject CMTimeRangeValue]; // 获取缓冲区域float startSeconds = CMTimeGetSeconds(timeRange.start);float durationSeconds = CMTimeGetSeconds(timeRange.duration);NSTimeInterval result = startSeconds + durationSeconds; // 计算总缓冲时间 = start + durationreturn result;
}

4.观察item的播放状态：

// 观察status属性
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context
{if ([keyPath isEqualToString:@"status"]) {AVPlayerStatus status = [[change objectForKey:@"new"]integerValue];// 准备播放if (status == AVPlayerStatusReadyToPlay) {CMTime duration = _item.duration;NSLog(@"sssss%.2f", CMTimeGetSeconds(duration));// 设置视频时间[self setMaxDuration:CMTimeGetSeconds(duration)];[self.player play];}// 播放视频失败else if (status == AVPlayerStatusFailed){NSLog(@"AVPlayerStatusFailed");}else {NSLog(@"AVPlayerStatusUnknown");}// 缓冲进度}else if ([keyPath isEqualToString:@"loadedTimeRanges"]){NSTimeInterval timeInterval = [self availableDurationRanges];CGFloat totalDuration = CMTimeGetSeconds(_item.duration); // 总时间[self.progressView setProgress:timeInterval / totalDuration animated:YES];}
}

5.慢放滚轮或Slider控制播放进度的方法：

- (IBAction)ValueChange:(id)sender {[self.player pause];_play = NO;[self setPlayBtnImage];CMTime changeTime = CMTimeMakeWithSeconds(self.mp4Slider.value,1.0);NSLog(@"%.2f", self.mp4Slider.value);// seekToTime:控制视频跳转到指定时间播放，慢放滚轮也用相同的方法。[_item seekToTime:changeTime completionHandler:^(BOOL finished) {//        [self.player play];}];
}

需要注意的是，注册了通知，最后不要忘记要移除通知。其实这个播放器自定义的也不够完全，什么多倍播放，全屏处理，滑动屏幕快进，调节音量，调节屏幕亮度，调节分辨率什么的，都暂时还未处理。我做到这里就停了是因为我已实现慢放滚轮的功能，至于滚轮要添加到哪里，怎么用，可按照自己的需求添加。以上这些功能也不是做不出来，后期有时间我会慢慢加上。

最后说一下，文中关于慢放滚轮的设计思路，第4点我写的是暂无。关于需求所提到的“惯性”，我暂时还没有思路，不知道要怎么实现。要完全模拟滚轮特性，这惯性是必不可少的！如果各位有好的思路，还望不吝赐教。

本文于3月21日下午再次编辑，补充慢放滚轮惯性的设计思路

4.在滚轮将要结束滑动时，判断滑动距离向左或向右超出某一范围值时，设置定时器，让其持续滚动一小段距离。