美文网首页直播
[iOS]5 分钟实现抖音 APP

[iOS]5 分钟实现抖音 APP

作者: 软件iOS开发 | 来源:发表于2018-04-13 11:47 被阅读32次

首先我们来分析一下这个界面,这是个竖向滑动的 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上场了。只要下面一行代码,上面所有的事情全部帮你搞定,信不信?不信就试试看。

[self.secondImageView jp_playVideoMuteWithURL:[self fetchDouyinURL]

                               bufferingIndicator:nil progressView:[JPDouyinProgressView new]

                          configurationCompletion:^(UIView *view, JPVideoPlayerModel *playerModel) {

                              view.jp_muted = NO;

                          }];

相关文章

  • [iOS]5 分钟实现抖音 APP

    首先我们来分析一下这个界面,这是个竖向滑动的 scrollView,我们可以在 scrollView 上添加 3 ...

  • [iOS]5 分钟实现抖音 APP

    大家好,我是 NewPan,这篇文章我们一起来挑战 “5 分钟实现现下最火的视频 APP 抖音”,也就是下面的效果...

  • 2019-05-31

    做好抖音定位就能赚钱?如何玩赚抖音热门?5个方法让你实现抖音新飞跃! 抖音2019年最火爆APP,没有之一。现在大...

  • iOS仿抖音—评论视图滑动消失

    iOS仿抖音短视频 iOS仿抖音—左右滑动切换效果iOS仿抖音—上下滑动播放视频iOS仿抖音—评论视图滑动消失 前...

  • 抖音怎么发长视频?怎么发5分钟视频?

    第一:抖音1分钟权限是 粉丝大于1000,抖音会给你邀请开通 第二:抖音5分钟视频,是抖音邀请制,针对粉丝较高的人...

  • iOS仿抖音—播放视图滑动隐藏

    iOS仿抖音短视频 iOS仿抖音—左右滑动切换效果iOS仿抖音—上下滑动播放视频iOS仿抖音—评论视图滑动消失iO...

  • iOS仿抖音—加载点赞动画效果

    iOS仿抖音短视频 iOS仿抖音—左右滑动切换效果iOS仿抖音—上下滑动播放视频iOS仿抖音—评论视图滑动消失iO...

  • 2018 抖音数据研究分析报告

    一个神奇的APP 如果要用最直白的语言来描述它 那只能是火!! “抖音5分钟,人间2小时” 就是用户们对抖音“上瘾...

  • Swift 实现分享视频到抖音

    众所周知抖音是目前非常火爆的应用,app的推广运营自然也离不开抖音了,网上的大多文章以及抖音开放平台都是OC 实现...

  • 抖音上的文案,太会撩了

    最近每天刷抖音,听抖音一些课程, 发现自从抖音火了之后很多人就过上了 “抖音5分钟,人间2小时”的生活,抖音里的世...

网友评论

    本文标题:[iOS]5 分钟实现抖音 APP

    本文链接:https://www.haomeiwen.com/subject/amlckftx.html