iOS畫中畫懸浮提詞功能(上)

目前很多App都通過iOS系統(tǒng)提供的畫中畫api將應(yīng)用功能擴(kuò)展到我們的手機(jī)桌面上了省骂,比較出名的就是網(wǎng)易云的桌面歌詞、b站的畫中畫播放穆碎、還有一些app的桌面倒計(jì)時(shí)以及懸浮提詞功能。
正好接觸提詞器的功能,網(wǎng)上查詢了很多資料都是付費(fèi)的橄仍,在此記錄一下實(shí)現(xiàn)方法

畫中畫功能本來是蘋果針對(duì)iPad等大屏設(shè)備提供的多任務(wù)處理的一種實(shí)現(xiàn)方式,可以將視頻窗口獨(dú)立懸浮出來牍戚,滿足用戶觀看視頻時(shí)處理其他任務(wù)的需求侮繁。
但隨著手機(jī)屏幕越做越大,該功能也逐漸下放至iOS平臺(tái)如孝,并且在iOS14以后的系統(tǒng)上開放給開發(fā)者使用鼎天。

話不多說,本篇先記錄畫中畫的基礎(chǔ)使用:

接入Pip

首先要做的是接入系統(tǒng)提供的畫中畫功能
didFinishLaunchingWithOptions中加入如下代碼:

#import <AVFoundation/AVFoundation.h>
#import <AVKit/AVKit.h>

   //1.判斷是否支持畫中畫功能
    if ([AVPictureInPictureController isPictureInPictureSupported]) {
        //2.開啟權(quán)限
        @try {
            NSError *error = nil;
            [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:&error];
            [[AVAudioSession sharedInstance] setActive:YES error:&error];
        } @catch (NSException *exception) {
            NSLog(@"AVAudioSession發(fā)生錯(cuò)誤");
        }
    }

配置畫中畫

前面說過暑竟,畫中畫本是為了將視頻畫面獨(dú)立出來斋射,因此我們需要一個(gè)視頻播放器來調(diào)起pip。
我們可以使用系統(tǒng)的AVPlayer 也可以使用其他自定義播放器但荤,這里使用AVPlayer

這里注意:playerLayer.frame 決定了畫中畫彈窗出現(xiàn)和消失時(shí)動(dòng)畫的位置和形狀罗岖,根據(jù)需求調(diào)整
重點(diǎn):初始視頻的比例決定了畫中畫窗口的大小和比例,常見的有正方形腹躁、16\9桑包、9\16、還有長(zhǎng)條形纺非,如果要控制窗口大小哑了,在這里更換視頻即可

@property (nonatomic, strong) AVPlayer *player;
@property (nonatomic, strong) AVPlayerLayer *playerLayer;

    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"full16_9" ofType:@"mp4"]];
    AVAsset *asset = [AVAsset assetWithURL:url];
    AVPlayerItem * item = [[AVPlayerItem alloc] initWithAsset:asset];
    
    self.player = [AVPlayer playerWithPlayerItem:item];
    self.player.actionAtItemEnd = AVPlayerActionAtItemEndNone;
    self.playerLayer = [AVPlayerLayer playerLayerWithPlayer:self.player];
    self.playerLayer.videoGravity = AVLayerVideoGravityResize;
    self.playerLayer.hidden = YES;
    self.playerLayer.frame = CGRectMake(0, 0, kScreenWidth, 1);
    [self.view.layer addSublayer:_playerLayer];

    if ([AVPictureInPictureController isPictureInPictureSupported]) {
        
        self.pipVC = [[AVPictureInPictureController alloc] initWithPlayerLayer:self.playerLayer];
         
        if (@available(iOS 14.0, *)) {
            self.pipVC.requiresLinearPlayback = YES;
        } else {
        }
        self.pipVC.delegate = self;
    }

這里為AVPictureInPictureController添加了代理AVPictureInPictureControllerDelegate,對(duì)畫中畫的生命周期暴露:

// 即將開啟畫中畫
- (void)pictureInPictureControllerWillStartPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
    NSLog(@" 即將開啟畫中畫");
}

// 已經(jīng)開啟畫中畫
- (void)pictureInPictureControllerDidStartPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
    NSLog(@" 已經(jīng)開啟畫中畫");
}

