Picture-in-Picture di aplikasi mobile — apa itu, cara kerja dan di mana diterapkan

Apa itu Picture-in-Picture?

Picture-in-Picture (PiP) adalah mode menampilkan video di jendela mengambang kecil yang tetap berada di atas semua jendela dan aplikasi lainnya. Pengguna dapat memindahkan jendela PiP di layar, mengubah ukurannya (di beberapa platform) dan terus menonton konten saat bekerja di aplikasi lain.

Konsep PiP berasal dari televisi: pada tahun 1990-an, televisi sudah bisa menampilkan saluran kedua di sudut layar. Di perangkat seluler, PiP pertama kali muncul di iPad dengan iOS 9 (2015) untuk video di Safari, dan PiP sistem penuh untuk aplikasi tersedia di iOS 14 (2020). Di Android, dukungan PiP muncul lebih awal — di versi 8.0 Oreo (2017), tetapi hanya untuk video, dan mulai Android 12 untuk semua jenis konten.

PiP berbeda dari pemutaran latar belakang karena video terus ditampilkan di layar, bukan hanya diputar di aliran audio. Pemutaran latar belakang (background audio) tersedia di kedua platform, tetapi PiP memberi pengguna kontrol visual atas konten: ia melihat bingkai, dapat menjeda, memundurkan, atau menutup jendela. Ini sangat penting untuk pelajaran video, streaming, dan panggilan video di mana konten visual sama pentingnya dengan audio.

Bagaimana cara kerja PiP?

Secara arsitektur, PiP diimplementasikan melalui manajer jendela sistem yang membuat jendela terpisah dengan prioritas tampilan lebih rendah. Aplikasi mendelegasikan keluaran video ke layanan sistem yang terus merender video bahkan setelah aplikasi masuk ke mode latar belakang atau diminimalkan.

Siklus hidup sesi PiP

Proses dimulai saat pengguna mengecilkan aplikasi dengan video aktif atau menekan tombol PiP (di iOS) atau sistem secara otomatis mengalihkan Activity ke mode PiP (di Android). Manajer jendela sistem menangkap aliran video dan membuat jendela mengambang dengan proporsi tetap. Ukuran jendela tergantung pada rasio aspek video asli dan batasan platform: di iOS, jendela PiP memakan sekitar 1/6–1/4 lebar layar, di Android — setidaknya 108 dp lebar dan 240 dp tinggi untuk perangkat seluler.

Saat jendela PiP aktif, aplikasi dapat berada dalam salah satu dari tiga keadaan: di latar belakang (diminimalkan), dalam keadaan aktif (pengguna kembali ke aplikasi), atau dalam keadaan menunggu (sistem menjeda PiP karena kekurangan sumber daya). Saat beralih ke PiP, aplikasi harus menjeda operasi UI yang tidak perlu (animasi, rendering antarmuka) dan membebaskan memori, karena sumber daya sistem dalam mode multitasking didistribusikan lebih ketat. iOS secara otomatis mengirimkan notifikasi AVPictureInPictureControllerWillStartNotification ke aplikasi, dan Android — callback onPictureInPictureModeChanged.

Batasan mode PiP

Jendela PiP memiliki batasan signifikan: tidak dapat menampilkan elemen kontrol UI standar (tombol jeda, penggeser kemajuan) — hanya overlay sistem minimal dengan elemen dasar: play/pause, tutup, perkecil ke layar penuh. UI sistem PiP di iOS mencakup tombol jeda dan tutup, dan di Android — elemen yang sama plus tombol pengaturan tambahan. Interaksi dengan konten di dalam PiP (memundurkan, memilih subtitle) tidak mungkin dilakukan — untuk ini aplikasi harus dibuka di layar penuh.

PiP di iOS: implementasi dan batasan

Di iOS, PiP diimplementasikan melalui framework AVKit dan kelas AVPictureInPictureController. API ini tersedia di iOS 14+ untuk iPhone dan iPad, tetapi dengan persyaratan berbeda: di iPad PiP bekerja melalui AVPlayerLayer, di iPhone — hanya melalui AVPlayerViewController.

Persyaratan PiP di iOS

Untuk PiP di iOS, beberapa kondisi harus dipenuhi: aplikasi harus menggunakan AVPlayer untuk pemutaran video, sesi audio harus dikonfigurasi ke kategori .playback atau .playAndRecord, dan aplikasi harus memiliki entitlements untuk audio latar belakang (UIBackgroundModes = audio). Tanpa pengaturan ini, PiP tidak akan dimulai — sistem akan menolak permintaan pembuatan sesi PiP karena tidak dapat menjamin pemutaran yang benar setelah beralih ke latar belakang.

