文档章节

[iOS]仿微博视频边下边播之滑动TableView自动播放

NewPan_
 NewPan_
发布于 2016/10/27 23:50
字数 4143
阅读 364
收藏 0

Tips:这次的内容分为两篇文章讲述 01、[iOS]仿微博视频边下边播之封装播放器 讲述如何封装一个实现了边下边播并且缓存的视频播放器。 02、[iOS]仿微博视频边下边播之滑动TableView自动播放 讲述如何实现在tableView中滑动播放视频,并且是流畅,不阻塞线程,没有任何卡顿的实现滑动播放视频。同时也将讲述当tableView滚动时,以什么样的策略,来确定究竟哪一个cell应该播放视频。


上篇文章讲述了封装一个边下边播,并且带有缓存功能的播放器。如果你还没有看,请点击跳转[iOS]仿微博视频边下边播之封装播放器 。接下来,讲述如何将这个播放器应用到tableView里。并且达到如下效果。

01、dispatch_semaphore信号量?

dispatch_semaphore 信号量基于计数器的一种多线程同步机制。在多个线程访问共有资源时候,会因为多线程的特性而引发数据出错的问题。

 dispatch_queue_t queue = dispatch_get_global_queue(0, 0);

// “创建方法里会传入一个long型的参数,这个东西你可以想象是一个库存”

    dispatch_semaphore_t semaphore = dispatch_semaphore_create(1);        NSMutableArray *array = [NSMutableArray array];   

for (int index = 0; index < 10000; index++) {        
    dispatch_async(queue, ^(){
        // “每运行一次,会先清一个库存,如果库存为0,那么根据传入的等待时间,决定等待增加库存的时间
        //如果设置为DISPATCH_TIME_FOREVER,那么意思就是永久等待增加库存,否则就永远不往下面走”

            dispatch_semaphore_wait(semaphore, DISPATCH_TIME_FOREVER); 

            NSLog(@"addd :%d", index);           

        [array addObject:[NSNumber numberWithInt:index]];

        // 每运行一次,增加一个库存

            dispatch_semaphore_signal(semaphore);          });     }

dispatch_semaphore_wait(semaphore, DISPATCH_TIME_FOREVER); 如果semaphore计数大于等于1.计数-1,返回,程序继续运行。 如果计数为0,则等待。 这里设置的等待时间是一直等待。

dispatch_semaphore_signal(semaphore); 计数+1. 在这两句代码中间的执行代码,每次只会允许一个线程进入,这样就有效的保证了在多线程环境下,只能有一个线程进入。

  • AVPlayer底层是有信号量等待的特性的。具体表现在,“AVPlayer的replaceCurrentItemWithPlayerItem(用来切换视频的)方法在切换视频时底层会调用信号量等待,然后导致当前线程卡顿,如果在UITableViewCell中切换视频播放使用这个方法,会导致当前线程冻结几秒钟。” 这里说的线程是UI线程,即主线程,主线程冻结的结果就是主线程阻塞,带来卡顿和不流畅。

  • 你可能会想,那就不要在主线程切换视频,不就不卡顿主线程了吗?如果你这么做,那你就不能保证视频播放是及时响应的。同时,因为子线程你不知道什么时候调用,你也不能保证你能及时关闭不需要播放的视频。也就是说,如果基于以上思路,当你滑动tableView时,可能会出现多个cell同时播放视频,而且会出现你要播的播不了,你想掐死的掐不死。

02、切换视频解决方案?

在tableView里播放视频,当用户滑动时,肯定是频繁切换视频的。上面讲了使用AVPlayer自带的replaceCurrentItemWithPlayerItem来切换视频带来的问题,我们得出的结论是:

  • 不能使用replaceCurrentItemWithPlayerItem方法切换视频。
  • 不能在子线程切换视频。

解决方案一

当出现这种问题的时候,我只能跑到官方文档去找答案了。

