[iOS]仿抖音火山视频滑动播放 UIScrollView 自动播放

简概:

本次文章分别讲述两种视频列表全屏滑动切换播放的视方式。
Demo 中使用的播放器原本是 Bilibili/ijkplayer 后续为了方便集成，改为了ksvc/KSYMediaPlayer_iOS
如果你有问题，或者对下述文字有任何意见与建议，除了在文章最后留言，还可以在微博 @茅坑里的石头-_-上给我留言，或者联系我的邮箱hu-yangyang@qq.com，以及访问我的Github。
文章某尾会给到Demo(请在真机上调试)。

Demo滑动效果

解决方案一

UIScrollView + KSYMediaPlayer 这里是用UIScrollView 和三张背景图片做无限轮播，播放器铺在上方。

- (instancetype)initWithFrame:(CGRect)frame
{
  self = [super initWithFrame:frame];
  if(self)
  {
    self.contentSize = CGSizeMake(0, frame.size.height * 3);
    self.contentOffset = CGPointMake(0, frame.size.height);
    self.pagingEnabled = YES;
    self.opaque = YES;
    self.backgroundColor = [UIColor clearColor];
    self.showsHorizontalScrollIndicator = NO;
    self.showsVerticalScrollIndicator = NO;
    self.delegate = self;
    
    self.upperImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
    self.middleImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, frame.size.height, frame.size.width, frame.size.height)];
    self.downImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, frame.size.height*2, frame.size.width, frame.size.height)];
    [self addSubview:self.upperImageView];
    [self addSubview:self.middleImageView];
    [self addSubview:self.downImageView];
    
  }
  return self;
}

-(void) initPlayer
{
  KSYMoviePlayerController *_player;
  _player = [[KSYMoviePlayerController alloc] initWithContentURL: [NSURL URLWithString:self.live.VideoAddress]];
  _player.view.backgroundColor = [UIColor clearColor];
  [self.player setBufferSizeMax:1];
  _player.view.autoresizesSubviews = true;
  [_player.view setFrame: self.view.bounds];  // player's frame must match parent's
  _player.view.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
  _player.shouldAutoplay = TRUE;
  _player.shouldLoop = YES;
  _player.scalingMode = MPMovieScalingModeAspectFit;
  [_player prepareToPlay];
 
  self.player = _player;
  self.player.view.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
  self.player.shouldAutoplay = YES;
  self.view.autoresizesSubviews = YES;
  [self.playerScrollView addSubview:self.player.view];
  
  [[NSNotificationCenter defaultCenter]addObserver:self
                                          selector:@selector(handlePlayerNotify:)
                                              name:(MPMoviePlayerFirstVideoFrameRenderedNotification)
                                            object:nil];
}

当scrollview 滑动时，当整页翻过时，则将scrollview迅速复位，并完成图片替换，以及上下图的预加载。

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
  [self switchPlayer:scrollView];
}

- (void)switchPlayer:(UIScrollView*)scrollView
{
  CGFloat offset = scrollView.contentOffset.y;
  if (self.lives.count) {
    if (offset >= 2*self.frame.size.height)
    {
      // slides to the down player
      scrollView.contentOffset = CGPointMake(0, self.frame.size.height);
      _currentIndex++;
      self.upperImageView.image = self.middleImageView.image;
      self.middleImageView.image = self.downImageView.image;
      if (_currentIndex == self.lives.count - 1)
      {
        _downLive = [self.lives firstObject];
      } else if (_currentIndex == self.lives.count)
      {
        _downLive = self.lives[1];
        _currentIndex = 0;
        
      } else
      {
        _downLive = self.lives[_currentIndex+1];
      }
      [self prepareForImageView:self.downImageView withLive:_downLive];
      if (_previousIndex == _currentIndex) {
        return;
      }
      if ([self.playerDelegate respondsToSelector:@selector(playerScrollView:currentPlayerIndex:)]) {
        [self.playerDelegate playerScrollView:self currentPlayerIndex:_currentIndex];
        _previousIndex = _currentIndex;
        NSLog(@"current index in delegate: %ld -%s",_currentIndex,__FUNCTION__);
      }
    }
    else if (offset <= 0)
    {
      // slides to the upper player
      scrollView.contentOffset = CGPointMake(0, self.frame.size.height);
      _currentIndex--;
      self.downImageView.image = self.middleImageView.image;
      self.middleImageView.image = self.upperImageView.image;
      if (_currentIndex == 0)
      {
        _upperLive = [self.lives lastObject];
        
      } else if (_currentIndex == -1)
      {
        _upperLive = self.lives[self.lives.count - 2];
        _currentIndex = self.lives.count-1;
        
      } else
      {
        _upperLive = self.lives[_currentIndex - 1];
      }
      [self prepareForImageView:self.upperImageView withLive:_upperLive];
      if (_previousIndex == _currentIndex) {
        return;
      }
      if ([self.playerDelegate respondsToSelector:@selector(playerScrollView:currentPlayerIndex:)]) {
        [self.playerDelegate playerScrollView:self currentPlayerIndex:_currentIndex];
        _previousIndex = _currentIndex;
        NSLog(@"current index in delegate: %ld -%s",_currentIndex,__FUNCTION__);
      }
    }
  }
}

