Picture-in-Picture ในแอปพลิเคชันมือถือ — คืออะไร ทำงานอย่างไร และใช้ที่ไหน

Picture-in-Picture คืออะไร?

Picture-in-Picture (PiP) คือโหมดแสดงวิดีโอในหน้าต่างลอยขนาดเล็กที่อยู่เหนือหน้าต่างและแอปพลิเคชันอื่นทั้งหมด ผู้ใช้สามารถย้ายหน้าต่าง PiP ไปรอบ ๆ หน้าจอ เปลี่ยนขนาด (ในบางแพลตฟอร์ม) และดูเนื้อหาต่อไปขณะทำงานในแอปพลิเคชันอื่น

แนวคิดของ PiP มาจากโทรทัศน์: ในยุค 1990 โทรทัศน์สามารถแสดงช่องที่สองที่มุมหน้าจอได้ บนอุปกรณ์มือถือ PiP ปรากฏครั้งแรกบน iPad ใน iOS 9 (2015) สำหรับวิดีโอใน Safari ในขณะที่ PiP ระดับระบบเต็มรูปแบบสำหรับแอปพร้อมใช้งานใน iOS 14 (2020) การรองรับ PiP บน Android มาก่อน — ในเวอร์ชัน 8.0 Oreo (2017) แต่เฉพาะวิดีโอ และตั้งแต่ Android 12 สำหรับเนื้อหาทุกประเภท

PiP แตกต่างจากการเล่นพื้นหลังตรงที่วิดีโอยังคงแสดงบนหน้าจอ ไม่ใช่แค่เล่นในสตรีมเสียง การเล่นเสียงพื้นหลัง พร้อมใช้งานบนทั้งสองแพลตฟอร์ม แต่ PiP ให้ผู้ใช้ควบคุมเนื้อหาแบบภาพ: สามารถดูเฟรม หยุดชั่วคราว กรอกลับ หรือปิดหน้าต่างได้ ซึ่งสำคัญโดยเฉพาะสำหรับวิดีโอสอน สตรีม และการโทรวิดีโอที่เนื้อหาภาพสำคัญพอ ๆ กับเสียง

PiP ทำงานอย่างไร?

ในเชิงสถาปัตยกรรม PiP ถูกใช้งานผ่านตัวจัดการหน้าต่างระบบที่สร้างหน้าต่างแยกต่างหากที่มีลำดับความสำคัญการแสดงผลต่ำกว่า แอปมอบหมายเอาต์พุตวิดีโอให้กับบริการระบบที่เรนเดอร์วิดีโอต่อไปแม้หลังจากแอปย้ายไปพื้นหลังหรือถูกย่อ

วงจรชีวิตเซสชัน PiP

กระบวนการเริ่มต้นเมื่อผู้ใช้ย่อแอปที่มีวิดีโอที่กำลังเล่นอยู่หรือกดปุ่ม PiP (บน iOS) หรือระบบย้าย Activity ไปยังโหมด PiP โดยอัตโนมัติ (บน Android) ตัวจัดการหน้าต่างระบบ จับสตรีมวิดีโอและสร้างหน้าต่างลอยที่มีสัดส่วนคงที่ ขนาดหน้าต่างขึ้นอยู่กับอัตราส่วนภาพของวิดีโอต้นฉบับและข้อจำกัดของแพลตฟอร์ม: บน iOS หน้าต่าง PiP ใช้พื้นที่ประมาณ 1/6–1/4 ของความกว้างหน้าจอ บน Android ไม่น้อยกว่า 108 dp ความกว้างและ 240 dp ความสูงสำหรับอุปกรณ์มือถือ