[@interface](https://my.oschina.net/u/996807) AVQueuePlayer : AVPlayer 

我在官方文档里找到AVQueuePlayer,他是AVPlayer的一个子类,他会自己维护一个播放队列。并且提供方法,可以插入播放条目,也可以移除播放条目,然后切换视频。

// 创建AVQueuePlayer
NSArray *items = <#An array of player items#>;
AVQueuePlayer *queuePlayer = [[AVQueuePlayer alloc] initWithItems:items];

// 插入item
- (void)insertItem:(AVPlayerItem *)item afterItem:(nullable AVPlayerItem *)afterItem;

// 移除item
- (void)removeItem:(AVPlayerItem *)item;

// 切换视频
- (void)advanceToNextItem;

这个类还是很好使的,可以在不卡顿主线程的情况下流畅切换视频。但是他有他的坑,是我多次试验以后发现的,就是重播视频的时候,如果你放在那里不动,他大概会重复播放十次左右,然后播放器就莫名其妙的死掉了,这个时候你没有办法重新唤醒他。至于什么原因导致的,我暂时还没有找到。如果你知道,请你务必在下面留言,让更多人看到。

解决方案二

上面的那个方案被我否了,接下来,我采取的是尝试每次切换视频的时候都重新创建播放器,重新建立网络请求。总之,就是所有的配置都重新创建。刚开始的时候,我担心这样会造成处理器负担,但是实际使用起来,发现并没有任何性能问题。但是前提是,在重新创建之前,把所有的请求释放掉,同时把之前的播放器也释放,还有预览图层也释放。

03、重播?

先来看一下AVFoundation下用来表示时间的结构体CMTime,AVFoundation下的时间刻度是以最精准的分数形式来表示的。他有两个重要的值,value表示分子,timescale表示分母。

typedef struct
{
   CMTimeValue value;  // 分子
   CMTimeScale timescale;  // 分母
   CMTimeFlags flags;  
   CMTimeEpoch epoch;  
} CMTime;

比如说我们要表示视频的起点,就是0秒,那就可以写成CMTimeMake(0, 1)。

我们的播放器是支持自动重播的,所以我们要在系统的通知中心监听播放器播放完成的通知,在接收到通知后,进行对应的处理。

  // 监听播放结束通知

  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(playerItemDidPlayToEnd:) name:AVPlayerItemDidPlayToEndTimeNotification object:nil];