- (void) prepareForImageView: (UIImageView *)imageView withLive:(VideoInfoModel *)live
{
  [imageView sd_setImageWithURL:[NSURL URLWithString:live.coverImageAddress]];
}

上述步骤完成后通知播放器重新加载视频

#pragma mark DYPlayerScrollViewDelegate

- (void)playerScrollView:(DYPlayerScrollView *)playerScrollView currentPlayerIndex:(NSInteger)index
{
  NSLog(@"current index from delegate:%ld  %s",(long)index,__FUNCTION__);
  if (self.index == index) {
    return;
  } else {
    [self reloadPlayerWithLive:self.dataList[index]];
    
    self.index = index;
  }
}

- (void)reloadPlayerWithLive:(VideoInfoModel *)live
{
  [self.player reset:false];
  [self.player.view setHidden:true];
  [self.player setUrl:[NSURL URLWithString:live.VideoAddress]];
  [self.player setShouldAutoplay:YES];
  [self.player setBufferSizeMax:1];
  [self.player setShouldLoop:YES];
  self.player.view.backgroundColor = [UIColor clearColor];
  [self.player prepareToPlay];
}

方案一总结：demo 实现效果会发现，每次视频滑动切换的时候，重新加载视频直到视频首帧出现都需要时间，这样的播放体验并不是很流畅。我们不得不思考是否有更优的实现方式。

解决方案二

在方案一种我们成功的实现的视频列表滑动切换这一效果，但是视频每次重新加载直到首帧出现这个过程必定是耗时的（首帧加载速度可以通过cdn 优化，以及播放器优化），那我们是否可以尝试像方案一中图片处理的方式一样。有两个背景播放器去缓冲对应视频list 的上一个视频以及下一个视频。顺着这样的思路，我们实现了像如开篇效果演示的gif 的流畅体验。(因为方案二是基于方案一的，所以以下就简叙下思路。)
与方案一不同的是这里我们是用的是三个播放器，两个用作背景缓冲。

@property (nonatomic, strong) KSYMoviePlayerController *upPerPlayer, *middlePlayer, *downPlayer;

- (instancetype)initWithFrame:(CGRect)frame
{
  self = [super initWithFrame:frame];
  if(self)
  {
// 在DYPlayerScrollView init方法中分别初始化 upperImageView middleImageView downImageView 
以及 upPerPlayer middlePlayer downPlayer
  }
}

当scrollview 滑动时，当整页翻过时，则将scrollview迅速复位，除了完成图片的操作，这里还要完成播放器的操作。

