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

首先看下效果图

前言

上一篇文章仿写了抖音的左右滑动效果-iOS之仿抖音左右滑动效果，有兴趣的可以去GKNavigationBarViewController的demo中查看。 这篇文章主要是对抖音的上下滑动及视频播放功能做介绍。其中上下滑动用的是UIScrollview，包含3个子视图。视频播放用的是TX的独立播放器TXLiteAVSDK_Player，可实现音视频的点播、直播等功能。

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

说明

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

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

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

2. // 小于等于三个，不用处理

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

5. // 上滑到第一个

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

7. return;

8. }

9. // 下滑到最后一个

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

11. return;

12. }

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

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

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

17. if (self.index == 0) {

18. self.index += 2;

20. scrollView.contentOffset = CGPointMake(0, SCREEN_HEIGHT);

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

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

25. }else {

26. self.index += 1;

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

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

30. }else {

31. scrollView.contentOffset = CGPointMake(0, SCREEN_HEIGHT);

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

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

35. }

36. }

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

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

39. }

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

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

42. if (self.index == 1) {

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

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

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

46. self.index -= 1;

47. }else {

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

49. self.index -= 2;

50. }else {

51. self.index -= 1;

52. }

53. scrollView.contentOffset = CGPointMake(0, SCREEN_HEIGHT);

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

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

58. if (self.index > 0) {

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

60. }

61. }

62. }

63. }

64. 复制代码

滑动结束后开始播放

1. // 结束滚动后开始播放

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

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

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

5. [self playVideoFrom:self.topView];

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

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

8. [self playVideoFrom:self.ctrView];

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

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

11. [self playVideoFrom:self.btmView];

12. }

14. if (self.isPushed) return;

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

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

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

19. [self.videos addObjectsFromArray:list];

20. } failure:^(NSError * _Nonnull error) {

21. NSLog(@"%@", error);

22. }];

23. }

24. }

25. 复制代码

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

2、播放器封装

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

1. - (TXVodPlayer *)player {

2. if (!_player) {

3. [TXLiveBase setLogLevel:LOGLEVEL_NULL];

4. [TXLiveBase setConsoleEnabled:NO];

6. _player = [TXVodPlayer new];

7. _player.vodDelegate = self;

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

9. }

10. return _player;

11. }

12. 复制代码

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

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

2. // 设置播放视图

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

5. // 准备播放

6. [self playerStatusChanged:GKDYVideoPlayerStatusPrepared];

8. // 开始播放

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

10. // 这里可加入缓冲视图

11. }else {

12. [self playerStatusChanged:GKDYVideoPlayerStatusError];

13. }

14. }

15. 复制代码

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

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

2. switch (EvtID) {

3. case PLAY_EVT_PLAY_LOADING:{ // loading

4. if (self.status == GKDYVideoPlayerStatusPaused) {

5. [self playerStatusChanged:GKDYVideoPlayerStatusPaused];

6. }else {

7. [self playerStatusChanged:GKDYVideoPlayerStatusLoading];

8. }

9. }

10. break;

11. case PLAY_EVT_PLAY_BEGIN:{ // 开始播放

12. [self playerStatusChanged:GKDYVideoPlayerStatusPlaying];

13. }

14. break;

15. case PLAY_EVT_PLAY_END:{ // 播放结束

16. [self playerStatusChanged:GKDYVideoPlayerStatusEnded];

17. }

18. break;

19. case PLAY_ERR_NET_DISCONNECT:{ // 失败，多次重连无效

20. [self playerStatusChanged:GKDYVideoPlayerStatusError];

21. }

22. break;

23. case PLAY_EVT_PLAY_PROGRESS:{ // 进度

24. if (self.status == GKDYVideoPlayerStatusPlaying) {

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

27. float currTime = [param[EVT_PLAY_PROGRESS] floatValue];

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

31. // 处理播放结束时，进度不更新问题

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

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

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

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

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

39. }

40. }

41. }

42. break;

44. default:

45. break;

46. }

47. }

48. 复制代码

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

最后

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

相关资源：ios-iOS仿抖音上下滑动播放视频.zip-其它代码类资源