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

简概:

• 本次文章分别讲述两种视频列表全屏滑动切换播放的视方式。
• Demo 中使用的播放器原本是 Bilibili/ijkplayer 后续为了方便集成，改为了ksvc/KSYMediaPlayer_iOS
• 如果你有问题，或者对下述文字有任何意见与建议，除了在文章最后留言，还可以在微博@茅坑里的石头-_-上给我留言，或者联系我的邮箱[email protected]，以及访问我的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传送门