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

最新推荐文章于 2024-03-10 21:00:45 发布

置顶上天眷顾我

最新推荐文章于 2024-03-10 21:00:45 发布

阅读量1k

点赞数

分类专栏： iOS开发文章标签： iOS自定义播放器 iOS常用方法 iOS学习资料 iOS 资源大全

iOS开发专栏收录该内容

721 篇文章 17 订阅

订阅专栏

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

本文来自简书，原文地址: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;
    }

    // 有效滚动才重置layer
    if (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 + duration
    return 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.在滚轮将要结束滑动时，判断滑动距离向左或向右超出某一范围值时，设置定时器，让其持续滚动一小段距离。

相关代码：

/*!
 @method  重写control的系统方法。
 @abstract control结束触碰。
 @discussion 结束触碰滚轮的方法。
 @param touch 触碰点
 @param event 事件

 */
- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{

    self.value = _temLength;
    [self.layer setNeedsDisplay];
    // 设置触发事件
    [self sendActionsForControlEvents:UIControlEventValueChanged];

    if (_temLength > 0 && _temLength < 10 ) {

        return;
    }
    if (_temLength < 0  && _temLength >-10) {

        return;
    }

    _timer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(onTimerEvent) userInfo:nil repeats:YES];

    [[NSRunLoop mainRunLoop]addTimer:_timer forMode:NSDefaultRunLoopMode];

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

        [_timer invalidate];
        _timer = nil;
    });
}


- (void)onTimerEvent
{
    // 向左惯性滑动
    if (_temLength < 0) {

        _temLength -= 0.5;

    }// 向右惯性滑动
    else if (_temLength > 0)
    {
        _temLength += 0.5;

    }
    _scroledRange += _temLength;

    if (_scroledRange < 0) {

        _scroledRange =self.frame.size.width/2 + _scroledRange;
    }
    if (_scroledRange > self.frame.size.width/2) {

        _scroledRange =_scroledRange - self.frame.size.width/2;
    }

    [self resetLinesArray];
    [self.layer setNeedsDisplay];

    // 设置代理方法，将每一时刻的值传出去
    [_delegate onDCRotatingWheelDelegateInertanceEventWithValue:_temLength];

}

补充的代理方法：

实现惯性增加的代理方法

具体使用方法：在主控制器中设置代理，并实现代理方法：

/*!
 @method  慢放滚轮的惯性代理方法。
 @abstract 慢放滚轮的惯性代理方法。
 @param value 每次滚动的值

 */
- (void)onDCRotatingWheelDelegateInertanceEventWithValue:(float)value
{
    float currentTime = self.mp4Slider.value+(value*0.1 );// 滚轮的拨动距离乘以系数，来控制进度（0.5）

    if (currentTime > 0) {

        CMTime changeTime = CMTimeMakeWithSeconds(currentTime,1.0);

        [self updateVideoSlider:currentTime];

        NSLog(@"%.2f", self.mp4Slider.value);

        [_item seekToTime:changeTime completionHandler:^(BOOL finished) {

        }];
    } 
}

DCVideoPlyer

上天眷顾我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义视频播放器与慢放滚轮

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

扫一扫