[iOS]5 分钟实现抖音 APP

你们好，我是 NewPan，这篇文章咱们一块儿来挑战 “5 分钟实现现下最火的视频 APP 抖音”，也就是下面的效果。

首先咱们来分析一下这个界面，这是个竖向滑动的 scrollView，咱们能够在 scrollView 上添加 3 个 view，而后将 scrollView 滚到中间红色 view 的位置，之后每次用户滑动完成之后，都将 scrollView 重置到这个状态，这样就能实现抖音那种无限滑动的效果。

而后，每次用户滑动完就开始播放视频，这样咱们就能实现抖音这个效果了。有了思路，接下来开始写代码。

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    self.scrollViewOffsetYOnStartDrag = -100;
    [self scrollViewDidEndScrolling];
}

- (void)viewDidDisappear:(BOOL)animated {
    [super viewDidDisappear:animated];
    [self.secondImageView jp_stopPlay];
}

#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView
                  willDecelerate:(BOOL)decelerate {
    if (decelerate == NO) {
        [self scrollViewDidEndScrolling];
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    [self scrollViewDidEndScrolling];
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    self.scrollViewOffsetYOnStartDrag = scrollView.contentOffset.y;
}

#pragma mark - JPVideoPlayerDelegate

- (BOOL)shouldShowBlackBackgroundBeforePlaybackStart {
    return YES;
}

#pragma mark - Private

- (void)scrollViewDidEndScrolling {
    if(self.scrollViewOffsetYOnStartDrag == self.scrollView.contentOffset.y){
        return;
    }

    CGSize referenceSize = UIScreen.mainScreen.bounds.size;
    [self.scrollView setContentOffset:CGPointMake(0, referenceSize.height) animated:NO];
}

- (NSURL *)fetchDouyinURL {
    if(self.currentVideoIndex == (self.douyinVideoStrings.count - 1)){
        self.currentVideoIndex = 0;
    }
    NSURL *url = [NSURL URLWithString:self.douyinVideoStrings[self.currentVideoIndex]];
    self.currentVideoIndex++;
    return url;
}
复制代码

代码写到这里就能实现无限滑动的效果了，这很简单，对吧？

那如何播放视频呢？咱们应该引入 AVFoundation，而后实例化 AVPlayer，而后建立视频图层，而后监听视频播放状态，再开始播放视频。这只是一部分，接下来开始监听播放器的视频进度变化，开始定制播放进度指示器。而后还要处理音频的输出问题，还要处理先后台事件……

像抖音这样好的用户体验，视频数据都是边下边播缓存在本地的，那如何实现基于 AVPlayer 的边下边播技术呢？

问题彷佛没有那么简单，这样算下来，5 分钟绝对写不完。

这时就轮到视频利器 JPVideoPlayer 上场了。只要下面一行代码，上面全部的事情所有帮你搞定，信不信？不信就试试看，demo 地址在这里 JPVideoPlayer。

[self.secondImageView jp_playVideoMuteWithURL:[self fetchDouyinURL]
                               bufferingIndicator:nil
                                     progressView:[JPDouyinProgressView new]
                          configurationCompletion:^(UIView *view, JPVideoPlayerModel *playerModel) {
                              view.jp_muted = NO;
                          }];

复制代码

感兴趣的同窗能够阅读下面这篇关于 JPVideoPlayer 的使用说明。

[iOS]JPVideoPlayer 3.0 使用介绍

个人文章集合

下面这个连接是我全部文章的一个集合目录。这些文章凡是涉及实现的，每篇文章中都有 Github 地址，Github 上都有源码。

个人文章集合索引

你还能够关注我本身维护的简书专题 iOS开发心得。这个专题的文章都是实打实的干货。若是你有问题，除了在文章最后留言，还能够在微博 @盼盼_HKbuy上给我留言，以及访问个人 Github。