[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。