Picture-in-Picture trong ứng dụng di động — định nghĩa, cách hoạt động và nơi sử dụng

Picture-in-Picture là gì?

Picture-in-Picture (PiP) là chế độ hiển thị video trong cửa sổ nổi nhỏ luôn ở phía trên tất cả các cửa sổ và ứng dụng khác. Người dùng có thể di chuyển cửa sổ PiP trên màn hình, thay đổi kích thước (trên một số nền tảng) và tiếp tục xem nội dung khi làm việc trong các ứng dụng khác.

Khái niệm PiP đến từ truyền hình: vào những năm 1990, TV đã cho phép hiển thị kênh thứ hai ở góc màn hình. Trên thiết bị di động, PiP xuất hiện lần đầu trên iPad với iOS 9 (2015) cho video trong Safari, còn PiP hệ thống đầy đủ cho ứng dụng có sẵn trong iOS 14 (2020). Hỗ trợ PiP trên Android xuất hiện sớm hơn — trong phiên bản 8.0 Oreo (2017), nhưng chỉ cho video, và từ Android 12 cho mọi loại nội dung.

PiP khác với phát nền ở chỗ video tiếp tục hiển thị trên màn hình, không chỉ phát trong luồng âm thanh. Phát âm thanh nền có sẵn trên cả hai nền tảng, nhưng PiP cho người dùng kiểm soát trực quan nội dung: họ có thể xem khung hình, tạm dừng, tua lại hoặc đóng cửa sổ. Điều này đặc biệt quan trọng cho hướng dẫn video, luồng trực tiếp và gọi video nơi nội dung trực quan quan trọng không kém âm thanh.

PiP hoạt động như thế nào?

Về mặt kiến trúc, PiP được triển khai thông qua trình quản lý cửa sổ hệ thống tạo một cửa sổ riêng với ưu tiên hiển thị thấp hơn. Ứng dụng ủy quyền xuất video cho dịch vụ hệ thống tiếp tục kết xuất video ngay cả sau khi ứng dụng chuyển sang nền hoặc bị thu nhỏ.

Vòng đời phiên PiP

Quá trình bắt đầu khi người dùng thu nhỏ ứng dụng có video đang hoạt động hoặc nhấn nút PiP (trên iOS), hoặc hệ thống tự động chuyển Activity sang chế độ PiP (trên Android). Trình quản lý cửa sổ hệ thống nắm bắt luồng video và tạo cửa sổ nổi với tỷ lệ cố định. Kích thước cửa sổ phụ thuộc vào tỷ lệ khung hình của video gốc và giới hạn nền tảng: trên iOS, cửa sổ PiP chiếm khoảng 1/6–1/4 chiều rộng màn hình; trên Android, không dưới 108 dp chiều rộng và 240 dp chiều cao cho thiết bị di động.

Khi cửa sổ PiP hoạt động, ứng dụng có thể ở một trong ba trạng thái: nền (thu nhỏ), trạng thái hoạt động (người dùng quay lại ứng dụng), hoặc trạng thái chờ (hệ thống tạm dừng PiP do thiếu tài nguyên). Khi chuyển sang PiP, ứng dụng nên tạm dừng các thao tác UI không cần thiết (hoạt ảnh, kết xuất giao diện) và giải phóng bộ nhớ, vì tài nguyên hệ thống được phân bổ chặt chẽ hơn trong chế độ đa nhiệm. iOS tự động gửi thông báo AVPictureInPictureControllerWillStartNotification cho ứng dụng, còn Android gửi callback onPictureInPictureModeChanged.

Hạn chế của chế độ PiP

Cửa sổ PiP có những hạn chế đáng kể: không thể hiển thị các phần tử điều khiển UI tiêu chuẩn (nút tạm dừng, thanh tiến trình) — chỉ có lớp phủ hệ thống tối thiểu với các điều khiển cơ bản: phát/tạm dừng, đóng, mở rộng toàn màn hình. UI PiP hệ thống trên iOS bao gồm nút tạm dừng và đóng, còn trên Android bao gồm các phần tử tương tự thêm nút cài đặt. Tương tác với nội dung bên trong PiP (tua lại, chọn phụ đề) là không thể — để làm điều đó, cần mở rộng ứng dụng ra toàn màn hình.

PiP trên iOS: triển khai và hạn chế

Trên iOS, PiP được triển khai qua framework AVKit và lớp AVPictureInPictureController. API này có sẵn trên iOS 14+ cho iPhone và iPad, nhưng với yêu cầu khác nhau: trên iPad, PiP hoạt động qua AVPlayerLayer; trên iPhone, chỉ qua AVPlayerViewController.

Yêu cầu cho PiP trên iOS

