iOS 使用AVPictureInPictureController画中画实现自定义歌词

背景

产品要求实现类似QQ音乐和网易音乐歌词的画中画悬浮窗显示。网上搜罗了一下相关资料，都没有完整的方案，于是自己进行了相关的调研。

效果

实现步骤

1. 项目开启画中画后台模式

2. 配置画中画相关参数和组件

• 首先我们需要知道，苹果的画中画功能本身就是给播放视频用的，将它用来做歌词显示，使用起来限制会较多，比如无法直接自定义窗口大小，有播放按钮遮挡等问题。但是可以通过取巧的方式实现。实现方式是在画中画最底层播放一个占位视频，顶层实现我们需要显示的交互。窗口大小由底层视频的尺寸比例决定（间接实现宽高调整）。
• 播放视频的尺寸有一定的要求，当视频宽度较小时或者当高宽比较大时，双击画中画会自动缩小/放大，而我们显示歌词时往往不希望缩放；自己多次验证过，当视频宽度2000，高度小于700较为合适。
• controlsStyle设置为1，屏蔽画中画的播放按钮。这个是私有属性。
• canStartPictureInPictureAutomaticallyFromInline = YES，表示后台时自动打开画中画。
• 后台切回前台时，画中画缩放的位置由playerLayer.frame决定。

- (void)preparePicInPicOnView:(UIView *)view {
    /// 设置播放模式
    NSError *error = nil
    [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:&error]
    [[AVAudioSession sharedInstance] setActive:YES error:&error]
    /// 设置播放的视频
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"0920-2000400" withExtension:@"mp4"]
    AVPlayerItem * item = [[AVPlayerItem alloc] initWithAsset:[AVAsset assetWithURL:url]]
    AVPlayer *player = [[AVPlayer alloc] initWithPlayerItem:item]
    
    AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:player]
    playerLayer.frame = self.screenView.bounds
    playerLayer.backgroundColor = [UIColor blackColor].CGColor
    playerLayer.videoGravity = AVLayerVideoGravityResizeAspectFill
    
    [view.layer insertSublayer:playerLayer atIndex:0]
    
    /// 画中画功能
    self.pipController = [[AVPictureInPictureController alloc] initWithPlayerLayer:playerLayer]
    self.pipController.requiresLinearPlayback = YES
    [self.pipController setValue:@1 forKey:@"controlsStyle"]
    self.pipController.delegate = self
    self.pipController.canStartPictureInPictureAutomaticallyFromInline = YES
    [player play]
    
    /// 播放结束自动循环播放
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(playerItemDidReachEnd:) name:AVPlayerItemDidPlayToEndTimeNotification object:nil]
    /// 监听获取画中画Window
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(windowDidBecomeVisible:) name:UIWindowDidBecomeVisibleNotification object:nil]
}

3. 获取画中画顶层window

监听UIWindowDidBecomeVisibleNotification通知，获取画中画最顶层的Window，不要在pictureInPictureControllerWillStartPictureInPicture:代理中获取，很多时候会有两个window，导致获取的Window不正确！

- (void)windowDidBecomeVisible:(NSNotification *)notification {
    id object = notification.object;
    if ([object isKindOfClass:NSClassFromString(@"PGHostedWindow")]) {
        self.firstWindow = notification.object;
        NSLog(@"更新了Windows");
        [[NSNotificationCenter defaultCenter] removeObserver:self
                                                        name:UIWindowDidBecomeVisibleNotification
                                                      object:nil];
        
    }
}

4. 监听代理

启动画中画时，将显示的容器放到画中画的Window中。

- (void)pictureInPictureControllerWillStartPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
    NSLog(@"即将开启画中画功能");
    if (self.firstWindow) {
        [self.firstWindow addSubview:self.picInPicView];
        [self.picInPicView mas_remakeConstraints:^(MASConstraintMaker *make) {
            make.edges.mas_equalTo(self.firstWindow);
        }];
    }
}

- (void)pictureInPictureControllerDidStartPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
    NSLog(@"已经开启画中画功能");
}

- (void)pictureInPictureControllerWillStopPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
    NSLog(@"即将停止画中画功能");
}

- (void)pictureInPictureControllerDidStopPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
    NSLog(@"已经停止画中画功能");
}

总结

此次调研，主要是解决的问题点是：

1. 画中画的尺寸如何自定义：苹果没有接口直接调整大小，但可以通过播放的视频尺寸来改变大小，即当你画中画播放2000*500的视频时，尺寸就和歌词显示尺寸差不多。
2. 画中画窗口如何禁用双击缩放手势：当视频尺寸宽度较大，且高度较小时，系统会自动屏蔽双击缩放手势。较合适的尺寸为宽度2000，高度小于700。
3. 画中画中如何屏蔽原生播放按钮：controlsStyle属性设置为1。
4. 切后台如何自动唤起画中画：canStartPictureInPictureAutomaticallyFromInline属性设置为YES，并将视频一直循环播放，切后台就会自动唤起画中画。另外需要注意，视频播放的layer的frame一定要在可视区域，当不在可是区域时，也无法唤起画中画。

demo链接：github.com/yuchern/Pic…