เมื่อหน้าต่าง PiP ทำงานอยู่ แอปสามารถอยู่ในหนึ่งในสามสถานะ: พื้นหลัง (ย่อ) สถานะทำงาน (ผู้ใช้กลับมา�ยังแอป) หรือสถานะรอ (ระบบหยุด PiP ชั่วคราวเนื่องจากทรัพยากรไม่เพียงพอ) เมื่อเปลี่ยนไป PiP แอปควรหยุดการดำเนินการ UI ที่ไม่จำเป็น (แอนิเมชัน การเรนเดอร์อินเทอร์เฟซ) และปล่อยหน่วยความจำ เนื่องจากทรัพยากรระบบถูกจัดสรรอย่างเข้มงวดมากขึ้นในโหมดมัลติทาสก์ iOS ส่งการแจ้งเตือน AVPictureInPictureControllerWillStartNotification ไปยังแอปโดยอัตโนมัติ ในขณะที่ Android ส่ง callback onPictureInPictureModeChanged

ข้อจำกัดของโหมด PiP

หน้าต่าง PiP มีข้อจำกัดสำคัญ: ไม่สามารถแสดงองค์ประกอบควบคุม UI มาตรฐาน (ปุ่มหยุดชั่วคราว แถบความคืบหน้า) — ได้เฉพาะการซ้อนทับระบบขั้นต่ำที่มีการควบคุมพื้นฐาน: เล่น/หยุด ปิด ขยายเป็นเต็มหน้าจอ ระบบ UI PiP บน iOS มีปุ่มหยุดและปุ่มปิด ในขณะที่ Android มีองค์ประกอบเดียวกันบวกปุ่มตั้งค่าเพิ่มเติม การโต้ตอบกับเนื้อหาภายใน PiP (กรอกลับ เลือกคำบรรยาย) ไม่สามารถทำได้ — สำหรับสิ่งนั้นต้องขยายแอปเป็นเต็มหน้าจอ

PiP บน iOS: การใช้งานและข้อจำกัด

บน iOS PiP ถูกใช้งานผ่านเฟรมเวิร์ก AVKit และคลาส AVPictureInPictureController API นี้พร้อมใช้งานบน iOS 14+ สำหรับ iPhone และ iPad แต่มีข้อกำหนดแตกต่างกัน: บน iPad PiP ทำงานผ่าน AVPlayerLayer บน iPhone ผ่าน AVPlayerViewController เท่านั้น

ข้อกำหนดสำหรับ PiP บน iOS

เพื่อให้ PiP ทำงานบน iOS ต้องปฏิบัติตามเงื่อนไขหลายประการ: แอปต้องใช้ AVPlayer สำหรับการเล่นวิดีโอ เซสชันเสียงต้องตั้งค่าเป็นหมวดหมู่ .playback หรือ .playAndRecord และแอปต้องมีสิทธิ์สำหรับเสียงพื้นหลัง (UIBackgroundModes = audio) หากไม่มีการตั้งค่าเหล่านี้ PiP จะไม่เริ่ม — ระบบจะปฏิเสธคำขอเซสชัน PiP เนื่องจากไม่สามารถรับประกันการเล่นที่ถูกต้องหลังจากย้ายไปพื้นหลัง

บน iOS หน้าต่าง PiP จะแสดงโดยอัตโนมัติเมื่อย่อแอปหากวิดีโอกำลังเล่นอยู่และผู้ใช้ไม่ได้ปิดคุณลักษณะนี้ในการตั้งค่า ผู้ใช้ยังสามารถย่อวิดีโอไปยัง PiP ด้วยตนเองผ่านปุ่มใน AVPlayerViewController ขนาดหน้าต่าง PiP บน iOS คงที่และกำหนดโดยระบบ — นักพัฒนาไม่สามารถเปลี่ยนแปลงได้ อัตราส่วนภาพของหน้าต่าง PiP ตรงกับอัตราส่วนของวิดีโอต้นฉบับ แต่ขนาดสูงสุดจำกัดที่ 1/4 ของความกว้างหน้าจอบน iPhone และ 1/3 บน iPad

ข้อจำกัด PiP บน iOS

