大家好，我是 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 的使用說明。
我的文章集合
下面這個連結是我所有文章的一個集合目錄。這些文章凡是涉及實現的，每篇文章中都有 Github 地址，Github 上都有原始碼。