Picture-in-Picture in mobiele apps — wat is het, hoe werkt het en waar wordt het toegepast

Wat is Picture-in-Picture?

Picture-in-Picture (PiP) is een modus voor het weergeven van video in een klein zwevend venster dat boven alle andere vensters en apps blijft. De gebruiker kan het PiP-venster over het scherm verplaatsen, de grootte ervan wijzigen (op sommige platforms) en doorgaan met het bekijken van content terwijl hij in andere apps werkt.

Het concept PiP komt uit de televisie: al in de jaren 90 konden televisies een tweede kanaal in de hoek van het scherm tonen. In mobiele apparaten verscheen PiP voor het eerst op de iPad in iOS 9 (2015) voor video in Safari, en volledige systeem-PiP voor apps werd beschikbaar in iOS 14 (2020). Op Android verscheen PiP-ondersteuning eerder — in versie 8.0 Oreo (2017), maar alleen voor video, en vanaf Android 12 voor alle soorten content.

PiP verschilt van achtergrondweergave doordat de video op het scherm blijft worden weergegeven en niet alleen in de audiostream wordt afgespeeld. Achtergrondweergave (background audio) is beschikbaar op beide platforms, maar PiP geeft de gebruiker visuele controle over de content: hij ziet frames, kan pauzeren, terugspoelen of het venster sluiten. Dit is vooral belangrijk voor videolessen, streams en videogesprekken waar visuele content net zo belangrijk is als audio.

Hoe werkt PiP?

Architectonisch wordt PiP geïmplementeerd via de systeemvensterbeheerder die een apart venster met lagere weergaveprioriteit maakt. De app delegeert de video-uitvoer naar een systeemservice die de videorendering blijft uitvoeren, zelfs nadat de app naar de achtergrond is gegaan of is geminimaliseerd.

Levenscyclus van een PiP-sessie

Het proces begint wanneer de gebruiker de app met actieve video minimaliseert of op de PiP-knop drukt (op iOS) of het systeem automatisch de Activity naar de PiP-modus overschakelt (op Android). De systeemvensterbeheerder vangt de videostream op en maakt een zwevend venster met vaste verhoudingen. De grootte van het venster hangt af van de beeldverhouding van de originele video en de platformbeperkingen: op iOS neemt het PiP-venster ongeveer 1/6–1/4 van de schermbreedte in beslag, op Android — ten minste 108 dp breed en 240 dp hoog voor mobiele apparaten.

Wanneer het PiP-venster actief is, kan de app zich in een van drie toestanden bevinden: op de achtergrond (geminimaliseerd), in actieve toestand (gebruiker is teruggekeerd naar de app) of in wachttoestand (systeem heeft PiP gepauzeerd vanwege gebrek aan resources). Bij de overgang naar PiP moet de app onnodige UI-bewerkingen (animaties, interface-rendering) pauzeren en geheugen vrijmaken, omdat systeembronnen in multitasking-modus strenger worden verdeeld. iOS stuurt automatisch de melding AVPictureInPictureControllerWillStartNotification naar de app, en Android — de callback onPictureInPictureModeChanged.

Beperkingen van de PiP-modus

Het PiP-venster heeft aanzienlijke beperkingen: er kunnen geen standaard UI-bedieningselementen (pauzeknop, voortgangsbalk) worden weergegeven — alleen een minimale systeemoverlay met basiselementen: play/pause, sluiten, uitvouwen naar volledig scherm. De systeem-PiP-UI op iOS bevat een pauze- en sluitknop, en op Android — dezelfde elementen plus een extra instellingenknop. Interactie met content binnen PiP (spoelen, ondertitels selecteren) is onmogelijk — hiervoor moet de app op volledig scherm worden geopend.

PiP op iOS: implementatie en beperkingen

Op iOS wordt PiP geïmplementeerd via het AVKit-framework en de klasse AVPictureInPictureController. Deze API is beschikbaar op iOS 14+ voor iPhone en iPad, maar met verschillende vereisten: op iPad werkt PiP via AVPlayerLayer, op iPhone — alleen via AVPlayerViewController.

Vereisten voor PiP op iOS

Voor PiP op iOS moeten verschillende voorwaarden worden vervuld: de app moet AVPlayer gebruiken voor videoafspelen, de audiosessie moet worden ingesteld op de categorie .playback of .playAndRecord, en de app moet entitlements hebben voor achtergrondaudio (UIBackgroundModes = audio). Zonder deze instellingen start PiP niet — het systeem wijst het verzoek om een PiP-sessie te maken af, omdat het geen correcte weergave na overgang naar de achtergrond kan garanderen.