- (void)switchPlayer:(UIScrollView*)scrollView
{
  CGFloat offset = scrollView.contentOffset.y;
  if (self.lives.count) {
    if (offset >= 2*self.frame.size.height)
    {
      // slides to the down player
      scrollView.contentOffset = CGPointMake(0, self.frame.size.height);
      _currentIndex++;
      self.upperImageView.image = self.middleImageView.image;
      self.middleImageView.image = self.downImageView.image;

      if (self.upPerPlayer.view.frame.origin.y == 0) {
        self.upPerPlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 2, SCREEN_WIDTH, SCREEN_HEIGHT);
      }else{
        self.upPerPlayer.view.frame = CGRectMake(0, self.upPerPlayer.view.frame.origin.y - SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
      }
      
      if (self.middlePlayer.view.frame.origin.y == 0) {
        self.middlePlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 2, SCREEN_WIDTH, SCREEN_HEIGHT);
      }else{
        self.middlePlayer.view.frame = CGRectMake(0, self.middlePlayer.view.frame.origin.y - SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
      }
      

      
      if (_currentIndex == self.lives.count - 1)
      {
        _downLive = [self.lives firstObject];
      } else if (_currentIndex == self.lives.count)
      {
        _downLive = self.lives[1];
        _currentIndex = 0;
        
      } else
      {
        _downLive = self.lives[_currentIndex+1];
      }
      [self prepareForImageView:self.downImageView withLive:_downLive];
      
      
      
      if (self.downPlayer.view.frame.origin.y == 0) {
        self.downPlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 2, SCREEN_WIDTH, SCREEN_HEIGHT);
      }else{
        self.downPlayer.view.frame = CGRectMake(0, self.downPlayer.view.frame.origin.y - SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
      }
      
      if (self.upPerPlayer.view.frame.origin.y == SCREEN_HEIGHT * 2) {
        [self prepareForVideo:self.upPerPlayer withLive:_downLive];
      }
      if (self.middlePlayer.view.frame.origin.y == SCREEN_HEIGHT * 2) {
        [self prepareForVideo:self.middlePlayer withLive:_downLive];
      }
      if (self.downPlayer.view.frame.origin.y == SCREEN_HEIGHT * 2) {
        [self prepareForVideo:self.downPlayer withLive:_downLive];
      }
      
      
      
      if (_previousIndex == _currentIndex) {
        return;
      }
      if ([self.playerDelegate respondsToSelector:@selector(playerScrollView:currentPlayerIndex:)]) {
        [self.playerDelegate playerScrollView:self currentPlayerIndex:_currentIndex];
        _previousIndex = _currentIndex;
        NSLog(@"current index in delegate: %ld -%s",_currentIndex,__FUNCTION__);
      }
    }
    else if (offset <= 0)
    {
      // slides to the upper player
      scrollView.contentOffset = CGPointMake(0, self.frame.size.height);
      _currentIndex--;
      self.downImageView.image = self.middleImageView.image;

      if (self.downPlayer.view.frame.origin.y == 2 * SCREEN_HEIGHT) {
        self.downPlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 0, SCREEN_WIDTH, SCREEN_HEIGHT);
      }else{
        self.downPlayer.view.frame = CGRectMake(0, self.downPlayer.view.frame.origin.y + SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
      }
      
      self.middleImageView.image = self.upperImageView.image;

      
      if (self.middlePlayer.view.frame.origin.y == 2 * SCREEN_HEIGHT) {
        self.middlePlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 0, SCREEN_WIDTH, SCREEN_HEIGHT);
      }else{
        self.middlePlayer.view.frame = CGRectMake(0, self.middlePlayer.view.frame.origin.y + SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
      }
     
      
      
      if (_currentIndex == 0)
      {
        _upperLive = [self.lives lastObject];
        
      } else if (_currentIndex == -1)
      {
        _upperLive = self.lives[self.lives.count - 2];
        _currentIndex = self.lives.count-1;
        
      } else
      {
        _upperLive = self.lives[_currentIndex - 1];
      }
      [self prepareForImageView:self.upperImageView withLive:_upperLive];
      
      if (self.upPerPlayer.view.frame.origin.y == 2 * SCREEN_HEIGHT) {
        self.upPerPlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 0, SCREEN_WIDTH, SCREEN_HEIGHT);
      }else{
        self.upPerPlayer.view.frame = CGRectMake(0, self.upPerPlayer.view.frame.origin.y + SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
      }
      
      if (self.upPerPlayer.view.frame.origin.y == 0 ) {
        [self prepareForVideo:self.upPerPlayer withLive:_upperLive];
      }
      if (self.middlePlayer.view.frame.origin.y == 0 ) {
        [self prepareForVideo:self.middlePlayer withLive:_upperLive];
      }
      if (self.downPlayer.view.frame.origin.y == 0 ) {
        [self prepareForVideo:self.downPlayer withLive:_upperLive];
      }
      
      if (_previousIndex == _currentIndex) {
        return;
      }
      if ([self.playerDelegate respondsToSelector:@selector(playerScrollView:currentPlayerIndex:)]) {
        [self.playerDelegate playerScrollView:self currentPlayerIndex:_currentIndex];
        _previousIndex = _currentIndex;
        NSLog(@"current index in delegate: %ld -%s",_currentIndex,__FUNCTION__);
      }
    }
  }
}

监听视频准备播放，以及第一帧出现通知，做合适的逻辑处理。

  [[NSNotificationCenter defaultCenter]addObserver:self
                                          selector:@selector(handlePlayerNotify:)
                                              name:(MPMoviePlayerFirstVideoFrameRenderedNotification)
                                            object:nil];
  [[NSNotificationCenter defaultCenter]addObserver:self
                                          selector:@selector(handlePlayerPreparedToPlayNotify:)
                                              name:(MPMediaPlaybackIsPreparedToPlayDidChangeNotification)
                                            object:nil];

方案二总结：从demo的运行效果来看，流畅不卡顿。这应该是现在主流的视频列表滑动播放比较好的实现方式了

Demo传送门

最后编辑于：2017.12.11 11:36:51

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,117评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,328评论 1赞 293
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,839评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,007评论 0赞 206
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,384评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,629评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,880评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,593评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,313评论 1赞 243
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,575评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,066评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,392评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,052评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,082评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,844评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,662评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,575评论 2赞 270

[iOS]仿抖音 火山视频滑动播放 UIScrollView 自动播放

简概:

解决方案一

解决方案二

推荐阅读更多精彩内容

[iOS]仿抖音火山视频滑动播放 UIScrollView 自动播放