Picture-in-Picture mobilalkalmazásokban — mi ez, hogyan működik és hol alkalmazzák

Mi az a Picture-in-Picture?

Picture-in-Picture (PiP) egy videó megjelenítési mód egy kis lebegő ablakban, amely az összes többi ablak és alkalmazás felett marad. A felhasználó áthelyezheti a PiP-ablakot a képernyőn, módosíthatja a méretét (egyes platformokon) és folytathatja a tartalom nézését miközben más alkalmazásokban dolgozik.

A PiP koncepciója a televízióból származik: már az 1990-es években a tévék képesek voltak egy második csatornát megjeleníteni a képernyő sarkában. Mobileszközökön a PiP először iPad-en jelent meg iOS 9-ben (2015) a Safari videóihoz, a teljes rendszer PiP alkalmazásokhoz pedig iOS 14-ben (2020) vált elérhetővé. Androidon a PiP támogatás korábban jelent meg — a 8.0 Oreo (2017) verzióban, de csak videóhoz, és Android 12-től kezdve minden típusú tartalomhoz.

A PiP abban különbözik a háttérlejátszástól, hogy a videó továbbra is megjelenik a képernyőn, nem csak az audio adatfolyamban játszódik le. Háttérlejátszás (background audio) mindkét platformon elérhető, de a PiP vizuális kontrollt ad a felhasználónak a tartalom felett: látja a képkockákat, szüneteltethet, visszatekerhet vagy bezárhatja az ablakot. Ez különösen fontos videóleckéknél, streameknél és videóhívásoknál, ahol a vizuális tartalom legalább olyan fontos, mint az audio.

Hogyan működik a PiP?

Architekturálisan a PiP a rendszerablak-kezelőn keresztül valósul meg, amely egy külön ablakot hoz létre alacsonyabb megjelenítési prioritással. Az alkalmazás a video kimenetet egy rendszerszolgáltatásra bízza, amely folytatja a videó renderelését még azután is, hogy az alkalmazás háttérmódba lépett vagy minimalizálásra került.

Egy PiP-munkamenet életciklusa

A folyamat akkor kezdődik, amikor a felhasználó minimalizálja az alkalmazást aktív videóval vagy megnyomja a PiP gombot (iOS-en), vagy a rendszer automatikusan átkapcsolja az Activity-t PiP módba (Androidon). A rendszerablak-kezelő elfogja a video-adatfolyamot és létrehoz egy lebegő ablakot rögzített arányokkal. Az ablak mérete az eredeti videó képarányától és a platform korlátaitól függ: iOS-en a PiP-ablak a képernyő szélességének körülbelül 1/6–1/4-ét foglalja el, Androidon — legalább 108 dp széles és 240 dp magas mobileszközökön.

Amikor a PiP-ablak aktív, az alkalmazás három állapot egyikében lehet: háttérben (minimalizálva), aktív állapotban (a felhasználó visszatért az alkalmazáshoz), vagy várakozó állapotban (a rendszer felfüggesztette a PiP-t erőforráshiány miatt). PiP-re váltáskor az alkalmazásnak fel kell függesztenie a szükségtelen UI műveleteket (animációk, interfész renderelés) és fel kell szabadítania a memóriát, mivel a rendszer erőforrásai többfeladatos módban szigorúbban oszlanak meg. Az iOS automatikusan elküldi az AVPictureInPictureControllerWillStartNotification értesítést az alkalmazásnak, az Android pedig az onPictureInPictureModeChanged callback-et.

A PiP mód korlátozásai

A PiP-ablaknak jelentős korlátozásai vannak: nem jeleníthetők meg rajta szabványos UI vezérlőelemek (szünet gomb, előrehaladás csúszka) — csak minimális rendszerfedvény alapvető elemekkel: play/pause, bezárás, teljes képernyőre nagyítás. A PiP rendszer UI-ja iOS-en tartalmaz egy szünet és bezárás gombot, Androidon pedig ugyanezeket az elemeket plusz egy további beállítások gombot. A PiP-n belüli tartalommal való interakció (visszatekerés, feliratválasztás) nem lehetséges — ehhez az alkalmazást teljes képernyőn kell megnyitni.