Op iOS wordt het PiP-venster automatisch weergegeven bij het minimaliseren van de app als de video actief wordt afgespeeld en de gebruiker deze functie niet heeft uitgeschakeld in de instellingen. De gebruiker kan de video ook handmatig naar PiP minimaliseren via de knop in AVPlayerViewController. De grootte van het PiP-venster op iOS is vast en wordt bepaald door het systeem — de ontwikkelaar kan deze niet wijzigen. De beeldverhouding van het PiP-venster komt overeen met de beeldverhouding van de originele video, maar de maximale grootte is beperkt tot 1/4 van de schermbreedte op iPhone en 1/3 op iPad.

Beperkingen van iOS PiP

De belangrijkste beperkingen van PiP op iOS: geen aangepaste UI in het PiP-venster, beperking tot één PiP-stroom tegelijk en de vereiste van een actieve AVPlayer voor PiP. Multi-PiP — gelijktijdig afspelen van meerdere PiP-vensters — wordt niet ondersteund op iOS. Bij een poging om een tweede PiP te starten, wordt de eerste automatisch gesloten. Dit is een hardwarebeperking: de videoprocessor kan niet tegelijkertijd twee onafhankelijke PiP-kanalen bedienen vanwege DMA- en videogeheugenbeperkingen.

Een andere belangrijke beperking — de duur van achtergrondweergave. Als de gebruiker geen interactie heeft met het PiP-venster, kan het systeem de weergave na enige tijd pauzeren om energie te besparen. Automatische pauze van PiP op iOS treedt op na 10–15 minuten inactiviteit, als de app geen keep-alive-mechanisme via een background task heeft geïmplementeerd. Voor videogesprekken en streams wordt aanbevolen PushKit en VoIP-certificaten te gebruiken, die deze beperking omzeilen.

PiP op Android: implementatie en beperkingen

Op Android wordt PiP geïmplementeerd als een ingebouwde Activity-modus die wordt geactiveerd via de methode enterPictureInPictureMode. Vanaf Android 8.0 (API 26) kan elke Activity naar de PiP-modus overschakelen, en vanaf Android 12 (API 31) is er PiP-ondersteuning voor SurfaceView en TextureView zonder MediaCodec te gebruiken.

Manifestconfiguratie

Voor PiP-ondersteuning in het Android-manifest moet het attribuut android:supportsPictureInPicture voor de Activity in de sectie worden opgegeven. Zonder dit attribuut staat het systeem de overgang naar PiP niet toe. Aanvullend wordt aanbevolen android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation" toe te voegen om te voorkomen dat de Activity opnieuw wordt aangemaakt bij het wijzigen van de venstergrootte bij de overgang naar PiP. De build moet targetSdkVersion >= 26 (Android 8.0) hebben voor basale PiP.

In Android heeft het PiP-venster standaard geen bedieningselementen. De ontwikkelaar kan aangepaste acties toevoegen via RemoteAction in de methode setPictureInPictureParams. Er zijn maximaal 3 acties beschikbaar (bijvoorbeeld: pauze/afspelen, terug/vooruit spoelen, sluiten). Elke actie wordt weergegeven in de systeem-PiP-overlay als een pictogram. In tegenstelling tot iOS, waar alle UI-elementen strikt vastliggen, biedt Android meer flexibiliteit voor basisbediening.

Aanpassing aan verschillende versies

PiP op Android heeft verschillende mogelijkheden afhankelijk van de OS-versie. Op Android 8.0–8.1 is PiP alleen beschikbaar voor video afgespeeld via MediaPlayer of MediaCodec met SurfaceView. Vanaf Android 9 kan PictureInPictureArgs.Builder worden gebruikt voor het configureren van de beeldverhouding van het PiP-venster. Android 12 voegde PiP-ondersteuning toe voor aangepaste SurfaceView en TextureView, evenals verbeterd beheer van overgangen tussen volledig scherm en PiP-modus. Android 13+ maakt het mogelijk het PiP-venster weer te geven, zelfs op een vergrendeld scherm, als de app de juiste toestemming heeft.

Het belangrijkste verschil van Android PiP met iOS — de mogelijkheid van multi-PiP. Op Android vanaf versie 12 kan het systeem meerdere PiP-vensters tegelijk weergeven, als de apps dit ondersteunen en de prestaties van het apparaat dit toelaten. In de praktijk wordt multi-PiP echter beperkt door de mogelijkheden van de SoC: de meeste apparaten ondersteunen slechts één PiP-venster vanwege hardwarebeperkingen van de decoder, omdat elk PiP-venster zijn eigen videostream en een aparte decodingssessie vereist.

