登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

iOS仿抖音上下滑动播放视频

[复制链接]
来自: QuintGao 分类: iOS精品源码 上传时间: 2018-10-9 11:27:18
Tag:

项目介绍:

前言

上一篇文章仿写了抖音的左右滑动效果-iOS之仿抖音左右滑动效果,有兴趣的可以去GKNavigationBarViewController的demo中查看。

这篇文章主要是对抖音的上下滑动及视频播放功能做介绍。其中上下滑动用的是UIScrollview,包含3个子视图。视频播放用的是TX的独立播放器TXLiteAVSDK_Player,可实现音视频的点播、直播等功能。

demo中的视频是通过抓包获取的百度的伙拍小视频,仅供学习使用。

说明

1、上下滑动切换视图实现

主要是在UIScrollview的代理中做处理,且对滑动到第一个和最后一个时分开处理,看下代码


- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    // 小于等于三个,不用处理

    if (self.videos.count <= 3) return;

    // 上滑到第一个

    if (self.index == 0 && scrollView.contentOffset.y <= SCREEN_HEIGHT) {

        return;

    }

    // 下滑到最后一个

    if (self.index == self.videos.count - 1 && scrollView.contentOffset.y > SCREEN_HEIGHT) {

        return;

    }

    // 判断是从中间视图上滑还是下滑

    if (scrollView.contentOffset.y >= 2 * SCREEN_HEIGHT) {  // 上滑

        [self.player removeVideo];  // 在这里移除播放,解决闪动的bug

        if (self.index == 0) {

            self.index += 2;

            scrollView.contentOffset = CGPointMake(0, SCREEN_HEIGHT);

            self.topView.model = self.ctrView.model;

            self.ctrView.model = self.btmView.model;

        }else {

            self.index += 1;

            if (self.index == self.videos.count - 1) {

                self.ctrView.model = self.videos[self.index - 1];

            }else {

                scrollView.contentOffset = CGPointMake(0, SCREEN_HEIGHT);

                self.topView.model = self.ctrView.model;

                self.ctrView.model = self.btmView.model;

            }

        }

        if (self.index < self.videos.count - 1) {

            self.btmView.model = self.videos[self.index + 1];

        }

    }else if (scrollView.contentOffset.y <= 0) { // 下滑

        [self.player removeVideo];  // 在这里移除播放,解决闪动的bug

        if (self.index == 1) {

            self.topView.model = self.videos[self.index - 1];

            self.ctrView.model = self.videos[self.index];

            self.btmView.model = self.videos[self.index + 1];

            self.index -= 1;

        }else {

            if (self.index == self.videos.count - 1) {

                self.index -= 2;

            }else {

                self.index -= 1;

            }

            scrollView.contentOffset = CGPointMake(0, SCREEN_HEIGHT);

            self.btmView.model = self.ctrView.model;

            self.ctrView.model = self.topView.model;

            if (self.index > 0) {

                self.topView.model = self.videos[self.index - 1];

            }

        }

    }

}

滑动结束后开始播放


// 结束滚动后开始播放

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    if (scrollView.contentOffset.y == 0) {

        if (self.currentPlayId == self.topView.model.post_id) return;

        [self playVideoFrom:self.topView];

    }else if (scrollView.contentOffset.y == SCREEN_HEIGHT) {

        if (self.currentPlayId == self.ctrView.model.post_id) return;

        [self playVideoFrom:self.ctrView];

    }else if (scrollView.contentOffset.y == 2 * SCREEN_HEIGHT) {

        if (self.currentPlayId == self.btmView.model.post_id) return;

        [self playVideoFrom:self.btmView];

    }

    if (self.isPushed) return;

    // 当只剩最后两个的时候,获取新数据

    if (self.currentPlayIndex == self.videos.count - 2) {

        [self.viewModel refreshNewListWithSuccess:^(NSArray * _Nonnull list) {

            [self.videos addObjectsFromArray:list];

        } failure:^(NSError * _Nonnull error) {

            NSLog(@"%@", error);

        }];

    }

}

上下滑动的处理基本就这些,如果有不懂的可以下载demo查看。

2、播放器封装

这里封装的播放器用的是腾讯的视频点播TXVodPlayer。

