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

在curPlayIndexPath的setter:中更新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;
    }
}

在 curPlayingCell的setter:中控制视频的播放和暂停:

- (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-仿抖音视频轮播

推荐阅读更多精彩内容