ข้อจำกัดหลักของ PiP บน iOS: ไม่สามารถมี UI ที่กำหนดเองในหน้าต่าง PiP สตรีม PiP เพียงครั้งละหนึ่งสตรีม และข้อกำหนดของ AVPlayer ที่ทำงานอยู่สำหรับการทำงานของ PiP หลาย PiP — การเล่นหน้าต่าง PiP หลายหน้าต่างพร้อมกัน — ไม่รองรับบน iOS เมื่อพยายามเริ่ม PiP ที่สอง หน้าต่างแรกจะปิดโดยอัตโนมัติ นี่เป็นข้อจำกัดของฮาร์ดแวร์: โปรเซสเซอร์วิดีโอไม่สามารถให้บริการสองช่องสัญญาณ PiP อิสระพร้อมกันได้เนื่องจากข้อจำกัดของ DMA และหน่วยความจำวิดีโอ

ข้อจำกัดสำคัญอีกประการคือระยะเวลาการเล่นพื้นหลัง หากผู้ใช้ไม่โต้ตอบกับหน้าต่าง PiP ระบบอาจหยุดการเล่นชั่วคราวหลังจากระยะเวลาหนึ่งเพื่อประหยัดพลังงาน การหยุด PiP อัตโนมัติ บน iOS เกิดขึ้นหลังจากไม่มีการใช้งาน 10–15 นาทีหากแอปไม่ได้ใช้กลไก keep-alive ผ่านงานพื้นหลัง สำหรับการโทรวิดีโอและสตรีม แนะนำให้ใช้ PushKit และใบรับรอง VoIP ซึ่งหลีกเลี่ยงข้อจำกัดนี้

PiP บน Android: การใช้งานและข้อจำกัด

บน Android PiP ถูกใช้งานเป็นโหมด Activity ในตัวที่เปิดใช้งานผ่านเมธอด enterPictureInPictureMode ตั้งแต่ Android 8.0 (API 26) Activity ใด ๆ สามารถเข้าสู่โหมด PiP และตั้งแต่ Android 12 (API 31) มีการรองรับ PiP สำหรับ SurfaceView และ TextureView โดยไม่ต้องใช้ MediaCodec

การกำหนดค่าแมนิเฟสต์

เพื่อรองรับ PiP ในแมนิเฟสต์ Android ต้องระบุแอตทริบิวต์ android:supportsPictureInPicture สำหรับ Activity ในส่วน หากไม่มีแอตทริบิวต์นี้ ระบบจะไม่อนุญาตให้เปลี่ยนไป PiP นอกจากนี้ แนะนำให้ระบุ android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation" เพื่อให้ Activity ไม่ถูกสร้างใหม่เมื่อขนาดหน้าต่างเปลี่ยนระหว่างการเปลี่ยนไป PiP บิลด์ต้องมี targetSdkVersion >= 26 (Android 8.0) สำหรับการทำงาน PiP พื้นฐาน

ใน Android หน้าต่าง PiP โดยค่าเริ่มต้นไม่มีองค์ประกอบควบคุม นักพัฒนาสามารถเพิ่มการดำเนินการที่กำหนดเองผ่าน RemoteAction ในเมธอด setPictureInPictureParams มีสูงสุด 3 การดำเนินการ (ตัวอย่าง: หยุด/เล่น กรอกลับ/ไปข้างหน้า ปิด) แต่ละการดำเนินการปรากฏในระบบซ้อนทับ PiP เป็นไอคอน แตกต่างจาก iOS ที่องค์ประกอบ UI ทั้งหมดคงที่อย่างเคร่งครัด Android ให้ความยืดหยุ่นมากกว่าสำหรับการควบคุมพื้นฐาน

การปรับตัวสำหรับเวอร์ชันต่าง ๆ