Để PiP hoạt động trên iOS, cần đáp ứng một số điều kiện: ứng dụng phải sử dụng AVPlayer để phát video, phiên âm thanh phải được đặt ở danh mục .playback hoặc .playAndRecord, và ứng dụng phải có quyền âm thanh nền (UIBackgroundModes = audio). Nếu không có các cài đặt này, PiP sẽ không khởi động — hệ thống sẽ từ chối yêu cầu phiên PiP vì không thể đảm bảo phát lại chính xác sau khi chuyển sang nền.

Trên iOS, cửa sổ PiP tự động xuất hiện khi thu nhỏ ứng dụng nếu video đang phát tích cực và người dùng chưa tắt tính năng này trong cài đặt. Người dùng cũng có thể tự động thu nhỏ video vào PiP qua nút trong AVPlayerViewController. Kích thước cửa sổ PiP trên iOS là cố định và do hệ thống quyết định — nhà phát triển không thể thay đổi. Tỷ lệ khung hình của cửa sổ PiP tương ứng với tỷ lệ video gốc, nhưng kích thước tối đa bị giới hạn ở 1/4 chiều rộng màn hình trên iPhone và 1/3 trên iPad.

Hạn chế PiP trên iOS

Các hạn chế chính của PiP trên iOS: không thể có UI tùy chỉnh trong cửa sổ PiP, một luồng PiP tại một thời điểm và yêu cầu AVPlayer hoạt động để PiP hoạt động. Đa PiP — phát đồng thời nhiều cửa sổ PiP — không được hỗ trợ trên iOS. Khi cố gắng khởi động PiP thứ hai, PiP đầu tiên tự động đóng lại. Đây là giới hạn phần cứng: bộ xử lý video không thể phục vụ đồng thời hai kênh PiP độc lập do hạn chế về DMA và bộ nhớ video.

Một hạn chế quan trọng khác là thời lượng phát nền. Nếu người dùng không tương tác với cửa sổ PiP, hệ thống có thể tạm dừng phát lại sau một thời gian để tiết kiệm năng lượng. Tạm dừng PiP tự động trên iOS xảy ra sau 10–15 phút không hoạt động nếu ứng dụng chưa triển khai cơ chế keep-alive qua tác vụ nền. Cho gọi video và luồng trực tiếp, nên sử dụng PushKit và chứng chỉ VoIP để vượt qua giới hạn này.

PiP trên Android: triển khai và hạn chế

Trên Android, PiP được triển khai như chế độ Activity tích hợp được kích hoạt qua phương thức enterPictureInPictureMode. Từ Android 8.0 (API 26), bất kỳ Activity nào cũng có thể vào chế độ PiP, và từ Android 12 (API 31) có hỗ trợ PiP cho SurfaceView và TextureView mà không cần dùng MediaCodec.

Cấu hình tệp kê khai

Để hỗ trợ PiP trong tệp kê khai Android, thuộc tính android:supportsPictureInPicture phải được chỉ định cho Activity trong phần . Nếu không có thuộc tính này, hệ thống sẽ không cho phép chuyển sang PiP. Ngoài ra, nên chỉ định android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation" để Activity không bị tạo lại khi thay đổi kích thước cửa sổ trong quá trình chuyển PiP. Bản dựng phải có targetSdkVersion >= 26 (Android 8.0) để PiP cơ bản hoạt động.

Trên Android, cửa sổ PiP theo mặc định không có phần tử điều khiển. Nhà phát triển có thể thêm hành động tùy chỉnh qua RemoteAction trong phương thức setPictureInPictureParams. Có tới 3 hành động (ví dụ: tạm dừng/phát, tua lại/tiến, đóng). Mỗi hành động xuất hiện trong lớp phủ PiP hệ thống dưới dạng biểu tượng. Không giống iOS nơi tất cả phần tử UI đều cố định nghiêm ngặt, Android cung cấp linh hoạt hơn cho các điều khiển cơ bản.

Thích ứng với các phiên bản khác nhau

PiP trên Android có khả năng khác nhau tùy theo phiên bản hệ điều hành. Trên Android 8.0–8.1, PiP chỉ khả dụng cho video phát qua MediaPlayer hoặc MediaCodec với SurfaceView. Từ Android 9, có thể sử dụng PictureInPictureArgs.Builder để cấu hình tỷ lệ khung hình cửa sổ PiP. Android 12 thêm hỗ trợ PiP cho SurfaceView và TextureView tùy chỉnh, cùng với chuyển tiếp cải thiện giữa chế độ toàn màn hình và PiP. Android 13+ cho phép hiển thị cửa sổ PiP ngay cả khi màn hình bị khóa, nếu ứng dụng có quyền phù hợp.

Sự khác biệt chính của PiP trên Android so với iOS là khả năng đa PiP. Trên Android 12+, hệ thống có thể hiển thị nhiều cửa sổ PiP đồng thời nếu ứng dụng hỗ trợ và hiệu suất thiết bị cho phép. Tuy nhiên, trong thực tế, đa PiP bị giới hạn bởi khả năng SoC: hầu hết thiết bị chỉ hỗ trợ một cửa sổ PiP do hạn chế phần cứng bộ giải mã, vì mỗi cửa sổ PiP yêu cầu luồng video riêng và phiên giải mã riêng biệt.

