Picture-in-Picture v mobilních aplikacích — co to je, jak funguje a kde se používá

Co je Picture-in-Picture?

Picture-in-Picture (PiP) je režim zobrazení videa v malém plovoucím okně, které zůstává nad všemi ostatními okny a aplikacemi. Uživatel může okno PiP po obrazovce přesouvat, měnit jeho velikost (na některých platformách) a pokračovat ve sledování obsahu při práci v jiných aplikacích.

Koncepce PiP pochází z televize: již v 90. letech 20. století umožňovaly televizory zobrazovat druhý kanál v rohu obrazovky. V mobilních zařízeních se PiP poprvé objevil na iPadu v iOS 9 (2015) pro video v Safari a plnohodnotný systémový PiP pro aplikace se stal dostupným v iOS 14 (2020). Na Androidu se podpora PiP objevila dříve — ve verzi 8.0 Oreo (2017), ale pouze pro video, a od Androidu 12 pro všechny typy obsahu.

PiP se liší od přehrávání na pozadí tím, že video se stále zobrazuje na obrazovce, nejen přehrává v audio streamu. Přehrávání na pozadí (background audio) je dostupné na obou platformách, ale PiP poskytuje uživateli vizuální kontrolu nad obsahem: vidí snímky, může pozastavit, přetočit nebo zavřít okno. To je zvláště důležité pro videolekce, streamy a videohovory, kde je vizuální obsah stejně důležitý jako zvuk.

Jak funguje PiP?

Architektonicky je PiP implementován prostřednictvím systémového správce oken, který vytváří samostatné okno s nižší prioritou zobrazení. Aplikace deleguje video výstup na systémovou službu, která pokračuje v renderování videa i poté, co aplikace přejde do režimu na pozadí nebo je minimalizována.

Životní cyklus relace PiP

Proces začíná, když uživatel minimalizuje aplikaci s aktivním videem nebo stiskne tlačítko PiP (na iOS) nebo systém automaticky přepne Activity do režimu PiP (na Androidu). Systémový správce oken zachytí video stream a vytvoří plovoucí okno s pevnými proporcemi. Velikost okna závisí na poměru stran původního videa a omezeních platformy: na iOS zabírá okno PiP přibližně 1/6–1/4 šířky obrazovky, na Androidu — alespoň 108 dp na šířku a 240 dp na výšku pro mobilní zařízení.

Když je okno PiP aktivní, aplikace může být v jednom ze tří stavů: na pozadí (minimalizovaná), v aktivním stavu (uživatel se vrátil k aplikaci) nebo v čekacím stavu (systém pozastavil PiP kvůli nedostatku zdrojů). Při přechodu do PiP by aplikace měla pozastavit zbytečné operace UI (animace, renderování rozhraní) a uvolnit paměť, protože systémové zdroje v multitaskingovém režimu jsou rozdělovány přísněji. iOS automaticky odesílá aplikaci oznámení AVPictureInPictureControllerWillStartNotification a Android — callback onPictureInPictureModeChanged.

Omezení režimu PiP

Okno PiP má významná omezení: nelze na něm zobrazovat standardní prvky ovládání UI (tlačítko pauzy, jezdec průběhu) — pouze minimální systémové překrytí se základními prvky: play/pause, zavřít, rozbalit na celou obrazovku. Systémové UI PiP na iOS obsahuje tlačítko pauzy a zavření, na Androidu — stejné prvky plus další tlačítko pro nastavení. Interakce s obsahem uvnitř PiP (přetáčení, výběr titulků) není možná — k tomu je třeba otevřít aplikaci na celou obrazovku.

PiP na iOS: implementace a omezení

Na iOS je PiP implementován prostřednictvím frameworku AVKit a třídy AVPictureInPictureController. Toto API je dostupné na iOS 14+ pro iPhone a iPad, ale s různými požadavky: na iPadu PiP funguje přes AVPlayerLayer, na iPhonu — pouze přes AVPlayerViewController.

Požadavky pro PiP na iOS

Pro fungování PiP na iOS je třeba splnit několik podmínek: aplikace musí používat AVPlayer pro přehrávání videa, audio session musí být nastavena na kategorii .playback nebo .playAndRecord a aplikace musí mít oprávnění pro audio na pozadí (UIBackgroundModes = audio). Bez těchto nastavení se PiP nespustí — systém odmítne požadavek na vytvoření relace PiP, protože nemůže zaručit správné přehrávání po přechodu do režimu na pozadí.