创建播放器


- (TXVodPlayer *)player {

    if (!_player) {

        [TXLiveBase setLogLevel:LOGLEVEL_NULL];

        [TXLiveBase setConsoleEnabled:NO];

        _player = [TXVodPlayer new];

        _player.vodDelegate = self;

        _player.loop = YES; // 开启循环播放功能

    }

    return _player;

}

由于是多个视频切换播放,所以最好只用一个播放器,因此在切换视图后,需要播放器切换播放视图和播放地址,所以提供了下面的方法。


- (void)playVideoWithView:(UIView *)playView url:(NSString *)url {

    // 设置播放视图

    [self.player setupVideoWidget:playView insertIndex:0];

    // 准备播放

    [self playerStatusChanged:GKDYVideoPlayerStatusPrepared];

    // 开始播放

    if ([self.player startPlay:url] == 0) {

        // 这里可加入缓冲视图

    }else {

        [self playerStatusChanged:GKDYVideoPlayerStatusError];

    }

}

播放器状态监听,可获取播放状态及进度等


- (void)onPlayEvent:(TXVodPlayer *)player event:(int)EvtID withParam:(NSDictionary *)param {

    switch (EvtID) {

        case PLAY_EVT_PLAY_LOADING:{    // loading

            if (self.status == GKDYVideoPlayerStatusPaused) {

                [self playerStatusChanged:GKDYVideoPlayerStatusPaused];

            }else {

                [self playerStatusChanged:GKDYVideoPlayerStatusLoading];

            }

        }

            break;

        case PLAY_EVT_PLAY_BEGIN:{    // 开始播放

            [self playerStatusChanged:GKDYVideoPlayerStatusPlaying];

        }

            break;

        case PLAY_EVT_PLAY_END:{    // 播放结束

            [self playerStatusChanged:GKDYVideoPlayerStatusEnded];

        }

            break;

        case PLAY_ERR_NET_DISCONNECT:{    // 失败,多次重连无效

            [self playerStatusChanged:GKDYVideoPlayerStatusError];

        }

            break;

        case PLAY_EVT_PLAY_PROGRESS:{    // 进度

            if (self.status == GKDYVideoPlayerStatusPlaying) {

                self.duration = [param[EVT_PLAY_DURATION] floatValue];

                float currTime = [param[EVT_PLAY_PROGRESS] floatValue];

                float progress = self.duration == 0 ? 0 : currTime / self.duration;

                // 处理播放结束时,进度不更新问题

                if (progress >= 0.95) progress = 1.0f;

                //                float buffTime = [param[EVT_PLAYABLE_DURATION] floatValue];

                //                float burrProgress = self.duration == 0 ? 0 : buffTime / self.duration;

                if ([self.delegate respondsToSelector:@selector(player:currentTime:totalTime:progress:)]) {

                    [self.delegate player:self currentTime:currTime totalTime:self.duration progress:progress];

                }

            }

        }

            break;

        default:

            break;

    }

}

内容比较多,如果想要具体了解,还需要下载代码查看。

最后

demo的地址:GKDYVideo,由于github的限制,播放器无法上传,所以需要下载下来后pod install即可。

相关源码推荐:

我来说两句
*滑动验证:
所有评论(5)
打个酱油的 2018-10-9 15:43:06
感谢分享,楼主V5~
回复
莫应有道 2018-10-9 15:43:11
虽不明,但觉厉...
回复
Rf2698 2018-10-9 15:43:15
内容很好,棒棒哒
回复
Ek645 2018-10-9 15:43:19
支持,感谢,祝code4app越来越好~
回复
A7472 2018-10-9 15:43:34
不错不错,楼主辛苦了。。。
回复
kengsir 2018-10-9 15:43:50
好好 学习了 确实不错
回复
code4app热心网友 2018-10-9 16:59:05
楼主威武啊,Code4App有你更给力!
回复
code4app热心网友 2018-10-10 09:24:47
强烈支持楼主ing……
回复
M_N1310 2018-10-10 09:24:54
精华内容,楼主V5!
回复
提取码:  下载次数:143 状态:已购或VIP 售价:0(原价:15)金钱 下载权限:初级码农 
4012 0 143
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表