// 開啟畫中畫失敗
- (void)pictureInPictureController:(AVPictureInPictureController *)pictureInPictureController failedToStartPictureInPictureWithError:(NSError *)error {
    NSLog(@" 開啟畫中畫失敗-%@", error);
}

// 即將關(guān)閉畫中畫
- (void)pictureInPictureControllerWillStopPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
}

// 已經(jīng)關(guān)閉畫中畫
- (void)pictureInPictureControllerDidStopPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
}

// 關(guān)閉畫中畫且恢復(fù)播放界面
- (void)pictureInPictureController:(AVPictureInPictureController *)pictureInPictureController restoreUserInterfaceForPictureInPictureStopWithCompletionHandler:(void (^)(BOOL restored))completionHandler {
}

開啟畫中畫

開啟畫中畫時(shí)烧颖,使用AVPIP提供的isPictureInPictureSupported判斷設(shè)備是否支持開啟畫中畫弱左。
這里還可以判斷一下當(dāng)前畫中畫是否已啟動(dòng),通過startPictureInPicturestopPictureInPicture來操作畫中畫視圖的開啟關(guān)閉炕淮。

@property (nonatomic, strong) AVPictureInPictureController *pipVC;

    // 判斷是否支持畫中畫功能
    if ([AVPictureInPictureController isPictureInPictureSupported]) {
        if (self.pipVC.isPictureInPictureActive) {
            [self.pipVC stopPictureInPicture];
        } else {
            [self.pipVC startPictureInPicture];
        }
    } else {
//        [CC_MBProgressHUD showWithStatus:@"當(dāng)前系統(tǒng)版本過低拆火,無法使用該功能,請(qǐng)升級(jí)系統(tǒng)版本后使用"];
    }

到這里,播放視頻的畫中畫窗口就可以正常展示了们镜,下一篇記錄在畫中畫上添加提詞器視圖币叹。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市模狭,隨后出現(xiàn)的幾起案子颈抚,更是在濱河造成了極大的恐慌,老刑警劉巖嚼鹉,帶你破解...
    沈念sama閱讀 210,914評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件贩汉,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡反砌,警方通過查閱死者的電腦和手機(jī)雾鬼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宴树,“玉大人策菜,你說我怎么就攤上這事【票幔” “怎么了又憨?”我有些...
    開封第一講書人閱讀 156,531評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)锭吨。 經(jīng)常有香客問我蠢莺,道長(zhǎng),這世上最難降的妖魔是什么零如? 我笑而不...
    開封第一講書人閱讀 56,309評(píng)論 1 282
  • 正文 為了忘掉前任躏将,我火速辦了婚禮,結(jié)果婚禮上考蕾,老公的妹妹穿的比我還像新娘祸憋。我一直安慰自己,他們只是感情好肖卧,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
  • 文/花漫 我一把揭開白布蚯窥。 她就那樣靜靜地躺著,像睡著了一般塞帐。 火紅的嫁衣襯著肌膚如雪拦赠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評(píng)論 1 289
  • 那天葵姥,我揣著相機(jī)與錄音荷鼠,去河邊找鬼。 笑死牌里,一個(gè)胖子當(dāng)著我的面吹牛颊咬,可吹牛的內(nèi)容都是我干的务甥。 我是一名探鬼主播牡辽,決...
    沈念sama閱讀 38,882評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼喳篇,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了态辛?” 一聲冷哼從身側(cè)響起麸澜,我...
    開封第一講書人閱讀 37,643評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎奏黑,沒想到半個(gè)月后炊邦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,095評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡熟史,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
  • 正文 我和宋清朗相戀三年馁害,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蹂匹。...
    茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡碘菜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出限寞,到底是詐尸還是另有隱情忍啸,我是刑警寧澤,帶...
    沈念sama閱讀 34,253評(píng)論 4 328
  • 正文 年R本政府宣布履植,位于F島的核電站计雌,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏玫霎。R本人自食惡果不足惜凿滤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望庶近。 院中可真熱鬧翁脆,春花似錦、人聲如沸拦盹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽普舆。三九已至恬口,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間沼侣,已是汗流浹背祖能。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蛾洛,地道東北人养铸。 一個(gè)月前我還...
    沈念sama閱讀 46,248評(píng)論 2 360
  • 正文 我出身青樓雁芙,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親钞螟。 傳聞我的和親對(duì)象是個(gè)殘疾皇子兔甘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容