Hello everyone, I’m NewPan. In this article, we are going to challenge “Realizing the most popular video APP Tiktok in 5 minutes”, which is the following effect.
First of all, let’s analyze this interface, this is a scrollView that slides vertically, so we can add three views to the scrollView, and then we can roll the scrollView to the red view in the middle, and every time the user slides, Reset the scrollView to this state, so that you can achieve tiktok’s infinite sliding effect.
Then, every time the user swipes the video, it starts playing, so we can achieve the effect of Tiktok. With that in mind, let’s start coding.
- (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) {[selfscrollViewDidEndScrolling]; }} - (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;
}
Copy the codeSo if I write my code here I can do an infinite slide, which is pretty simple, right?
So how do you play the video? We should introduce AVFoundation, then instantiate AVPlayer, then create the video layer, then listen for the state of the video and start playing the video. This is just part of it. Next, start listening to the player’s video progress and start customizing the playback progress indicator. Then you have to deal with the audio output, you have to deal with the background events…
As a good user experience like Douyin, video data is cached locally in edge-to-bottom play. How to implement edge-to-bottom play technology based on AVPlayer?
It seems that the problem is not so simple, so calculate down, 5 minutes will not be able to finish writing.
That’s where JPVideoPlayer comes in. Just one line of code below, all the above things for you, believe it or not? If you don’t believe me, the demo is here at JPVideoPlayer.
[self.secondImageView jp_playVideoMuteWithURL:[self fetchDouyinURL]
bufferingIndicator:nil
progressView:[JPDouyinProgressView new]
configurationCompletion:^(UIView *view, JPVideoPlayerModel *playerModel) {
view.jp_muted = NO;
}];
Copy the codeThose who are interested can read the following instructions on how to use JPVideoPlayer.
[iOS] Introduction to JPVideoPlayer 3.0
My collection of articles
The link below is a catalog of all my articles. These articles are generally concerned with implementation, each article has Github address, Github has source code.
Index of my collection of articles