Ví dụ mã PiP

Hãy xem triển khai thực tế của PiP trên cả hai nền tảng di động, tính đến những thay đổi API mới nhất.

PiP trên iOS với 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
    ) {
        // Ẩn phần tử UI, giải phóng bộ nhớ
    }
    
    func pictureInPictureControllerDidStop(
        _ pictureInPictureController: AVPictureInPictureController
    ) {
        // Khôi phục UI, tiếp tục kết xuất
    }
}

Trong ví dụ này, AVPictureInPictureController được khởi tạo với playerLayer sau khi kiểm tra isPictureInPictureSupported (PiP không được hỗ trợ trên iPhone SE thế hệ 1 và một số iPad không đủ bộ nhớ). Delegate thông báo cho ứng dụng về việc bắt đầu và kết thúc PiP — trong các callback này, các phần tử UI cần được ẩn và khôi phục, vì giao diện ứng dụng không hiển thị trong chế độ PiP. Khi chuyển sang PiP, nên dừng tất cả hoạt ảnh, ẩn các điều khiển trình phát và giải phóng bộ nhớ không dùng để ngăn hệ thống buộc dỡ ứng dụng.

PiP trên Android với 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) {
            // Ẩn UI, chỉ tập trung vào phương tiện
            binding.controlsGroup.visibility = View.GONE
        } else {
            // Khôi phục UI
            binding.controlsGroup.visibility = View.VISIBLE
        }
    }
}

Ví dụ Kotlin sử dụng PictureInPictureParams.Builder để cấu hình PiP. Phương thức setAspectRatio đặt tỷ lệ khung hình cửa sổ PiP (16:9 cho video điển hình). setAutoEnterEnabled(true) kích hoạt chuyển tự động sang PiP khi thu nhỏ ứng dụng. Callback onPictureInPictureModeChanged được gọi khi vào và ra PiP — ở đây cần ẩn hoặc hiển thị các phần tử UI. Cho video trên SurfaceView, cần xử lý cấu hình bổ sung bằng cách thêm android:configChanges="screenSize|smallestScreenSize" vào tệp kê khai để ngăn Activity tạo lại khi chuyển sang chế độ PiP.

Khi nào sử dụng Picture-in-Picture

PiP là công cụ mạnh mẽ để cải thiện trải nghiệm người dùng trong các ứng dụng nơi nội dung vẫn phù hợp ngay cả khi chuyển sang tác vụ khác. Tuy nhiên, việc triển khai PiP cần có căn cứ và không làm người dùng mất tập trung.

Các tình huống tối ưu

Gọi video và hội nghị là một trong những tình huống chính của PiP. Trong Zoom, FaceTime, Google Meet, PiP cho phép người dùng nhìn thấy người đối thoại khi làm việc trong ứng dụng khác: đọc ghi chú, xem bài thuyết trình hoặc kiểm tra email. PiP cho gọi video yêu cầu hỗ trợ camera nền và cấu hình phiên âm thanh phù hợp để tiếp tục thu âm trong nền. Trên iOS, điều này được thực hiện bằng AVSampleBufferDisplayLayer thay vì AVPlayerLayer, vì gọi video không sử dụng AVPlayer.

Các dịch vụ phát trực tuyến (YouTube, Netflix, Twitch) tích cực sử dụng PiP để tiếp tục xem trong khi tìm kiếm nội dung mới. YouTube Premium cung cấp PiP như tính năng trả phí, Netflix cũng giới hạn PiP cho một số gói đăng ký do hạn chế cấp phép nội dung. Để triển khai PiP trong ứng dụng phát trực tuyến, cần tích hợp với hệ thống DRM (FairPlay, Widevine) hỗ trợ đường dẫn an toàn trong chế độ PiP.

Khi nào không cần PiP

PiP không phù hợp cho ứng dụng có nội dung video tương tác yêu cầu tương tác người dùng: nền tảng giáo dục có bài kiểm tra trong trình phát, luồng trò chơi có trò chuyện, ứng dụng mua sắm có liên kết sản phẩm trong video. Trong những trường hợp này, cửa sổ PiP quá nhỏ để hiển thị thông tin bổ sung và các phần tử tương tác không được hỗ trợ trong PiP. Nên sử dụng PiP chỉ cho xem thụ động khi không cần tương tác với nội dung.

Cho ứng dụng nhạc và podcast, PiP là thừa — âm thanh nền không cần cửa sổ hình ảnh là đủ. PiP tiêu tốn tài nguyên GPU bổ sung để kết xuất video trong cửa sổ nổi, làm giảm thời lượng pin. Nếu nội dung dựa trên âm thanh (nhạc, podcast, sách nói) — hãy sử dụng phát nền không PiP. Nếu là hình ảnh — hãy triển khai PiP để cải thiện trải nghiệm người dùng.