iOS AI视频互动课的实现

前言

今年疫情原因，学校好长时间都不开学，本来在线教育就很火，这下更是火山爆发，线上教育APP多如牛毛，成长更是惊人。

成人的教育视频依然是常规视频，没有太大变化，可是主打低龄儿童市场的视频教学，为了让小朋友感兴趣，确是玩出了很多花样，比如斑马AI课，小火花思维等主打视频互动课，比如洪恩识字直接是个游戏。

视频互动课直接颠覆了我对视频交互的认知，在看到它之前，我接触过的视频交互，也紧紧是在视频上发个弹幕，抖音点个赞。视频互动课在我们开发者看，就是跳出视频进行一些操作，完成在回到视频。给常人或小朋友们的感觉是我在和视频中的人物在交互。一般套路是播放一个动画，动画中的人物需要做一些事情，需要小朋友们帮助，小朋友们需要完成一些小游戏，在小游戏中学习了知识，或是播放一段音乐，让小朋友跟着唱跳。这个产品设计真的太棒了。小朋友真的粘性超高，父母也乐意，终于能消停会了，还能学习。每天看一节视频课在加上课后练习的游戏和别的互动也就20分钟至半个小时。对小朋友眼睛损伤并不大。我来看下视频互动课的录制

首先看到视频下的进度条上有4个时间点图标，代表着这4个事件。可见在视频开始时或之前就已经知道了时间点的位置。而每节课的时间点是不一样的，所以我们设计进度条上的图标，是根据时间点的数据而确定位置的。

接下来仿着视频互动课，自己试着实现

使用的播放器是ZFPlayer 先创建节点数据模型

@interface ZBGameModel : NSObject
@property (nonatomic,assign)NSInteger seconds;//游戏时间
@property (nonatomic,assign)NSInteger gameId;//游戏id
@property (nonatomic,assign)NSInteger gameType;//游戏类型 1为游戏  
@end

给模型赋值对应的时间和类型

   ZBGameModel *model1=[[ZBGameModel alloc]init];
    model1.gameId=1001;
    model1.gameType=1;
    model1.seconds=100;
    
    ZBGameModel *model2=[[ZBGameModel alloc]init];
    model2.gameId=1002;
    model2.gameType=1;
    model2.seconds=221;
    
    ZBGameModel *model3=[[ZBGameModel alloc]init];
    model3.gameId=1003;
    model3.gameType=1;
    model3.seconds=303;
    
    ZBGameModel *model4=[[ZBGameModel alloc]init];
    model4.gameId=1004;
    model4.gameType=2;
    model4.seconds=318;

    [self.timeArray addObject:model1];
    [self.timeArray addObject:model2];
    [self.timeArray addObject:model3];
    [self.timeArray addObject:model4];

根据上图我们可以看到对号标志代表游戏，最后一个音乐标志代表儿歌时间。可是这个图标，我们怎么算位置坐标呢。

下面就要靠计算了，（进度条的总长度/视频的总时间）* 对应的时间点 - 图标的宽度的一半
得到的就是每个图标的位置了

  ///当播放器准备开始播放时候调用
    self.player.playerReadyToPlay = ^(id<ZFPlayerMediaPlayback>  _Nonnull asset, NSURL * _Nonnull assetURL) {
         @strongify(self)
        [self.timeArray enumerateObjectsUsingBlock:^(ZBGameModel *model, NSUInteger idx, BOOL * _Nonnull stop) {
            UIImageView *icon=[[UIImageView alloc]init];
            if (model.gameType==1) {
                icon.image=[UIImage imageNamed:@"gift_icon_0"];
            }else{
                icon.image=[UIImage imageNamed:@"douyin"];
            }
            icon.backgroundColor=[UIColor whiteColor];
            [self.controlView.landScapeControlView.slider addSubview:icon];
           [icon mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(@(0));
                make.width.equalTo(@(14));
                make.height.equalTo(@(14));
                //7为宽的一半
                make.left.equalTo(@(model.seconds*(self.controlView.landScapeControlView.slider.frame.size.width/self.playerManager.totalTime)-7));
            }];
        }];
    };

