大家好,我是 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 。