iOS14 畫中畫 調研
畫中畫(PictureInPicture)在iOS9就已經(jīng)推出了,不過之前都只能在iPad使用,iPhone要使用畫中畫就得更新到iOS14才能使用。
蘋果在iOS14中開放了手機端對畫中畫的支持,方便在app退出前臺時仍然可以播放視頻。 畫中畫的開啟,本質上還是需要依賴系統(tǒng)播放器,同時UI、動畫等都是系統(tǒng)原生提供的,因此自定義空間很小。
目前有三種方式實現(xiàn)畫中畫:
- WKWebView自帶
- 如果對播放器
要求不大
的可以直接使用AVPlayerViewController
,自身就提供畫中畫功能可直接使用,設置allowsPictureInPicturePlayback = YES
即可展示出畫中畫按鈕。 - 而
自定義的播放器
要開啟畫中畫那就使用AVPictureInPictureController
來包裝,也是很簡單易用,并且動畫效果內部已經(jīng)實現(xiàn),只需要注意畫中畫按鈕需要用戶自己去實現(xiàn),畫中畫圖標系統(tǒng)已有相關APIpictureInPictureButtonStartImage
。
總共需要以下幾步:
開啟后臺模式,即Xcode中后臺能力中的第一個勾選框
創(chuàng)建
AVPictureInPictureController
(你一定要讓用戶通過操作(點擊按鈕等)來開始畫中畫顯示。 不能直接在代碼中直接startPictureInPicture ,這樣的話你的APP上架審核會被拒絕,因為蘋果本身是不希望用戶自定義畫中畫的。)在
[AVPictureInPictureController isPictureInPictureSupported]
允許的情況下,設置AVAudioSession的category為AVAudioSessionCategoryPlayback
可以播放遵守HLS協(xié)議的.m3u8的直播,因為AVPlayer 不支持 flv,只能播放 hls 的流。HLS是蘋果主導的音視頻傳輸協(xié)議,其主要的格式是一個索引文件(M3U8)+ ts分片的視頻文件。
如果業(yè)務使用系統(tǒng)播放器,那么這里一般不會有問題,因為播放器已經(jīng)正確顯示了。但是如果業(yè)務使用了自定義播放器,同時也希望具有畫中畫能力,那么通常會創(chuàng)建一個隱藏的系統(tǒng)播放器,作為畫中畫功能的承載。這時候就要注意保證
用于渲染的view、layer正確地加入到了層級中
。
具體代碼如下:
// init player
NSURL *url = [NSURL URLWithString:@"https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8"];
//使用playerItem初始化AVPlayer的目的是為了監(jiān)聽播放器的`status`狀態(tài)
self.playerItem = [AVPlayerItem playerItemWithURL:url];
[self.playerItem addObserver:self
forKeyPath:@"status"
options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew
context:nil];
self.player = [[AVPlayer alloc] initWithPlayerItem:self.playerItem ];
// init player layer
AVPlayerLayer * playerLayer = (AVPlayerLayer *)self.playerView.layer;
playerLayer.player = self.player;
// init pip controller
self.pipController = [[AVPictureInPictureController alloc] initWithPlayerLayer:playerLayer];
self.pipController.delegate = self;
//監(jiān)聽'pictureInPicturePossible'是為了讓自定義的畫中畫按鈕是否顯示/隱藏 或者 能否點擊,因為有些時候即使設備支持,但是需要AVPlayer等到直播流可以播放的一個狀態(tài)才可以為possible
[self.pipController addObserver:self
forKeyPath:@"pictureInPicturePossible"
options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew
context:nil];
if ([AVPictureInPictureController isPictureInPictureSupported]) {
NSLog(@"該設備支持畫中畫功能");
//開啟畫中畫后臺聲音權限
NSError *error = nil;
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:&error];
[[AVAudioSession sharedInstance] setActive:YES error:nil];
if (error) {
NSLog(@"請求權限失敗的原因為%@",error);
}
} else {
NSLog(@"該設備不支持畫中畫功能");
}
//在點擊畫中畫按鈕的時候 開啟畫中畫
if (self.pipController.isPictureInPictureActive) {
[self.pipController stopPictureInPicture];
} else {
[self.pipController startPictureInPicture];
}
//status狀態(tài)一共三種 可以在不同的狀態(tài)下設置不同的交互
AVPlayerItemStatusReadyToPlay:
AVPlayerItemStatusFailed:
AVPlayerItemStatusUnknown:
注意點:
一、 AVPictureInPictureController的初始化通過將要展示視頻的視圖的view的 AVPlayerLayer
來初始化。為了達到這種目的視頻播放的視圖的layer返回應該是AVPlayerLayer,重寫+layerClass
方法使得在創(chuàng)建的時候能返回一個不同的圖層子類。UIView會在初始化的時候調用+layerClass方法,然后用它的返回類型來創(chuàng)建宿主圖層。即需要在展示視頻的view視圖里有如下類方法
+ (Class)layerClass {
return [AVPlayerLayer class];
}
二、 startPictureInPicture并不是立馬觸發(fā),而是需要在視頻可以開始播放時才允許打開
。所以如果不加載一個本地加載的動畫視頻的話,界面上不會立馬顯示出畫中畫,給用戶造成一種不靈敏的感覺。所以 先循環(huán)播放一個本地的 loading 視頻來開啟畫中畫,同時等待直播可以開始播放時,再將畫中畫的畫面切換成真正的直播內容。
三、 因為AVPlayer只能播放本地視頻或者HLS直播流,而AVPictureInPictureController的初始化需要用到AVPlayer。但公司目前的設備推流機制是直接客戶端接受YUV數(shù)據(jù)并用OpenGL渲染,沒有經(jīng)過服務器取流,所以畫中畫暫時無法實現(xiàn)。
實現(xiàn)步驟:如果現(xiàn)在不支持,后續(xù)如果想實現(xiàn)的話,可以在點擊畫中畫后去服務請求視頻的HLS直播地址,和一些token的驗證拼接,之后將其賦值給self.playLayer.player = [AVPlayer playerWithURL:[NSURL URLWithString:urlStr]];,之后就可以開啟畫中畫了。否則就按失敗處理。
//歡迎大家交流并指出錯誤,謝謝