PiP iOS-en: implementáció és korlátozások

iOS-en a PiP az AVKit keretrendszeren és az AVPictureInPictureController osztályon keresztül valósul meg. Ez az API iOS 14+-on érhető el iPhone és iPad készülékeken, de eltérő követelményekkel: iPaden a PiP az AVPlayerLayer-en keresztül működik, iPhone-on — csak az AVPlayerViewController-en keresztül.

PiP követelmények iOS-en

A PiP iOS-en való működéséhez több feltételnek kell teljesülnie: az alkalmazásnak AVPlayer-t kell használnia a videólejátszáshoz, az audio munkamenetet a .playback vagy .playAndRecord kategóriára kell beállítani, és az alkalmazásnak rendelkeznie kell háttér-audio engedélyekkel (UIBackgroundModes = audio). Ezen beállítások nélkül a PiP nem indul el — a rendszer elutasítja a PiP-munkamenet létrehozására irányuló kérést, mert nem tudja garantálni a megfelelő lejátszást a háttérbe lépés után.

iOS-en a PiP-ablak automatikusan megjelenik az alkalmazás minimalizálásakor, ha a videó aktívan lejátszódik és a felhasználó nem kapcsolta ki ezt a funkciót a beállításokban. A felhasználó manuálisan is minimalizálhatja a videót PiP-be az AVPlayerViewController gombján keresztül. A PiP-ablak mérete iOS-en fix, és a rendszer határozza meg — a fejlesztő nem változtathatja meg. A PiP-ablak képaránya megegyezik az eredeti videó képarányával, de a maximális méret iPhone-on a képernyő szélességének 1/4-ére, iPaden 1/3-ára korlátozott.

iOS PiP korlátozásai

A PiP fő korlátozásai iOS-en: egyedi UI lehetetlensége a PiP-ablakban, egyidejűleg egy PiP-adatfolyamra korlátozás, és aktív AVPlayer követelménye a PiP működéséhez. Multi-PiP — több PiP-ablak egyidejű lejátszása — nem támogatott iOS-en. A második PiP elindítására tett kísérletkor az első automatikusan bezáródik. Ez hardverkorlátozás: a videóprocesszor nem tud egyszerre két független PiP-csatornát kiszolgálni a DMA és a videómemória korlátai miatt.

Egy másik fontos korlátozás — a háttérlejátszás időtartama. Ha a felhasználó nem lép interakcióba a PiP-ablakkal, a rendszer egy idő után felfüggesztheti a lejátszást az energia megtakarítása érdekében. A PiP automatikus szüneteltetése iOS-en 10–15 perc inaktivitás után következik be, ha az alkalmazás nem implementált keep-alive mechanizmust background task segítségével. Videóhívásokhoz és streamekhez a PushKit és VoIP tanúsítványok használata javasolt, amelyek megkerülik ezt a korlátozást.

PiP Androidon: implementáció és korlátozások

Androidon a PiP beépített Activity módként valósul meg, amely az enterPictureInPictureMode metóduson keresztül aktiválódik. Android 8.0-tól (API 26) bármely Activity átválthat PiP módba, Android 12-től (API 31) pedig megjelent a PiP támogatás SurfaceView és TextureView számára a MediaCodec használata nélkül.

Manifest konfiguráció

A PiP támogatásához az Android manifestben meg kell adni az android:supportsPictureInPicture attribútumot az Activity számára a szakaszban. Ezen attribútum nélkül a rendszer nem engedélyezi a PiP-re váltást. Ezenkívül ajánlott hozzáadni az android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation" beállítást, hogy az Activity ne jöjjön létre újra az ablakméret változásakor a PiP-re váltáskor. A build targetSdkVersion-jének >= 26-nak (Android 8.0) kell lennie az alap PiP működéséhez.