- (void)playerItemDidPlayToEnd:(NSNotification *)notification{

    // 重复播放, 从起点开始重播, 没有内存暴涨     __weak typeof(self) weak_self = self;     [self.player seekToTime:CMTimeMake(0, 1) completionHandler:^(BOOL finished) {         __strong typeof(weak_self) strong_self = weak_self;         if (!strong_self) return;         [strong_self.player play];     }]; }

04、滑动tableView自动播放?

首先是一启动,应该自动去可见cell中查找第一个需要播放视频的cell,如果找到就开始播放。

-(void)playVideoInVisiableCells{

         NSArray *visiableCells = [self.tableView visibleCells];          // 在可见cell中找到第一个有视频的cell     JPVideoPlayerCell *videoCell = nil;     for (JPVideoPlayerCell *cell in visiableCells) {         if (cell.videoPath.length > 0) {             videoCell = cell;             break;         }     }          // 如果找到了, 就开始播放视频     if (videoCell) {         self.playingCell = videoCell;         self.currentVideoPath = videoCell.videoPath;         JPVideoPlayer *player = [JPVideoPlayer sharedInstance];         [player playWithUrl:[NSURL URLWithString:videoCell.videoPath] showView:videoCell.containerView];         player.mute = YES;     } }

接下来就是滚动tableView的时候,播放视频。在做之前,首先,我们要先制定一个规则来确定,滚动的时候究竟哪一个cell应该播放视频。我画了一张图,一起来看一下。

播放规则.png

我的规则是:当tableView滑动的时候,我会播放可见cell中,最靠近屏幕中心的那个cell的视频。如果最靠近屏幕中心的那个cell没有视频,就会按照这个规则去其他可见cell中找,如果都没有找到,就不播放视频。规则有了,接下来就是去实现。其实,实现的时候,我们应该换一个思路,就是,只有那个cell需要播放视频,才会参与筛选是否是最靠近屏幕中心的cell。这样就避免了递归查找。

-(void)handleScroll{

         // 找到下一个要播放的cell(最在屏幕中心的)     JPVideoPlayerCell *finnalCell = nil;     NSArray *visiableCells = [self.tableView visibleCells];     NSMutableArray *indexPaths = [NSMutableArray array];     CGFloat gap = MAXFLOAT;     for (JPVideoPlayerCell cell in visiableCells) {                  [indexPaths addObject:cell.indexPath];                  if (cell.videoPath.length > 0) { // 如果这个cell有视频            CGPoint coorCentre = [cell.superview convertPoint:cell.center toView:nil];       CGFloat delta = fabs(coorCentre.y-[UIScreen mainScreen].bounds.size.height0.5);           if (delta < gap) {               gap = delta;               finnalCell = cell;           }       }   }          // 注意, 如果正在播放的cell和finnalCell是同一个cell, 不应该在播放     if (finnalCell != nil && self.playingCell != finnalCell) {         [[JPVideoPlayer sharedInstance]stop];         [[JPVideoPlayer sharedInstance]playWithUrl:[NSURL URLWithString:finnalCell.videoPath] showView:finnalCell.containerView];         self.playingCell = finnalCell;         self.currentVideoPath = finnalCell.videoPath;         [JPVideoPlayer sharedInstance].mute = YES;         return;     }          // 再看正在播放视频的那个cell移出视野, 则停止播放     BOOL isPlayingCellVisiable = YES;     if (![indexPaths containsObject:self.playingCell.indexPath]) {         isPlayingCellVisiable = NO;     }     if (!isPlayingCellVisiable && self.playingCell) {         [self stopPlay];     }

}

这里没有难点,唯一可以讲一下的就是坐标之间的转换。我们拿到的cell的中心点的坐标是tableView的坐标,但是我们计算各个中心点离屏幕中心点之间的距离,用的是屏幕Window的坐标,所以要先将这个中心点的坐标转换为屏幕的坐标,再进行计算。但是,你也可以不转换坐标,因为他们是同一个坐标系的(tableView的坐标系)。可是,我个人的编程习惯是先转换,再计算。因为我觉得会比较清晰一点。尤其是当我们做复杂的过渡动画的时候,有这个意识,你会发现条理会很清晰。

05、什么时候播?

你肯定告诉我,滑动的时候播。这个回答是正确的,但是也是不正确的,因为我们尝试用编程的思想来思考这个问题。tableView的滚动过程分为两种情况:

  • 将要开始拖动 --> 开始拖动 --> 滚动 --> 松手 --> 静止 --> 结束
  • 将要开始拖动 --> 开始拖动 --> 滚动 --> 松手 --> 开始减速 --> 减速完成 --> 静止 --> 结束

首先要肯定的是,不能在滚动的时候调用视频播放的逻辑。这一点应该没有异议。原因是,第一,这个方法会来很多很多次,而且从实现上来说,不可能一调用滚动的代理就实现播放。第二从用户角度来说,在滑动的时候,他自己也没有决定要看哪一个cell。所以在滚动时,我们不做反应。

其次是开始拖动时,也不要作反应,因为,这个时候作反应没有意义。松手的时候,因为有松手时静止和松手时滚动两种情况,所以我不做处理。

逐渐排除下来,最后,适合调用播放逻辑的,只剩下“静止”这个动作了。我们来看一下静止对应的代理方法:

// 松手时已经静止,只会调用scrollViewDidEndDragging
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{

    if (decelerate == NO) { // scrollView已经完全静止         [self handleScroll];     } }

// 松手时还在运动, 先调用scrollViewDidEndDragging,在调用scrollViewDidEndDecelerating
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    // scrollView已经完全静止     [self handleScroll]; }

做到这里,我们已经能够实现tableView在滑动的时候,流畅的播放视频了。

06、现有的问题(bug)?

很多有经验的老司机,应该已经看出来问题了。问题就是,我们现有的规则是:

  • 在可见cell中,播放最靠近屏幕中心的cell的视频。
  • 当tableView滑动静止的时候调用视频播放逻辑。

不可及cell.png

还记得这张图吗?仔细想一下,按照我们上面的规则,cell01是永远不可能在静止的时候成为离屏幕中心最近那个cell的(也有例外,那就是其他三个cell都没有要播放视频。但是,我们的程序不能有设计缺陷)。同样的,底部也有一个这样的cell,不能滚动到屏幕中心。我把这样的cell叫做“滑动不可及cell”,下文都会以这个词来称呼归类这一类cell。

所以,我在上面的两点规则上加了一条:

  • 如果“滑动不可及cell”完整出现在视野,那么优先播放“滑动不可及cell”的视频,注意,这里说得是“滑动不可及cell完整出现在视野”,注意点是“完整出现”。

有了规则就依照这个规则来解决。首先,我们面对的第一个问题是,我怎么知道我的列表里有几个这样的cell?不知道,没关系,我们可以实际测量。我以iPhone6s为样机,进行了测量,我这里的测量前提是,我们的cell上的视频尺寸和cell的尺寸是一致的。我的测量结果如下:

每屏cell个数        4  3  2

    滑动不可及cell个数   1 1 0

我这里需要说明的是,我不可能知道你项目的具体需求,但是,如果你的实际需求和我文章中的不一样,那你根据我现有思路进行更改就可以了。

接下来继续,根据以上的分析,我首先把测量结果保存到一个字典中,以每屏可见cell的最大个数为key, 对应的不能播放视频的cell为value。以后,你只要根据行高和屏幕高度这两个值算出每屏有多少cell,就能取出有多少个cell是滑动不可及cell。

-(NSDictionary *)dictOfVisiableAndNotPlayCells{

    // 以每屏可见cell的最大个数为key, 对应的不能播放视频的cell为value     // 只有每屏可见cell数在3以上时,才会出现滑动时有cell的视频永远播放不到     // 以下值都是实际测量得到     if (!_dictOfVisiableAndNotPlayCells) {         _dictOfVisiableAndNotPlayCells = @{                                            @"4" : @"1",                                            @"3" : @"1",                                            };     }     return _dictOfVisiableAndNotPlayCells; }

其次,我把cell归为三个类型,我用一个枚举来表示:

// 播放滑动不可及cell的类型
typedef NS_ENUM(NSUInteger, PlayUnreachCellStyle) {

    PlayUnreachCellStyleUp = 1, // 顶部不可及     PlayUnreachCellStyleDown = 2, // 底部不可及     PlayUnreachCellStyleNone = 3 // 播放滑动可及cell };

当每个cell来到cellForRowAtIndexPath方法的时候,我就根据cell的row数和最大不可及cell数,给每个cell打一个标签。

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

   
JPVideoPlayerCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseID forIndexPath:indexPath];

    if (self.maxNumCannotPlayVideoCells > 0) {         if (indexPath.row <= self.maxNumCannotPlayVideoCells-1) {             cell.cellStyle = PlayUnreachCellStyleUp;         }         else if (indexPath.row >= self.listArr.count-self.maxNumCannotPlayVideoCells){             cell.cellStyle = PlayUnreachCellStyleDown;         }         else{             cell.cellStyle = PlayUnreachCellStyleNone;         }     }          return cell; }

在播放逻辑里加入这些代码,用来维护我上面加的那条规则:

        // 优先查找滑动不可及cell

            if (cell.cellStyle != PlayUnreachCellStyleNone) {                 // 并且不可及cell要全部露出                 if (cell.cellStyle == PlayUnreachCellStyleUp) {                     CGPoint cellLeftUpPoint = cell.frame.origin;                     // 不要在边界上                     cellLeftUpPoint.y += 1;                     CGPoint coorPoint = [cell.superview convertPoint:cellLeftUpPoint toView:nil];                     CGRect windowRect = self.view.window.bounds;                     BOOL isContain = CGRectContainsPoint(windowRect, coorPoint);                     if (isContain) {                          finnalCell = cell;                     }                 }                 else if (cell.cellStyle == PlayUnreachCellStyleDown){                     CGPoint cellLeftUpPoint = cell.frame.origin;                     cellLeftUpPoint.y += cell.bounds.size.height;                     // 不要在边界上                     cellLeftUpPoint.y -= 1;                     CGPoint coorPoint = [cell.superview convertPoint:cellLeftUpPoint toView:nil];                     CGRect windowRect = self.view.window.bounds;                     BOOL isContain = CGRectContainsPoint(windowRect, coorPoint);                     if (isContain) {                         finnalCell = cell;                     }                 }             } 到这里为止,我们的播放逻辑基本上没有问题了。

07、真的没有问题了?

其实还是有问题的,就问题就是,当你快速滑动的时候,会出现cell循环利用的图像错误。可以想象,在快速滑动的时候,我们没有做任何处理,上个cell的视频图像在cell移出视野时没有清除,那当这个cell被循环利用的时候,就会把上个cell的图像带到下一个cell,这样就会有显示问题。

其实解决方案很简单,就是当cell移出视野,把对应的图层去掉,播放器释放。

// 快速滑动循环利用问题
-(void)handleQuickScroll{

         if (!self.playingCell) return;          NSArray *visiableCells = [self.tableView visibleCells];          NSMutableArray *indexPaths = [NSMutableArray array];     for (JPVideoPlayerCell *cell in visiableCells) {         [indexPaths addObject:cell.indexPath];     }          BOOL isPlayingCellVisiable = YES;     if (![indexPaths containsObject:self.playingCell.indexPath]) {         isPlayingCellVisiable = NO;     }          // 当前播放视频的cell移出视线, 或者cell被快速的循环利用了, 都要移除播放器     if (!isPlayingCellVisiable || ![self.playingCell.videoPath isEqualToString:self.currentVideoPath]) {         [self stopPlay];     } }

好的,真的没有问题了😁,谢谢你的阅读,Github源码点击这里 JPVideoPlayer

08、更新

  • 2016.10.09 : 处理在切换视频的短暂时间内, 当前播放视频的cell吸收了滑动事件, 如果滑动当前播放视频的cell, 会导致tableView无法接收到滑动事件, 造成tableView假死。 感谢提供bug的朋友@大墙66370 具体见我的Github JPVideoPlayer

我的文章集合

下面这个链接是我所有文章的一个集合目录。这些文章凡是涉及实现的,每篇文章中都有GIT地址,GIT上都有源码。如果某篇文章刚好在你的实际开发中帮到你,又或者提供一种不同的实现思路,让你觉得有用,那就看看这句话 “坚持每天点赞的人,99%都是帅哥美女,再也不用单身了😀”

我的文章集合索引

你还可以关注我自己维护的简书专题[iOS开发心得](http://www.jianshu.com/users/e2f2d779c022/latest_articles)。这个专题的文章都是实打实的干货。

######如果你有问题,除了在文章最后留言,还可以在微博@盼盼_HKbuy上给我留言,以及访问我的Github

© 著作权归作者所有

NewPan_
粉丝 0
博文 4
码字总数 14638
作品 0
广州
程序员
私信 提问
[iOS]仿微博视频边下边播之滑动 TableView 自动播放

注意:框架已经迭代到2.0版本,我重新架构了整个框架,API 也得到了更好的设计,我为 2.0 版本的实现写了一篇文章 [iOS]如何重新架构 JPVideoPlayer ?。此文中的实现思路仍然是一致的,但是实...

NewPan
2016/09/16
0
0
我的文章集合索引

我的文章集合索引 我的文章集合 以下文章凡是涉及实现的,每篇文章中都有GIT地址,GIT上都有源码。如果某篇文章刚好在你的实际开发中帮到你,又或者提供一种不同的实现思路,让你觉得有用,那...

法斗斗
2016/10/28
35
0
h5实现视频手势上下屏滑动(类似抖音)

1. 首先考虑无限滑动的实现,最初的第一反应,是用竖向的轮播来实现。 这里要考虑的是如何实现无缝衔接~ 是否开启无限循环 我是这样实现的,总共轮播有三帧,所以特殊的是前两张和没有后续数...

天上月丶
05/21
0
0
iOS开发-视频播放AVPlayer(AVPlayer的封装、tableviewcell上视频播放以及滑动播放暂停)

写在前面、感谢作者 使用AVPlayer自定义支持全屏的播放器http://www.jianshu.com/p/11e05d684c05 仿微博视频边下边播之滑动TableView自动播放 说明:本文使用的是第一篇文章作者的框架,加入第...

才华惊动警方
2017/07/10
0
0
iOS多种刷新样式、音乐播放器、仿抖音视频、旅游App等源码

iOS精选源码 企业级开源项目,模仿艺龙旅行App(http://www.code4app.com/thread-14774-1-1.html) 3D立体相册,可以旋转的立方体(http://www.code4app.com/thread-14966-1-1.html) 横竖屏切换...

Android爱开源
2018/10/17
175
0

没有更多内容

加载失败,请刷新页面

加载更多

Vue学习01

我的github地址https://github.com/zhangl-w/VueDemo/tree/master/VueDemo 一、基本代码 1.导入Vue包,导包后浏览器内存中会产生一个Vue的构造函数 2.创建一个Vue实例 3.el 表示,当前我们n...

zhang_l
29分钟前
5
0
centos7.x 安装harbor 1.9.3

首先必须安装docker和docker-compose 推荐使用pip安装docker-compose,因为pip可以为你自动对应版本问题 1.docker安装 curl -sfL https://get.docker.io | sh -systemctl start docker 2.d...

Elson
29分钟前
5
0
每天积累一点:射频阻抗

对我来说,阻抗是一个非常令人困惑的概念(术语)。以下是我第一次学习阻抗概念时脑海中出现的许多问题。同样的问题也让你烦恼吗? 当我第一次在高中物理中学习“电阻(Resistance )”时,它...

demyar
31分钟前
5
0
人生苦短?试试Groovy进行单元测试

如果您今天正在编程,那么您很可能听说过单元测试或测试驱动的开发过程。我还没有遇到一个既没有听说过又没有听说过单元测试并不重要的程序员。在随意的讨论中,大多数程序员似乎认为单元测试...

八音弦
32分钟前
4
0
GMAT词汇怎么背?简单记忆法让你不再害怕背单词

GMAT考试对于词汇的掌握和使用要求高,可以说是GMAT考试的难关之一。面对学术化专业化难度颇高的词汇,考生难免会产生畏惧退缩的情绪。GMAT难词怎么背?有没有轻松背单词的方法呢?下面小编就为...

bole6
34分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部