PiP codevoorbeelden

Laten we de praktische implementatie van PiP op beide mobiele platforms bekijken, rekening houdend met de laatste API-wijzigingen.

PiP op iOS met 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
    ) {
        // Verberg UI-elementen, maak geheugen vrij
    }
    
    func pictureInPictureControllerDidStop(
        _ pictureInPictureController: AVPictureInPictureController
    ) {
        // Herstel UI, hervat rendering
    }
}

In het voorbeeld wordt AVPictureInPictureController geïnitialiseerd met playerLayer na controle van isPictureInPictureSupported (PiP wordt niet ondersteund op iPhone SE 1e generatie en sommige iPads met onvoldoende geheugen). De delegate stelt de app op de hoogte van het begin en einde van PiP — in deze callbacks moeten UI-elementen worden verborgen en hersteld, omdat in de PiP-modus de app-interface niet zichtbaar is. Bij de overgang naar PiP wordt aanbevolen alle animaties te stoppen, de bedieningselementen van de speler te verbergen en ongebruikt geheugen vrij te maken om gedwongen verwijdering van de app door het systeem te voorkomen.

PiP op Android met 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) {
            // Verberg UI, focus alleen op media
            binding.controlsGroup.visibility = View.GONE
        } else {
            // Herstel UI
            binding.controlsGroup.visibility = View.VISIBLE
        }
    }
}

Het voorbeeld in Kotlin gebruikt PictureInPictureParams.Builder voor het configureren van PiP. De methode setAspectRatio stelt de beeldverhouding van het PiP-venster in (16:9 voor typische video). setAutoEnterEnabled(true) schakelt automatische overgang naar PiP in bij het minimaliseren van de app. De callback onPictureInPictureModeChanged wordt aangeroepen bij het betreden en verlaten van PiP — hierin moeten UI-elementen worden verborgen of getoond. Voor video op SurfaceView is extra configuratieafhandeling vereist door android:configChanges="screenSize|smallestScreenSize" in het manifest toe te voegen om te voorkomen dat de Activity opnieuw wordt aangemaakt bij de overgang naar de PiP-modus.

Wanneer Picture-in-Picture gebruiken

PiP is een krachtig hulpmiddel voor het verbeteren van de gebruikerservaring in apps waar content relevant blijft, zelfs bij het overschakelen naar andere taken. De implementatie van PiP moet echter gerechtvaardigd zijn en de gebruiker niet afleiden.

Optimale scenario's

Videogesprekken en conferenties — een van de belangrijkste scenario's voor PiP. In Zoom, FaceTime, Google Meet maakt PiP het mogelijk de gesprekspartner te zien tijdens het werken in andere apps: het lezen van notities, het bekijken van een presentatie of het controleren van e-mail. PiP voor videogesprekken vereist camera-ondersteuning op de achtergrond en de juiste configuratie van de audiosessie om audio-opname op de achtergrond voort te zetten. Op iOS wordt hiervoor AVSampleBufferDisplayLayer gebruikt in plaats van AVPlayerLayer, omdat videogesprekken geen AVPlayer gebruiken.

Streamingdiensten (YouTube, Netflix, Twitch) gebruiken PiP actief om door te gaan met kijken tijdens het zoeken naar nieuwe content. YouTube Premium biedt PiP als betaalde functie, Netflix beperkt PiP ook tot bepaalde abonnementen vanwege licentiebeperkingen voor content. Voor het implementeren van PiP in een streaming-app is integratie met een DRM-systeem (FairPlay, Widevine) vereist dat een beveiligde pipeline in de PiP-modus ondersteunt.

Wanneer PiP niet nodig is

PiP is niet geschikt voor apps met interactieve videocontent waar gebruikersinteractie vereist is: educatieve platforms met tests in de speler, gamestreams met chat, winkelapps met links naar producten in video. In deze gevallen is het PiP-venster te klein voor het weergeven van aanvullende informatie en worden interactieve elementen in PiP niet ondersteund door het systeem. Het wordt aanbevolen PiP alleen te gebruiken voor passief kijken, wanneer interactie met de content niet nodig is.

Voor muziek- en podcastapps is PiP overbodig — achtergrondaudio zonder visueel venster is voldoende. PiP verbruikt extra GPU-bronnen voor het renderen van video in een zwevend venster, wat de batterijduur verkort. Als de content audio is (muziek, podcasts, audioboeken) — gebruik achtergrondweergave zonder PiP. Als het visueel is — implementeer PiP voor het verbeteren van de gebruikerservaring.