短视频系统开发上下滑动切换视频功能的实现形式
彭衡
为了让用户更快捷、更方便的浏览视频内容，我们在短视频系统里加入了上下滑动切换视频的功能。下面简单介绍下该功能的实现步骤:
首先我们先创建一个scrollview，其frame和self.view的frame保持一致，设置scorllview的contentSize的height为self.view的height的三倍，这样呈现在我们眼前的视图就可以实现初步滑动了;
-(UIScrollView *)backScrollView{
if (!_backScrollView) {
_backScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, _window_width, _window_height)];
_backScrollView.contentSize = CGSizeMake(_window_width, _window_height*3);
_backScrollView.userInteractionEnabled = YES;
_backScrollView.pagingEnabled = YES;
_backScrollView.showsVerticalScrollIndicator = NO;
_backScrollView.showsHorizontalScrollIndicator =NO;
_backScrollView.delegate = self;
_backScrollView.scrollsToTop = NO;
_backScrollView.bounces = NO;
_backScrollView.backgroundColor = [UIColor clearColor];
_firstImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, _window_width, _window_height)];
_firstImageView.image = [UIImage imageNamed:@""];
_firstImageView.contentMode = UIViewContentModeScaleAspectFill;
_firstImageView.clipsToBounds = YES;
[_backScrollView addSubview:_firstImageView];
_firstImageView.jp_videoPlayerDelegate = self;
_secondImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, _window_height, _window_width, _window_height)];
_secondImageView.image = [UIImage imageNamed:@""];
_secondImageView.contentMode = UIViewContentModeScaleAspectFill;
_secondImageView.clipsToBounds = YES;
[_backScrollView addSubview:_secondImageView];
_secondImageView.jp_videoPlayerDelegate = self;
_thirdImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, _window_height*2, _window_width, _window_height)];
_thirdImageView.image = [UIImage imageNamed:@""];
_thirdImageView.contentMode = UIViewContentModeScaleAspectFill;
_thirdImageView.clipsToBounds = YES;
[_backScrollView addSubview:_thirdImageView];
_thirdImageView.jp_videoPlayerDelegate = self;
WeakSelf;
_firstFront = [[FrontView alloc]initWithFrame:_firstImageView.frame callBackEvent:^(NSString *type) {
[weakSelf clickEvent:type];
}];
[_backScrollView addSubview:_firstFront];
_secondFront = [[FrontView alloc]initWithFrame:_secondImageView.frame callBackEvent:^(NSString *type) {
[weakSelf clickEvent:type];
}];
[_backScrollView addSubview:_secondFront];
_thirdFront = [[FrontView alloc]initWithFrame:_thirdImageView.frame callBackEvent:^(NSString *type) {
[weakSelf clickEvent:type];
}];
[_backScrollView addSubview:_thirdFront];
}
return _backScrollView;
}
第二步:我们在scrollview的代理中实现对当前播放视频的控制:
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
lastContenOffset = scrollView.contentOffset.y;
_currentPlayerIV.jp_progressView.hidden = YES;
self.scrollViewOffsetYOnStartDrag = scrollView.contentOffset.y;
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView
willDecelerate:(BOOL)decelerate {
endDraggingOffset = scrollView.contentOffset.y;
if (decelerate == NO) {
[self scrollViewDidEndScrolling];
}
}
-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView {
scrollView.scrollEnabled = NO;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
scrollView.scrollEnabled = YES;
if (lastContenOffset < scrollView.contentOffset.y && (scrollView.contentOffset.y-lastContenOffset)>=_window_height) {
NSLog(@"=====向上滚动=====");
_curentIndex++;
if (_curentIndex+1>_videoList.count) {
_curentIndex =_videoList.count-1;
}
_currentFront.followBtn.hidden = YES;
}else if(lastContenOffset > scrollView.contentOffset.y && (lastContenOffset-scrollView.contentOffset.y)>=_window_height){
NSLog(@"=====向下滚动=====");
_curentIndex--;
if (_curentIndex<0) {
_curentIndex=0;
}
_currentFront.followBtn.hidden = YES;
}else{
NSLog(@"=======本页拖动未改变数据=======");
if (scrollView.contentOffset.y == 0 && _curentIndex==0) {
_videoList.count <= 1 ? [YBMsgPop showPop:@"没有更多了哦^_^"]:[YBMsgPop showPop:@"已经到顶了哦^_^"];
}else if (scrollView.contentOffset.y == _window_height && _curentIndex==_videoList.count-1 && _videoList.count == 2){
//只有两个
[YBMsgPop showPop:@"没有更多了哦^_^"];
}else if (scrollView.contentOffset.y == _window_height*2 && _curentIndex+1==_videoList.count){
[YBMsgPop showPop:@"没有更多了哦^_^"];
}
}
_currentPlayerIV.jp_progressView.hidden = NO;
[self scrollViewDidEndScrolling];
[self getMoreList];
}
第三步:展示简介、评论、点赞、分享并播放视频,
-(void)changeRoom{
[self releaseIV];
if (_videomore) {
self.tabBarController.tabBar.hidden = NO;
[_videomore removeFromSuperview];
_videomore = nil;
}
if (pasueView) {
[pasueView removeFromSuperview];
pasueView = nil;
}
if (_curentIndex+1 > _videoList.count) {
//[YBMsgPop showPop:@"没有数据>_<"];
return;
}
_isErrorVideo = NO;
_hostdic = _videoList[_curentIndex];
NSDictionary *userDic = [_hostdic valueForKey:@"userinfo"];
_hostid = [NSString stringWithFormat:@"%@",[userDic valueForKey:@"id"]];
_hosticon = [NSString stringWithFormat:@"%@",[userDic valueForKey:@"avatar"]];
_hostname = [NSString stringWithFormat:@"@%@",[userDic valueForKey:@"user_nicename"]];
_playUrl = [NSString stringWithFormat:@"%@",[_hostdic valueForKey:@"href"]];
_videoid = [NSString stringWithFormat:@"%@",[_hostdic valueForKey:@"id"]];
//封面、音乐、标题、点赞、评论、分享、关注等赋值
if (_curentIndex>0) {
_lastHostDic = _videoList[_curentIndex-1];
[_firstImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_lastHostDic valueForKey:@"thumb"])] placeholderImage:nil options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
NSLog(@"====%@",image);
if (image.size.width >= image.size.height) {
//横
_firstImageView.contentMode = UIViewContentModeScaleAspectFit;
}else{
_firstImageView.contentMode = UIViewContentModeScaleAspectFill;
}
}];
[self setUserData:_lastHostDic withFront:_firstFront];
[self setVideoData:_lastHostDic withFront:_firstFront];
}
if (_curentIndex+1 < _videoList.count) {
_nextHostDic = _videoList[_curentIndex+1];
[_thirdImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_nextHostDic valueForKey:@"thumb"])] placeholderImage:nil options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
NSLog(@"====%@",image);
if (image.size.width >= image.size.height) {
//横
_thirdImageView.contentMode = UIViewContentModeScaleAspectFit;
}else{
_thirdImageView.contentMode = UIViewContentModeScaleAspectFill;
}
}];
[self setUserData:_nextHostDic withFront:_thirdFront];
[self setVideoData:_nextHostDic withFront:_thirdFront];
}
//[_secondImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_hostdic valueForKey:@"thumb"])]];
[_secondImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_hostdic valueForKey:@"thumb"])] placeholderImage:nil options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
NSLog(@"====%@",image);
if (image.size.width >= image.size.height) {
//横
_secondImageView.contentMode = UIViewContentModeScaleAspectFit;
}else{
_secondImageView.contentMode = UIViewContentModeScaleAspectFill;
}
}];
[self setUserData:_hostdic withFront:_secondFront];
[self setVideoData:_hostdic withFront:_secondFront];
if (_curentIndex==0) {
//第一个
[self.backScrollView setContentOffset:CGPointMake(0, 0) animated:NO];
_currentPlayerIV = _firstImageView;
_currentFront = _firstFront;
[_firstImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_hostdic valueForKey:@"thumb"])] placeholderImage:nil options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
NSLog(@"====%@",image);
if (image.size.width >= image.size.height) {
//横
_firstImageView.contentMode = UIViewContentModeScaleAspectFit;
}else{
_firstImageView.contentMode = UIViewContentModeScaleAspectFill;
}
}];
[self setUserData:_hostdic withFront:_firstFront];
[self setVideoData:_hostdic withFront:_firstFront];
//[_secondImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_nextHostDic valueForKey:@"thumb"])]];
[_secondImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_nextHostDic valueForKey:@"thumb"])] placeholderImage:nil options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
NSLog(@"====%@",image);
if (image.size.width >= image.size.height) {
//横
_secondImageView.contentMode = UIViewContentModeScaleAspectFit;
}else{
_secondImageView.contentMode = UIViewContentModeScaleAspectFill;
}
}];
[self setUserData:_nextHostDic withFront:_secondFront];
[self setVideoData:_nextHostDic withFront:_secondFront];
_bufferIV.image = _firstImageView.image;
}else if (_curentIndex==(_videoList.count-1) && _videoList.count == 2){
//只有两个
[self.backScrollView setContentOffset:CGPointMake(0, _window_height) animated:NO];
_currentPlayerIV = _secondImageView;
_currentFront = _secondFront;
[_firstImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_lastHostDic valueForKey:@"thumb"])]];
[self setUserData:_lastHostDic withFront:_firstFront];
[_secondImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_hostdic valueForKey:@"thumb"])]];
[self setUserData:_hostdic withFront:_secondFront];
_bufferIV.image = _secondImageView.image;
}else if (_curentIndex+1==_videoList.count){
//最后一个
[self.backScrollView setContentOffset:CGPointMake(0, _window_height*2) animated:NO];
_currentPlayerIV = _thirdImageView;
_currentFront = _thirdFront;
[_secondImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_lastHostDic valueForKey:@"thumb"])] placeholderImage:nil options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
NSLog(@"====%@",image);
if (image.size.width >= image.size.height) {
//横
_secondImageView.contentMode = UIViewContentModeScaleAspectFit;
}else{
_secondImageView.contentMode = UIViewContentModeScaleAspectFill;
}
}];
[self setUserData:_lastHostDic withFront:_secondFront];
[self setVideoData:_lastHostDic withFront:_secondFront];
//[_thirdImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_hostdic valueForKey:@"thumb"])]];
[_thirdImageView sd_setImageWithURL:[NSURL URLWithString:minstr([_hostdic valueForKey:@"thumb"])] placeholderImage:nil options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
NSLog(@"====%@",image);
if (image.size.width >= image.size.height) {
//横
_thirdImageView.contentMode = UIViewContentModeScaleAspectFit;
}else{
_thirdImageView.contentMode = UIViewContentModeScaleAspectFill;
}
}];
[self setUserData:_hostdic withFront:_thirdFront];
[self setVideoData:_hostdic withFront:_thirdFront];
_bufferIV.image = _thirdImageView.image;
}else{
//中间的
[self.backScrollView setContentOffset:CGPointMake(0, _window_height) animated:NO];
_currentPlayerIV = _secondImageView;
_currentFront = _secondFront;
_bufferIV.image = _secondImageView.image;
}
[self getVideoWithFollowAnmation:YES];
_firstWatch = NO;
[_currentPlayerIV jp_stopPlay];
[_currentPlayerIV jp_playVideoMuteWithURL:[NSURL URLWithString:_playUrl]
bufferingIndicator:[JPBufferView new]
progressView:[JPLookProgressView new]
configuration:^(UIView *view, JPVideoPlayerModel *playerModel) {
view.jp_muted = NO;
_firstWatch = YES;
if (_currentPlayerIV.image.size.width>0 && (_currentPlayerIV.image.size.width >= _currentPlayerIV.image.size.height)) { playerModel.playerLayer.videoGravity = AVLayerVideoGravityResizeAspect; view.jp_videoPlayerView.backgroundColor = [UIColor clearColor];
}else{
playerModel.playerLayer.videoGravity = AVLayerVideoGravityResizeAspectFill; view.jp_videoPlayerView.backgroundColor = [UIColor clearColor];
}
}];
}
短视频系统开发通过上述三个基本步骤就实现了整个功能,详细体验可以咨询查看我们的官网：www .yunbaokj. com，咨询我们的客服人员,想要了解我们产品更多功能请关注我们的账号，我们会持续更新于短视频功能实现的文章。
声明：本篇文章为原创文章，转载请注明出处及作者。
类似资料：