Di iOS, jendela PiP secara otomatis ditampilkan saat aplikasi diminimalkan jika video sedang diputar aktif dan pengguna tidak menonaktifkan fitur ini di pengaturan. Pengguna juga dapat secara manual mengecilkan video ke PiP melalui tombol di AVPlayerViewController. Ukuran jendela PiP di iOS tetap dan ditentukan oleh sistem — pengembang tidak dapat mengubahnya. Rasio aspek jendela PiP sesuai dengan rasio aspek video asli, tetapi ukuran maksimum dibatasi hingga 1/4 lebar layar di iPhone dan 1/3 di iPad.

Batasan iOS PiP

Batasan utama PiP di iOS: ketidakmampuan UI kustom di jendela PiP, batasan satu aliran PiP secara bersamaan, dan persyaratan AVPlayer aktif untuk PiP. Multi-PiP — pemutaran simultan beberapa jendela PiP — tidak didukung di iOS. Saat mencoba memulai PiP kedua, yang pertama otomatis ditutup. Ini adalah batasan perangkat keras: prosesor video tidak dapat melayani dua saluran PiP independen secara bersamaan karena batasan DMA dan memori video.

Batasan penting lainnya — durasi pemutaran di latar belakang. Jika pengguna tidak berinteraksi dengan jendela PiP, sistem dapat menjeda pemutaran setelah beberapa waktu untuk menghemat energi. Jeda otomatis PiP di iOS terjadi setelah 10–15 menit tidak aktif, jika aplikasi tidak mengimplementasikan mekanisme keep-alive melalui background task. Untuk panggilan video dan streaming, disarankan menggunakan PushKit dan sertifikat VoIP, yang melewati batasan ini.

PiP di Android: implementasi dan batasan

Di Android, PiP diimplementasikan sebagai mode Activity bawaan yang diaktifkan melalui metode enterPictureInPictureMode. Mulai Android 8.0 (API 26), Activity apa pun dapat beralih ke mode PiP, dan mulai Android 12 (API 31) dukungan PiP untuk SurfaceView dan TextureView tanpa perlu menggunakan MediaCodec.

Konfigurasi manifest

Untuk dukungan PiP di manifest Android, atribut android:supportsPictureInPicture harus ditentukan untuk Activity di bagian . Tanpa atribut ini, sistem tidak akan mengizinkan peralihan ke PiP. Selain itu, disarankan menambahkan android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation" agar Activity tidak dibuat ulang saat ukuran jendela berubah saat beralih ke PiP. Build harus memiliki targetSdkVersion >= 26 (Android 8.0) untuk PiP dasar.

Di Android, jendela PiP secara default tidak memiliki elemen kontrol. Pengembang dapat menambahkan tindakan kustom melalui RemoteAction di metode setPictureInPictureParams. Hingga 3 tindakan tersedia (misalnya: jeda/putar, mundur/maju, tutup). Setiap tindakan ditampilkan di overlay sistem PiP sebagai ikon. Tidak seperti iOS di mana semua elemen UI tetap ketat, Android memberikan lebih banyak fleksibilitas untuk kontrol dasar.

Adaptasi untuk versi berbeda

PiP di Android memiliki kemampuan berbeda tergantung versi OS. Di Android 8.0–8.1, PiP hanya tersedia untuk video yang diputar melalui MediaPlayer atau MediaCodec dengan SurfaceView. Mulai Android 9, PictureInPictureArgs.Builder dapat digunakan untuk mengonfigurasi rasio aspek jendela PiP. Android 12 menambahkan dukungan PiP untuk SurfaceView dan TextureView kustom, serta manajemen transisi yang lebih baik antara layar penuh dan mode PiP. Android 13+ memungkinkan menampilkan jendela PiP bahkan di layar terkunci, jika aplikasi memiliki izin yang sesuai.

Perbedaan utama Android PiP dari iOS — kemampuan multi-PiP. Di Android mulai versi 12, sistem dapat menampilkan beberapa jendela PiP secara bersamaan, jika aplikasi mendukungnya dan kinerja perangkat memungkinkan. Namun dalam praktiknya, multi-PiP dibatasi oleh kemampuan SoC: sebagian besar perangkat hanya mendukung satu jendela PiP karena batasan perangkat keras decoder, karena setiap jendela PiP memerlukan aliran video sendiri dan sesi decoding terpisah.

Contoh kode PiP