PiP บน Android มีความสามารถแตกต่างกันตามเวอร์ชันระบบปฏิบัติการ บน Android 8.0–8.1 PiP พร้อมใช้งานเฉพาะวิดีโอที่เล่นผ่าน MediaPlayer หรือ MediaCodec กับ SurfaceView ตั้งแต่ Android 9 สามารถใช้ PictureInPictureArgs.Builder เพื่อกำหนดค่าอัตราส่วนภาพของหน้าต่าง PiP Android 12 เพิ่มการรองรับ PiP สำหรับ SurfaceView และ TextureView ที่กำหนดเอง พร้อมทั้งการเปลี่ยนระหว่างโหมดเต็มหน้าจอและ PiP ที่ดีขึ้น Android 13+ อนุญาตให้แสดงหน้าต่าง PiP แม้หน้าจอถูกล็อก หากแอปมีสิทธิ์ที่เหมาะสม

ความแตกต่างหลักของ PiP บน Android จาก iOS คือความสามารถหลาย PiP บน Android 12+ ระบบสามารถแสดงหน้าต่าง PiP หลายหน้าต่างพร้อมกันได้หากแอปรองรับและประสิทธิภาพของอุปกรณ์อนุญาต อย่างไรก็ตาม ในทางปฏิบัติ หลาย PiP ถูกจำกัดโดยความสามารถของ SoC: อุปกรณ์ส่วนใหญ่รองรับหน้าต่าง PiP เพียงหน้าต่างเดียวเนื่องจากข้อจำกัดฮาร์ดแวร์ของตัวถอดรหัส เนื่องจากแต่ละหน้าต่าง PiP ต้องการสตรีมวิดีโอของตัวเองและเซสชันการถอดรหัสแยกต่างหาก

ตัวอย่างโค้ด PiP

มาดูการใช้งาน PiP ในทางปฏิบัติบนทั้งสองแพลตฟอร์มมือถือ โดยคำนึงถึงการเปลี่ยนแปลง API ล่าสุด

PiP บน iOS ด้วย 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
    ) {
        // ซ่อนองค์ประกอบ UI ปล่อยหน่วยความจำ
    }
    
    func pictureInPictureControllerDidStop(
        _ pictureInPictureController: AVPictureInPictureController
    ) {
        // กู้คืน UI ดำเนินการเรนเดอร์ต่อ
    }
}

ในตัวอย่างนี้ AVPictureInPictureController ถูกเริ่มต้นด้วย playerLayer หลังจากตรวจสอบ isPictureInPictureSupported (PiP ไม่รองรับบน iPhone SE รุ่นที่ 1 และ iPad บางรุ่นที่ไม่มีหน่วยความจำเพียงพอ) ตัวแทนแจ้งให้แอปทราบเกี่ยวกับการเริ่มและสิ้นสุด PiP — ใน callback เหล่านี้ควรซ่อนและกู้คืนองค์ประกอบ UI เนื่องจากอินเทอร์เฟซแอปไม่ปรากฏในโหมด PiP เมื่อเปลี่ยนไป PiP แนะนำให้หยุดแอนิเมชันทั้งหมด ซ่อนตัวควบคุมผู้เล่น และปล่อยหน่วยความจำที่ไม่ได้ใช้เพื่อป้องกันการโหลดแอปออกโดยระบบ

PiP บน Android ด้วย 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) {
            // ซ่อน UI โฟกัสเฉพาะสื่อ
            binding.controlsGroup.visibility = View.GONE
        } else {
            // กู้คืน UI
            binding.controlsGroup.visibility = View.VISIBLE
        }
    }
}

ตัวอย่าง Kotlin ใช้ PictureInPictureParams.Builder เพื่อกำหนดค่า PiP เมธอด setAspectRatio กำหนดอัตราส่วนภาพของหน้าต่าง PiP (16:9 สำหรับวิดีโอทั่วไป) setAutoEnterEnabled(true) เปิดใช้งานการเปลี่ยนไป PiP อัตโนมัติเมื่อย่อแอป callback onPictureInPictureModeChanged ถูกเรียกเมื่อเข้าและออกจาก PiP — ที่นี่ควรซ่อนหรือแสดงองค์ประกอบ UI สำหรับวิดีโอบน SurfaceView จำเป็นต้องจัดการการกำหนดค่าเพิ่มเติมโดยเพิ่ม android:configChanges="screenSize|smallestScreenSize" ลงในแมนิเฟสต์เพื่อป้องกันการสร้าง Activity ใหม่ระหว่างการเปลี่ยนไปโหมด PiP