Androidon a PiP-ablak alapértelmezés szerint nem rendelkezik vezérlőelemekkel. A fejlesztő egyedi műveleteket adhat hozzá RemoteAction segítségével a setPictureInPictureParams metódusban. Legfeljebb 3 művelet érhető el (például: szünet/lejátszás, visszatekerés/előretekerés, bezárás). Minden művelet ikonként jelenik meg a PiP rendszerfedvényében. Ellentétben az iOS-szel, ahol minden UI elem szigorúan rögzített, az Android nagyobb rugalmasságot biztosít az alapvető vezérlőkhöz.

Alkalmazkodás különböző verziókhoz

A PiP Androidon eltérő képességekkel rendelkezik az operációs rendszer verziójától függően. Android 8.0–8.1-en a PiP csak a MediaPlayeren vagy MediaCodec-on keresztül SurfaceView-val lejátszott videóhoz érhető el. Android 9-től a PictureInPictureArgs.Builder használható a PiP-ablak képarányának konfigurálásához. Android 12 hozzáadta a PiP támogatást egyedi SurfaceView és TextureView számára, valamint a teljes képernyő és PiP mód közötti átmenetek továbbfejlesztett kezelését. Android 13+ lehetővé teszi a PiP-ablak megjelenítését akár zárt képernyőn is, ha az alkalmazás rendelkezik a megfelelő engedéllyel.

Az Android PiP legfőbb különbsége az iOS-szel szemben — a multi-PiP lehetősége. Android 12-től a rendszer egyszerre több PiP-ablakot is megjeleníthet, ha az alkalmazások támogatják és a készülék teljesítménye lehetővé teszi. A gyakorlatban azonban a multi-PiP korlátozott a SoC képességei által: a legtöbb eszköz csak egy PiP-ablakot támogat a dekódoló hardverkorlátai miatt, mivel minden PiP-ablak saját video-adatfolyamot és külön dekódolási munkamenetet igényel.

PiP kódpéldák

Tekintsük át a PiP gyakorlati implementációját mindkét mobil platformon, figyelembe véve az API legújabb változásait.

PiP iOS-en AVPictureInPictureController-rel

import AVKit
import AVFoundation

class VideoPlayerViewController: UIViewController {
    var player: AVPlayer!
    var pipController: AVPictureInPictureController?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let playerLayer = AVPlayerLayer(player: player)
        playerLayer.videoGravity = .resizeAspect
        view.layer.addSublayer(playerLayer)
        
        guard AVPictureInPictureController.isPictureInPictureSupported()
        else { return }
        
        pipController = AVPictureInPictureController(playerLayer: playerLayer)
        pipController?.delegate = self
    }
    
    @IBAction func startPiPTapped() {
        pipController?.startPictureInPicture()
    }
}

extension VideoPlayerViewController: AVPictureInPictureControllerDelegate {
    func pictureInPictureControllerWillStart(
        _ pictureInPictureController: AVPictureInPictureController
    ) {
        // UI elemek elrejtése, memória felszabadítása
    }
    
    func pictureInPictureControllerDidStop(
        _ pictureInPictureController: AVPictureInPictureController
    ) {
        // UI visszaállítása, renderelés folytatása
    }
}

A példában az AVPictureInPictureController inicializálása a playerLayer-rel történik az isPictureInPictureSupported ellenőrzése után (a PiP nem támogatott az iPhone SE 1. generáción és egyes iPad-eken, amelyek nem rendelkeznek elegendő memóriával). A delegált értesíti az alkalmazást a PiP kezdetéről és befejezéséről — ezekben a callback-ekben el kell rejteni és vissza kell állítani az UI elemeket, mivel PiP módban az alkalmazás interfésze nem látható. A PiP-re váltáskor ajánlott az összes animáció leállítása, a lejátszó vezérlőinek elrejtése és a fel nem használt memória felszabadítása az alkalmazás rendszer általi kényszerű eltávolításának megelőzése érdekében.

PiP Androidon PictureInPictureParams segítségével

class PipVideoActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setupVideoPlayer()
    }
    
    private fun enterPipMode() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            val aspectRatio = Rational(16, 9)
            
            val pipParams = PictureInPictureParams.Builder()
                .setAspectRatio(aspectRatio)
                .setAutoEnterEnabled(true)
                .build()
            
            enterPictureInPictureMode(pipParams)
        }
    }
    
    override fun onPictureInPictureModeChanged(
        isInPictureInPictureMode: Boolean,
        newConfig: Configuration
    ) {
        if (isInPictureInPictureMode) {
            // UI elrejtése, csak a médiára fókuszálás
            binding.controlsGroup.visibility = View.GONE
        } else {
            // UI visszaállítása
            binding.controlsGroup.visibility = View.VISIBLE
        }
    }
}

A Kotlin példa a PictureInPictureParams.Builder használja a PiP konfigurálásához. A setAspectRatio metódus beállítja a PiP-ablak képarányát (16:9 tipikus videóhoz). A setAutoEnterEnabled(true) bekapcsolja az automatikus PiP-re váltást az alkalmazás minimalizálásakor. Az onPictureInPictureModeChanged callback a PiP-be való belépéskor és kilépéskor hívódik meg — ebben kell elrejteni vagy megjeleníteni az UI elemeket. SurfaceView-n lévő videóhoz további konfigurációkezelés szükséges az android:configChanges="screenSize|smallestScreenSize" manifest-ben történő hozzáadásával az Activity újralétrehozásának megelőzésére a PiP módba váltáskor.

Mikor használjuk a Picture-in-Picture-t

A PiP egy hatékony eszköz a felhasználói élmény javítására olyan alkalmazásokban, ahol a tartalom akkor is releváns marad, amikor más feladatokra váltunk. A PiP implementációjának azonban indokoltnak kell lennie, és nem szabad elvonnia a felhasználó figyelmét.

Optimális forgatókönyvek

Videóhívások és konferenciák — a PiP egyik fő forgatókönyve. A Zoom, FaceTime, Google Meet alkalmazásokban a PiP lehetővé teszi a beszélgetőpartner látását más alkalmazásokban való munka közben: jegyzetek olvasása, prezentáció megtekintése vagy e-mailek ellenőrzése. PiP videóhívásokhoz háttérben lévő kameratámogatást és az audio munkamenet megfelelő beállítását igényli az audio rögzítésének folytatásához a háttérben. iOS-en ehhez AVSampleBufferDisplayLayer-t használnak AVPlayerLayer helyett, mivel a videóhívások nem használnak AVPlayer-t.

A streaming szolgáltatások (YouTube, Netflix, Twitch) aktívan használják a PiP-t a nézés folytatásához új tartalom keresése közben. A YouTube Premium fizetős funkcióként kínálja a PiP-t, a Netflix is korlátozza a PiP-t bizonyos díjcsomagokra a tartalomlicencelési korlátozások miatt. A PiP streaming alkalmazásban történő implementálásához integráció szükséges a DRM-rendszerrel (FairPlay, Widevine), amely támogatja a biztonságos pipeline-t PiP módban.

Mikor nincs szükség PiP-re

A PiP nem alkalmas interaktív videótartalmat tartalmazó alkalmazásokhoz, ahol felhasználói interakció szükséges: oktatási platformok tesztekkel a lejátszón belül, játékstreamek chat-tel, vásárlási alkalmazások termékhivatkozásokkal a videóban. Ezekben az esetekben a PiP-ablak túl kicsi a további információk megjelenítéséhez, és az interaktív elemeket a PiP-ben a rendszer nem támogatja. Ajánlott a PiP-t csak passzív nézéshez használni, amikor a tartalommal való interakció nem szükséges.

Zenei és podcast alkalmazásokhoz a PiP felesleges — elegendő a háttér-audio vizuális ablak nélkül. A PiP további GPU-erőforrásokat fogyaszt a videó lebegő ablakban történő rendereléséhez, ami csökkenti az akkumulátor élettartamát. Ha a tartalom audio (zene, podcastok, hangoskönyvek) — használjon háttérlejátszást PiP nélkül. Ha vizuális — implementálja a PiP-t a felhasználói élmény javításához.