Na iOS se okno PiP automaticky zobrazí při minimalizaci aplikace, pokud je video aktivně přehráváno a uživatel tuto funkci nevypnul v nastavení. Uživatel může také ručně minimalizovat video do PiP pomocí tlačítka v AVPlayerViewController. Velikost okna PiP na iOS je pevná a určuje ji systém — vývojář ji nemůže změnit. Poměr stran okna PiP odpovídá poměru stran původního videa, ale maximální velikost je omezena na 1/4 šířky obrazovky na iPhonu a 1/3 na iPadu.

Omezení iOS PiP

Hlavní omezení PiP na iOS: nemožnost vlastního UI v okně PiP, omezení na jeden PiP stream současně a požadavek na aktivní AVPlayer pro fungování PiP. Multi-PiP — současné přehrávání více oken PiP — není na iOS podporován. Při pokusu o spuštění druhého PiP se první automaticky zavře. Toto je hardwarové omezení: video procesor nemůže současně obsluhovat dva nezávislé kanály PiP kvůli omezením DMA a video paměti.

Další důležité omezení — doba přehrávání na pozadí. Pokud uživatel neinteraguje s oknem PiP, systém může po určité době pozastavit přehrávání kvůli úspoře energie. Automatická pauza PiP na iOS nastává po 10–15 minutách nečinnosti, pokud aplikace neimplementovala mechanismus keep-alive prostřednictvím background task. Pro videohovory a streamy se doporučuje používat PushKit a VoIP certifikáty, které toto omezení obcházejí.

PiP na Androidu: implementace a omezení

Na Androidu je PiP implementován jako vestavěný režim Activity, který se aktivuje prostřednictvím metody enterPictureInPictureMode. Od Androidu 8.0 (API 26) může jakákoli Activity přejít do režimu PiP a od Androidu 12 (API 31) se objevila podpora PiP pro SurfaceView a TextureView bez nutnosti používat MediaCodec.

Konfigurace manifestu

Pro podporu PiP v Android manifestu je třeba uvést atribut android:supportsPictureInPicture pro Activity v sekci . Bez tohoto atributu systém nepovolí přechod do PiP. Dále se doporučuje přidat android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation", aby se Activity znovu nevytvářela při změně velikosti okna při přechodu do PiP. Sestavení musí mít targetSdkVersion >= 26 (Android 8.0) pro fungování základního PiP.

V Androidu okno PiP standardně nemá ovládací prvky. Vývojář může přidat vlastní akce prostřednictvím RemoteAction v metodě setPictureInPictureParams. K dispozici jsou až 3 akce (například: pauza/přehrát, přetočit zpět/vpřed, zavřít). Každá akce se zobrazí v systémovém překrytí PiP jako ikona. Na rozdíl od iOS, kde jsou všechny prvky UI striktně pevné, Android poskytuje větší flexibilitu pro základní ovládání.

Přizpůsobení různým verzím

PiP na Androidu má různé možnosti v závislosti na verzi OS. Na Androidu 8.0–8.1 je PiP dostupný pouze pro video přehrávané přes MediaPlayer nebo MediaCodec s SurfaceView. Od Androidu 9 lze použít PictureInPictureArgs.Builder pro konfiguraci poměru stran okna PiP. Android 12 přidal podporu PiP pro vlastní SurfaceView a TextureView a také vylepšenou správu přechodů mezi celou obrazovkou a režimem PiP. Android 13+ umožňuje zobrazit okno PiP i na zamčené obrazovce, pokud má aplikace příslušné oprávnění.

Klíčový rozdíl Android PiP oproti iOS — možnost multi-PiP. Na Androidu od verze 12 může systém zobrazovat několik oken PiP současně, pokud to aplikace podporují a výkon zařízení to umožňuje. V praxi je však multi-PiP omezen možnostmi SoC: většina zařízení podporuje pouze jedno okno PiP kvůli hardwarovým omezením dekodéru, protože každé okno PiP vyžaduje vlastní video stream a samostatnou relaci dekódování.

Příklady kódu PiP

