iOS-仿抖音视频轮播

我没有参照目前上最流行的方法:scrollView直接加载3个播放器界面的做法;因为当时做这个功能的时候,就直接开撸了;
我的视频轮播直接用UITableView实现的,通过缓存indexPath和cell来做当前视频的标记。

首先,tableView要开启分页模式: tableView.pageEnable = YES。

  • UIViewController中定义下面属性(在tableView滚动过程中,缓存这些属性):
// 当前播放的索引
@property (nonatomic, strong) NSIndexPath* curPlayIndexPath;
// 当前播放的cell(跟上面curPlayIndexPath是一一对应的)
@property (nonatomic, weak)  JFVideoCell* curPlayingCell; // 封装了视频播放控件和方法: play|pause

curPlayIndexPathsetter:中更新curPlayingCell:

- (void)setCurPlayIndexPath:(NSIndexPath *)curPlayIndexPath {
    if ([_curPlayingCell isEqual:curPlayIndexPath]) {
        return;
    }
    _curPlayIndexPath = curPlayIndexPath;
    JFVideoCell* cell = [self.tableView cellForRowAtIndexPath:_curPlayIndexPath];
    // 如果cell不存在,说明是第一个cell,还没入栈到tableView的重用队列,这里获取不到的;在cellForRowAtIndexPath回调中缓存这个cell
    if (cell) {
        self.curPlayingCell = cell;
    }
}

curPlayingCellsetter:中控制视频的播放和暂停:

- (void)setCurPlayingCell:(JFVideoCell *)curPlayingCell {
    // 不要重复设置
    if (_curPlayingCell && _curPlayingCell == curPlayingCell) {
        return;
    }
    // 当前播放的cell存在时,暂停播放
    if (_curPlayingCell) {
        [_curPlayingCell pause];
    }
    // 更新cell
    _curPlayingCell = curPlayingCell;
    // 播放新缓存的cell
    if (_curPlayingCell) {
        [_curPlayingCell playVideo];
    }

}

好了,前置条件已准备好;下面开始分析tableView的滚动回调情况:
· tableView正常滑动,会触发scrollViewDidScroll回调,停止滚动时会触发 scrollViewDidEndDecelerating回调;
· 点击屏幕状态栏时,只触发scrollViewDidScroll,不会在停止滚动时触发 scrollViewDidEndDecelerating回调;
· tableView初始加载完毕时,既不触发scrollViewDidScroll回调,也不触发 scrollViewDidEndDecelerating回调,只触发tableView: cellForRowAtIndexPath:回调;
那么,对上面3种情况,分别进行分析。


  • tableView正常滑动时:
    正常滑动,tableView 会触发回调:scrollViewDidEndDecelerating:,在这个回调中,计算当前 cell 的 indexPath。
// 当前cell的行数
NSInteger row = (NSInteger)scrollView.contentOffset.y / SCREEN_HEIGHT;
self.curPlayIndexPath = [NSIndexPath indexPathForRow:row inSection:0];

这个cell和indexPath都会被缓存下来,视频也会被播放;

  • 只触发scrollViewDidScroll,而不触发scrollViewDidEndDecelerating的情况:
    点击了屏幕状态栏,tableView滑动到顶部。
    这个时候,self.curPlayIndexPath就只能在scrollViewDidScroll的回调中设置了:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint velocity = [scrollView.panGestureRecognizer velocityInView:self.view];
    // 当前所有的视频个数
    NSInteger total = [self.vmData numberOfRowsInSection:0];
    CGFloat contentOffsetY = scrollView.contentOffset.y;
    NSInteger row = self.curPlayIndexPath ? self.curPlayIndexPath.row : 0;
    CGFloat curCellStartY = row * JFSCREEN_HEIGHT;
    // 在最后一个cell的位置
    if (total > 0 && row == total - 1) {
        // 不是上拉刷新
        if (velocity.y > 0) {
            scrollView.pagingEnabled = YES;
        }
        // 上拉刷新时:要屏蔽分页效果,否则MJRefresh悬停会导致cell位置不在屏幕边界
        else if (velocity.y < 0) {
            scrollView.pagingEnabled = NO;
        }
    }
    // 一种情况:scrollViewDidEndDecelerating没有触发时,且当前滚动到了顶部,重置当前播放indexPath为0位置
    if (contentOffsetY == 0 && !scrollView.isTracking) {
        self.curPlayIndexPath = [NSIndexPath indexPathForRow:0 inSection:0];
        return;
    }
    // 当前播放的cell的indexPath不在屏幕可见区内,就要设置indexPath为空,将当前播放暂停
    if (contentOffsetY <= curCellStartY - JFSCREEN_HEIGHT || contentOffsetY >= curCellStartY + JFSCREEN_HEIGHT) {
        if (self.curPlayIndexPath) {
            self.curPlayIndexPath = nil;
        }
    }
    // 而cell能到屏幕可见区内的话,scrollViewDidEndDecelerating就一定会被触发,到那个方法里面去重置当前播放的indexPath
}
  • 既不触发scrollViewDidScroll,也不触发scrollViewDidEndDecelerating的情况:
    tableView初始状态;这时只有在tableView: cellForRowAtIndexPath:回调中缓存indexPath了;
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    JFVideoCell* cell = [tableView dequeueReusableCellWithIdentifier:@"JFVideoCell"];
    // 设置视频数据模型
    cell.model = [self.vmData modelForRowAtIndexPath:indexPath];
    CGFloat contentOffsetY = tableView.contentOffset.y;
    CGFloat headerHeight = tableView.mj_header.height;
f    // 这种情况为:界面和数据刚加载完毕,不会触发任何滚动事件
    if (indexPath.row == 0 && contentOffsetY > -0.01 - headerHeight && contentOffsetY < 0.01 + headerHeight) {
        // row==0时,因为cell还没入栈,cellForRowAtIndexPath:获取不到cell;不能自动播放,这里要手动
        self.curPlayIndexPath = indexPath;
        self.curPlayingCell = cell;
    }
    return cell;
}
  • 到这里,基本的滑动播放视频就实现了。但是,还有个情况:
    从本界面跳转到别的界面时,需要暂停当前的播放;然后,又从别的界面回到本界面时,要恢复当前播放。
    这个 当前 , 就是缓存的 curPlayingCell 属性。
    既然这样,方法就简单了:
// 转场时:暂停当前播放
- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
    // 暂停当前的播放
    if (self.curPlayingCell) {
        [self.curPlayingCell pause];
    }
}

// 回场时:继续当前播放
- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    // 继续当前的播放
    if (self.curPlayingCell) {
        [self.curPlayingCell playVideo];
    }
}


实现完毕!
我们的APP即将上线了,期待下载链接!

你可能感兴趣的:(iOS-仿抖音视频轮播)