Mari kita lihat implementasi praktis PiP di kedua platform seluler dengan mempertimbangkan perubahan API terbaru.

PiP di iOS dengan 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
    ) {
        // Sembunyikan elemen UI, bebaskan memori
    }
    
    func pictureInPictureControllerDidStop(
        _ pictureInPictureController: AVPictureInPictureController
    ) {
        // Pulihkan UI, lanjutkan rendering
    }
}

Dalam contoh, AVPictureInPictureController diinisialisasi dengan playerLayer setelah memeriksa isPictureInPictureSupported (PiP tidak didukung di iPhone SE generasi 1 dan beberapa iPad dengan memori tidak mencukupi). Delegasi memberi tahu aplikasi tentang awal dan akhir PiP — dalam callback ini, elemen UI harus disembunyikan dan dipulihkan, karena dalam mode PiP antarmuka aplikasi tidak terlihat. Saat beralih ke PiP, disarankan untuk menghentikan semua animasi, menyembunyikan kontrol pemutar, dan membebaskan memori yang tidak digunakan untuk mencegah pembongkaran paksa aplikasi oleh sistem.

PiP di Android dengan 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) {
            // Sembunyikan UI, fokus hanya pada media
            binding.controlsGroup.visibility = View.GONE
        } else {
            // Pulihkan UI
            binding.controlsGroup.visibility = View.VISIBLE
        }
    }
}

Contoh di Kotlin menggunakan PictureInPictureParams.Builder untuk mengonfigurasi PiP. Metode setAspectRatio mengatur rasio aspek jendela PiP (16:9 untuk video tipikal). setAutoEnterEnabled(true) mengaktifkan peralihan otomatis ke PiP saat aplikasi diminimalkan. Callback onPictureInPictureModeChanged dipanggil saat masuk dan keluar dari PiP — di dalamnya, elemen UI harus disembunyikan atau ditampilkan. Untuk video di SurfaceView, penanganan konfigurasi tambahan diperlukan dengan menambahkan android:configChanges="screenSize|smallestScreenSize" di manifest untuk mencegah pembuatan ulang Activity saat beralih ke mode PiP.

Kapan menggunakan Picture-in-Picture

PiP adalah alat yang ampuh untuk meningkatkan pengalaman pengguna di aplikasi di mana konten tetap relevan bahkan saat beralih ke tugas lain. Namun implementasi PiP harus dibenarkan dan tidak mengganggu pengguna.

Skenario optimal

Panggilan video dan konferensi — salah satu skenario utama PiP. Di Zoom, FaceTime, Google Meet, PiP memungkinkan melihat lawan bicara saat bekerja di aplikasi lain: membaca catatan, melihat presentasi, atau memeriksa email. PiP untuk panggilan video memerlukan dukungan kamera di latar belakang dan konfigurasi sesi audio yang benar untuk melanjutkan pengambilan audio di latar belakang. Di iOS, untuk ini digunakan AVSampleBufferDisplayLayer sebagai ganti AVPlayerLayer, karena panggilan video tidak menggunakan AVPlayer.

Layanan streaming (YouTube, Netflix, Twitch) secara aktif menggunakan PiP untuk melanjutkan menonton saat mencari konten baru. YouTube Premium menawarkan PiP sebagai fitur berbayar, Netflix juga membatasi PiP ke paket tarif tertentu karena batasan lisensi konten. Untuk mengimplementasikan PiP di aplikasi streaming, diperlukan integrasi dengan sistem DRM (FairPlay, Widevine) yang mendukung pipeline aman dalam mode PiP.

Kapan PiP tidak diperlukan

PiP tidak cocok untuk aplikasi dengan konten video interaktif yang memerlukan interaksi pengguna: platform edukasi dengan tes di dalam pemutar, streaming game dengan chat, aplikasi belanja dengan tautan produk di video. Dalam kasus ini, jendela PiP terlalu kecil untuk menampilkan informasi tambahan, dan elemen interaktif di PiP tidak didukung oleh sistem. Disarankan menggunakan PiP hanya untuk menonton pasif, saat interaksi dengan konten tidak diperlukan.

Untuk aplikasi musik dan podcast, PiP berlebihan — audio latar belakang tanpa jendela visual sudah cukup. PiP mengkonsumsi sumber daya GPU tambahan untuk merender video di jendela mengambang, yang memperpendek masa pakai baterai. Jika konten bersifat audio (musik, podcast, buku audio) — gunakan pemutaran latar belakang tanpa PiP. Jika visual — terapkan PiP untuk meningkatkan pengalaman pengguna.