Podívejme se na praktickou implementaci PiP na obou mobilních platformách s ohledem na nejnovější změny API.

PiP na iOS s AVPictureInPictureController

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
    ) {
        // Skrýt prvky UI, uvolnit paměť
    }
    
    func pictureInPictureControllerDidStop(
        _ pictureInPictureController: AVPictureInPictureController
    ) {
        // Obnovit UI, pokračovat v renderování
    }
}

V příkladu je AVPictureInPictureController inicializován s playerLayer po kontrole isPictureInPictureSupported (PiP není podporován na iPhone SE 1. generace a některých iPadech bez dostatečné paměti). Delegát informuje aplikaci o zahájení a ukončení PiP — v těchto callbackech je třeba skrýt a obnovit prvky UI, protože v režimu PiP není rozhraní aplikace viditelné. Při přechodu do PiP se doporučuje zastavit všechny animace, skrýt ovládací prvky přehrávače a uvolnit nepoužívanou paměť, aby se zabránilo vynucenému uvolnění aplikace systémem.

PiP na Androidu s PictureInPictureParams

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) {
            // Skrýt UI, soustředit se pouze na média
            binding.controlsGroup.visibility = View.GONE
        } else {
            // Obnovit UI
            binding.controlsGroup.visibility = View.VISIBLE
        }
    }
}

Příklad v Kotlinu používá PictureInPictureParams.Builder pro konfiguraci PiP. Metoda setAspectRatio nastavuje poměr stran okna PiP (16:9 pro typické video). setAutoEnterEnabled(true) zapíná automatický přechod do PiP při minimalizaci aplikace. Callback onPictureInPictureModeChanged je volán při vstupu a výstupu z PiP — v něm je třeba skrýt nebo zobrazit prvky UI. Pro video na SurfaceView je vyžadováno dodatečné zpracování konfigurace přidáním android:configChanges="screenSize|smallestScreenSize" do manifestu, aby se zabránilo opětovnému vytvoření Activity při přechodu do režimu PiP.

Kdy použít Picture-in-Picture

PiP je mocný nástroj pro zlepšení uživatelského zážitku v aplikacích, kde obsah zůstává relevantní i při přepínání na jiné úkoly. Implementace PiP by však měla být odůvodněná a neměla by uživatele rozptylovat.

Optimální scénáře

Videohovory a konference — jeden z hlavních scénářů PiP. V Zoom, FaceTime, Google Meet umožňuje PiP vidět partnera při práci v jiných aplikacích: čtení poznámek, prohlížení prezentace nebo kontroly pošty. PiP pro videohovory vyžaduje podporu kamery na pozadí a správné nastavení audio session pro pokračování záznamu zvuku na pozadí. Na iOS se k tomu používá AVSampleBufferDisplayLayer místo AVPlayerLayer, protože videohovory nepoužívají AVPlayer.

Streamovací služby (YouTube, Netflix, Twitch) aktivně používají PiP pro pokračování sledování při hledání nového obsahu. YouTube Premium nabízí PiP jako placenou funkci, Netflix také omezuje PiP na určité tarifní plány kvůli licenčním omezením obsahu. Pro implementaci PiP ve streamovací aplikaci je vyžadována integrace s DRM systémem (FairPlay, Widevine), který podporuje bezpečný pipeline v režimu PiP.

Kdy PiP není potřeba

PiP není vhodný pro aplikace s interaktivním video obsahem, kde je vyžadována interakce uživatele: vzdělávací platformy s testy uvnitř přehrávače, herní streamy s chatem, nákupní aplikace s odkazy na produkty ve videu. V těchto případech je okno PiP příliš malé pro zobrazení doplňujících informací a interaktivní prvky v PiP nejsou systémem podporovány. Doporučuje se používat PiP pouze pro pasivní sledování, když není vyžadována interakce s obsahem.

Pro hudební a podcastové aplikace je PiP nadbytečný — stačí audio na pozadí bez vizuálního okna. PiP spotřebovává další GPU zdroje pro renderování videa v plovoucím okně, což zkracuje výdrž baterie. Pokud je obsah zvukový (hudba, podcasty, audioknihy) — používejte přehrávání na pozadí bez PiP. Pokud je vizuální — implementujte PiP pro zlepšení uživatelského zážitku.