เมื่อใดควรใช้ Picture-in-Picture

PiP เป็นเครื่องมือที่มีประสิทธิภาพในการปรับปรุงประสบการณ์ผู้ใช้ในแอปที่เนื้อหายังคงเกี่ยวข้องแม้เมื่อสลับไปทำงานอื่น อย่างไรก็ตาม การใช้งาน PiP ควรมีเหตุผลและไม่ทำให้ผู้ใช้เสียสมาธิ

สถานการณ์ที่เหมาะสม

การโทรวิดีโอและการประชุมเป็นหนึ่งในสถานการณ์หลักของ PiP ใน Zoom, FaceTime, Google Meet PiP ช่วยให้ผู้ใช้เห็นคู่สนทนาขณะทำงานในแอปอื่น: อ่านบันทึก ดูการนำเสนอ หรือตรวจสอบอีเมล PiP สำหรับการโทรวิดีโอ ต้องการการรองรับกล้องพื้นหลังและการกำหนดค่าเซสชันเสียงที่ถูกต้องเพื่อจับเสียงในพื้นหลังต่อไป บน iOS ทำได้โดยใช้ AVSampleBufferDisplayLayer แทน AVPlayerLayer เนื่องจากการโทรวิดีโอไม่ใช้ AVPlayer

บริการสตรีมมิ่ง (YouTube, Netflix, Twitch) ใช้ PiP อย่างแข็งขันเพื่อดูต่อขณะค้นหาเนื้อหาใหม่ YouTube Premium เสนอ PiP เป็นคุณลักษณะแบบชำระเงิน Netflix ก็จำกัด PiP สำหรับแผนการสมัครสมาชิกบางแผนเนื่องจากข้อจำกัดการอนุญาตสิทธิ์เนื้อหา การใช้งาน PiP ในแอปสตรีมมิ่งต้องการการรวมเข้ากับระบบ DRM (FairPlay, Widevine) ที่รองรับไปป์ไลน์ที่ปลอดภัยในโหมด PiP

เมื่อใดไม่จำเป็นต้องใช้ PiP

PiP ไม่เหมาะสำหรับแอปที่มีเนื้อหาวิดีโอแบบโต้ตอบที่ต้องการการโต้ตอบของผู้ใช้: แพลตฟอร์มการศึกษาที่มีแบบทดสอบภายในผู้เล่น สตรีมเกมที่มีแชท แอปช้อปปิ้งที่มีลิงก์ผลิตภัณฑ์ในวิดีโอ ในกรณีเหล่านี้ หน้าต่าง PiP เล็กเกินไปที่จะแสดงข้อมูลเพิ่มเติมและองค์ประกอบแบบโต้ตอบไม่รองรับภายใน PiP แนะนำให้ใช้ PiP สำหรับการดูแบบพาสซีฟเท่านั้นเมื่อไม่ต้องการการโต้ตอบกับเนื้อหา

สำหรับแอปเพลงและพอดคาสต์ PiP เกินความจำเป็น — เสียงพื้นหลังโดยไม่มีหน้าต่างภาพก็เพียงพอ PiP ใช้ทรัพยากร GPU เพิ่มเติมสำหรับการเรนเดอร์วิดีโอในหน้าต่างลอย ซึ่งลดอายุการใช้งานแบตเตอรี่ หากเนื้อหาเป็นเสียง (เพลง พอดคาสต์ หนังสือเสียง) — ใช้การเล่นพื้นหลังโดยไม่ใช้ PiP หากเป็นภาพ — ใช้งาน PiP เพื่อปรับปรุงประสบการณ์ผู้ใช้