因为只是 demo，我并没自定义视频控制层和视频互动课一样，大家应该能看到，图标和原图基本一致图标指示UI 层面的，那么到了游戏图标的时间我们怎么能够进入游戏呢创建一个游戏队列类把我们刚才的数据传进去

 self.gameQueue=[[ZBGameQueue alloc]init];
 self.gameQueue.delegate=self;
 [self.gameQueue loadGameList:self.timeArray]；

里面是这样的，把模型数据存在字典里，以节点时间为key

- (void)loadGameList:(NSArray *)gameList{
    if (gameList.count<=0) {
        return;
    }
   for (int i = 0; i < gameList.count; i ++) {
       ZBGameModel *gameModel = gameList[i];
       [self.cacheDict setObject:gameModel forKey:@(gameModel.seconds).stringValue];
   }
}

在视频时间回调内游戏时间和视频时间进行匹配，找到对应的时间点，证明可以进入游戏了

__block NSInteger tempTime;
    self.player.playerPlayTimeChanged = ^(id<ZFPlayerMediaPlayback>  _Nonnull asset, NSTimeInterval currentTime, NSTimeInterval duration) {
        @strongify(self)
        //因为此回调是0.1秒一次，所以做了此判断，
        tempTime=currentTime;
        if (self.currentTime!=tempTime) {
            NSLog(@"tempTime:%ld",tempTime);
            //游戏列队 和 视频时间对比
            [self.gameQueue startQueueWithCurrentTime:tempTime];
        }
        self.currentTime=tempTime;
    };

- (void)startQueueWithCurrentTime:(NSInteger)currentTime{
    if ([self.cacheDict.allKeys containsObject:@(currentTime).stringValue]) {
        ZBGameModel *gameModel =[self.cacheDict objectForKey:@(currentTime).stringValue];
        if ([self.delegate respondsToSelector:@selector(gameQueueGetGameModel:)]) {
            [self.delegate gameQueueGetGameModel:gameModel];
        }
     }
}

看到这，如果之前看过我写的历史弹幕绑定视频时间的朋友，应该了解。逻辑都一样。之后就是代理触发，我们就可以进入游戏了

#pragma mark - ZBGameQueueDelegate
- (void)gameQueueGetGameModel:(ZBGameModel *)gameModel{
    if (gameModel.gameType==1) { //1为游戏
        [self.playerManager pause];//暂停视频
         NSLog(@"进入游戏");
        GameViewController *gameVC=[[GameViewController alloc]init];
        gameVC.delegate=self;
        UIViewController *vc=[self.controlView.landScapeControlView findeCurrentViewController];
        [vc presentViewController:gameVC animated:YES completion:nil];
    }else{
        //其他不跳转 比如儿歌时间
    }
}

游戏部分，我只是随便写了一点，三个游戏节点，都是一个。一节课视频里3-4个游戏，加上课后练习的游戏10个起码有了。一期有10多节课，每个年龄段的课还不一样，游戏也不一样。游戏的量这么大，感觉用原生开发不太可能。最后在游戏结束时给一个回调，游戏结束继续播放视频

#pragma mark - GameViewControllerDelegate
- (void)gameComplete{
    [self.playerManager play];
}

经过上面的处理，服务下发的或传进来的任何时间点，任何数量的数据，我们的UI图标和事件都能准确的触发

我们来个看下整体效果

banma zb GIF.gif

最后奉上本文Demo

结尾：水平有限，代码也很烂，一直在努力学习中，大家多多包涵。如果你喜欢这个轮子，请给个star，这是对作者最大的鼓励和支持，拜谢！！！假如你有更好的想法或方案请留言！

iOS AI视频互动课的实现

前言

接下来 仿着视频互动课 ，自己试着实现

接下来仿着视频互动课，自己试着实现