画中画功能探究
2020-10-30 本文已影响0人
落叶兮兮
最近开始研究iOS14画中画功能的实现，最终分别通过使用AVPlayerViewController构建播放器和AVPlayerLayer构建播放器，分别实现相应的画中画的功能
实现的效果图为：
AVPlayerViewController实现画中画效果
AVPlayerLayer实现画中画效果
项目的demo地址为：
demo地址
AVPlayerViewController实现画中画的功能
画中画功能的实现主要还是阅读苹果开发文档
开发文档中提到了AVPlayerViewController构建播放器时，这个是最简单的，只需要申请相应的权限，系统自带的控制器会带有开启画中画的按钮
首先，我们先使用AVPlayerViewController搭建一个播放视频的基本界面，（项目中对应的文件名是FirstViewController）
项目中使用的视频链接为：https://youku.cdn4-okzy.com/20200618/8130_4b8b9a06/1000k/hls/index.m3u8（是一个m3u8文件）
首先定义相应的属性和懒加载属性
@property (nonatomic, strong) AVPlayerViewController *avPlayer;//播放器
@property (nonatomic, strong) AVPlayer *player;//播放器播放的项目
@property (nonatomic, strong) UIButton *playButton;//播放按钮（也可以不用这个）
相应的懒加载为：
- (AVPlayerViewController *)avPlayer {
if (_avPlayer) {
return _avPlayer;
}
_avPlayer = [[AVPlayerViewController alloc] init];
_avPlayer.showsPlaybackControls = YES;
//AVPlayerViewController开启画中画只需要设置这个属性为YES即可（也可以不设置，默认为YES）
_avPlayer.allowsPictureInPicturePlayback = YES;
return _avPlayer;
}
- (AVPlayer *)player {
if (_player) {
return _player;
}
_player = [[AVPlayer alloc] initWithURL:[NSURL URLWithString:@"https://youku.cdn4-okzy.com/20200618/8130_4b8b9a06/1000k/hls/index.m3u8"]];
return _player;
}
- (UIButton *)playButton {
if (_playButton) {
return _playButton;
}
_playButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
[_playButton setTitle:@"播放" forState:UIControlStateNormal];
[_playButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[_playButton addTarget:self action:@selector(playVideo) forControlEvents:UIControlEventTouchUpInside];
return _playButton;
}
//自己添加的按钮的点击事件
- (void)playVideo {
NSLog(@"开始播放视频");
[self.avPlayer.player play];
}
在viewDidLoad中将播放器添加到view上
- (void)viewDidLoad {
[super viewDidLoad];
self.avPlayer.view.frame = CGRectMake(0, 0, self.view.bounds.size.width, 300);
[self.view addSubview:self.avPlayer.view];
self.avPlayer.player = self.player;
self.playButton.frame = CGRectMake((self.view.bounds.size.width - 100) / 2, 320, 100, 50);
[self.view addSubview:self.playButton];
}
运行就可以发现，可以播放视频
但是没有画中画的按钮，因为我们没有申请权限，另外，画中画开启前我们需要判断当前设备是否支持画中画的功能
在viewDidLoad中添加以下代码即可
if ([AVPictureInPictureController isPictureInPictureSupported]) {
NSLog(@"该设备支持画中画功能");
//开启画中画权限
NSError *error = nil;
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:&error];
if (error) {
NSLog(@"请求权限失败的原因为%@",error);
}
} else {
NSLog(@"该设备不支持画中画功能");
}
最终，我们得到的效果图为：
AVPlayerViewController实现画中画效果
AVPlayerLayer实现画中画的功能
首先，和原先一样，我们需要搭建一个能够播放视频的项目（在demo中文件名为secondViewController）
对于AVPlayerLayer是继承与CALayer，这个就是在view上添加一层layer用于播放视频。
（注意：这种方法播放视频没有系统提供控制栏，控制栏需要自己定义，下面我是定义了几个按钮）
对于AVPlayerLayer，我们打开苹果开发者文档，里面有给出其相应的封装例子，我们直接原样使用即可
开发者文档中的AVPlayerLayer封装的例子
在项目中，我们使用同样的代码，将其命名为playView
下面我们开始搭建基本的播放项目
定义相应的属性
@property (nonatomic, strong) AVPlayer *player;
@property (nonatomic, strong) PlayerView *playerView;
@property (nonatomic, strong) UIButton *playButton;//播放按钮
@property (nonatomic, strong) UIButton *pauseButton;//暂停按钮
@property (nonatomic, strong) UIButton *startPipButton;//开启画中画按钮
实现相应的懒加载
- (AVPlayer *)player {
if (_player) {
return _player;
}
_player = [[AVPlayer alloc] initWithURL:[NSURL URLWithString:@"https://youku.cdn4-okzy.com/20200618/8130_4b8b9a06/1000k/hls/index.m3u8"]];
return _player;
}
- (PlayerView *)playerView {
if (_playerView) {
return _playerView;
}
_playerView = [[PlayerView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 300)];
_playerView.player = self.player;
return _playerView;
}
- (UIButton *)playButton {
if (_playButton) {
return _playButton;
}
_playButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
[_playButton setTitle:@"播放" forState:UIControlStateNormal];
[_playButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[_playButton addTarget:self action:@selector(playVideo) forControlEvents:UIControlEventTouchUpInside];
return _playButton;
}
- (UIButton *)pauseButton {
if (_pauseButton) {
return _pauseButton;
}
_pauseButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
[_pauseButton setTitle:@"暂停" forState:UIControlStateNormal];
[_pauseButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[_pauseButton addTarget:self action:@selector(pauseVideo) forControlEvents:UIControlEventTouchUpInside];
return _pauseButton;
}
- (UIButton *)startPipButton {
if (_startPipButton) {
return _startPipButton;;
}
_startPipButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
[_startPipButton setTitle:@"开启画中画功能" forState:UIControlStateNormal];
[_startPipButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[_startPipButton addTarget:self action:@selector(startPip) forControlEvents:UIControlEventTouchUpInside];
return _startPipButton;
}
//播放按钮的点击事件
- (void)playVideo {
NSLog(@"点击开始播放视频");
[self.playerView.player play];
}
//暂停按钮的点击事件
- (void)pauseVideo {
NSLog(@"暂停播放视频");
[self.playerView.player pause];
}
//开启画中画按钮的点击事件
- (void)startPip {
NSLog(@"点击开启画中画功能");
if (self.pipVC.pictureInPicturePossible) {
NSLog(@"允许开启画中画功能");
[self.pipVC startPictureInPicture];
} else {
NSLog(@"不允许开启画中画功能");
}
}
然后在viewDidLoad中实现界面的基本布局
[self.view addSubview:self.playerView];
self.playButton.frame = CGRectMake((self.view.bounds.size.width - 100) / 2, 320, 100, 50);
[self.view addSubview:self.playButton];
self.pauseButton.frame = CGRectMake((self.view.bounds.size.width - 100) / 2, 400, 100, 50);
[self.view addSubview:self.pauseButton];
self.startPipButton.frame = CGRectMake((self.view.bounds.size.width - 200) / 2, 460, 200, 50);
[self.view addSubview:self.startPipButton];
正常运行后，发现可以正常播放视频
接下来就可以添加画中画功能了
相应的控件及属性苹果开发者文档中都有提及，有兴趣的可以去阅读一下
实现画中画功能最重要的控件是AVPictureInPictureViewController是NSObject的子类（不是UIViewController的子类，所以我们不能将其添加到界面上）
定义相应的属性
@property (nonatomic, strong) AVPictureInPictureController *pipVC;
相应的懒加载
- (AVPictureInPictureController *)pipVC {
if (_pipVC) {
return _pipVC;
}
_pipVC = [[AVPictureInPictureController alloc] initWithPlayerLayer:self.playerView.playerLayer];
_pipVC.delegate = self;//需要遵守AVPictureInPictureControllerDelegate(协议是optional，不是必须要实现的，可以不实现)
return _pipVC;
}
实现相应的协议（协议是optional，不是必须要实现的，可以不实现）
- (void)pictureInPictureControllerWillStartPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
NSLog(@"即将开启画中画功能");
}
- (void)pictureInPictureControllerDidStartPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
NSLog(@"已经开启画中画功能");
}
- (void)pictureInPictureControllerWillStopPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
NSLog(@"即将停止画中画功能");
}
- (void)pictureInPictureControllerDidStopPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
NSLog(@"已经停止画中画功能");
}
- (void)pictureInPictureController:(AVPictureInPictureController *)pictureInPictureController failedToStartPictureInPictureWithError:(NSError *)error {
NSLog(@"开启画中画功能失败，原因是%@",error);
}
同样的我们需要在开始时申请权限
在viewDidLoad中添加以下代码即可
if ([AVPictureInPictureController isPictureInPictureSupported]) {
NSLog(@"该设备支持画中画功能");
//开启画中画权限
NSError *error = nil;
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:&error];
if (error) {
NSLog(@"请求权限失败的原因为%@",error);
}
} else {
NSLog(@"该设备不支持画中画功能");
}
点击开启画中画按钮的方法实现
- (void)startPip {
NSLog(@"点击开启画中画功能");
//pictureInPicturePossible这个属性为YES才允许开启画中画，存在其他的软件正在开启画中画时，这个属性为NO
if (self.pipVC.pictureInPicturePossible) {
NSLog(@"允许开启画中画功能");
[self.pipVC startPictureInPicture];
} else {
NSLog(@"不允许开启画中画功能");
}
}
最终运行的效果图为：
AVPlayerLayer实现画中画效果
总结
项目的demo地址为：
demo地址
