Implementing Picture-in-Picture (PiP) in iOS Apps: A Comprehensive Guide

Posted on by

Welcome to my in-depth guide on implementing the Picture-in-Picture (PiP) feature in iOS apps. PiP is a user-friendly functionality that allows video content to continue playing in a small, floating window while users navigate different apps or screens on their devices. This guide is designed for iOS developers looking to enrich their apps with PiP capabilities, providing a seamless multitasking experience to their users.

let theAnswer = 42
var theQuestion = "What is the Answer?"
theQuestion = "How many roads must a man walk down?"
theQuestion = "What is six by nine?"

Understanding Picture-in-Picture (PiP)

PiP is supported natively on iPads running iOS 9 and later, and on iPhones starting from iOS 14. This feature is particularly useful for video streaming, conferencing apps, or any application that plays video content. Implementing PiP can significantly enhance user engagement by offering a flexible viewing experience.

Pre-requisites

  • Ensure your app targets iOS 14.0 or later.
  • Be familiar with AVKit and SwiftUI or UIKit, as they are essential in implementing PiP.

Step-by-Step Guide to Implement PiP

Step 1: Import AVKit

Start by importing the AVKit framework into your ViewController or the Swift file managing video content.

import AVKit

Step 2: Prepare the AVPlayerViewController

Create an instance of AVPlayerViewController and configure your video content with AVPlayer. This setup is crucial for managing video playback in iOS.

playerView = AVPlayer(url: url)

Step 3: Enable Picture-in-Picture

Ensure PiP is enabled for your AVPlayerViewController instance. By default, PiP should be enabled, but it’s good practice to explicitly set it.

playerViewController.allowsPictureInPicturePlayback = true

Step 4: Present the Player

Present the AVPlayerViewController on the screen. If using UIKit, you might present it modally or push it on a navigation stack. For SwiftUI, use a container view to integrate it.

self.present(playerViewController, animated: true) { self.playerViewController.player?.play() } 

Step 5: Observe PiP State Changes (Optional)

Implement the AVPictureInPictureControllerDelegate to observe and respond to PiP state changes, such as when entering or exiting PiP mode.

extension YourViewController: AVPictureInPictureControllerDelegate { 
func pictureInPictureControllerWillStartPictureInPicture(_ pictureInPictureController: AVPictureInPictureController) { 
// Code to execute when PiP is about to start 
}
 
func pictureInPictureControllerDidStopPictureInPicture(_ pictureInPictureController: AVPictureInPictureController) { 
// Code to execute when PiP did stop 
} 
}

Testing Your Implementation

Testing PiP functionality requires running your app on a real device since the iOS Simulator does not support PiP mode. Start playing a video in your app and tap the PiP button or use the Home gesture to trigger PiP mode. For unit testing,

import XCTest
@testable import PiPDemo

class PiPDemoTests: XCTestCase {

    func testVideoPlayerInitialization() {
        let manager = VideoPlayerManager()
        let testURL = URL(string: "https://www.example.com/path/to/video.mp4")!
        manager.setupPlayer(with: testURL)

        XCTAssertNotNil(manager.player, "Player should not be nil after initialization.")
        XCTAssertEqual(manager.player.currentItem?.asset, AVURLAsset(url: testURL), "Player's current item should be initialized with the test URL.")
    }

}

Important Considerations

  • Content Restrictions: Ensure your video content adheres to Apple’s guidelines, especially regarding copyrighted material.
  • User Experience: Design your app’s UI and UX to accommodate PiP mode gracefully, considering how users interact with the floating window.
  • Background Audio: If your app plays audio content along with video, manage audio sessions appropriately to ensure a smooth transition into and out of PiP mode.

Conclusion

Implementing PiP in iOS apps is a fantastic way to offer users a versatile and engaging multimedia experience. By following this guide, you’ll be equipped to integrate PiP functionality into your iOS apps, enhancing usability and user satisfaction. Happy coding!


Note: For illustrative purposes, this guide simplifies some implementations. Depending on your app’s architecture (e.g., SwiftUI vs. UIKit) and specific requirements, you might need to adjust the code samples provided.

Further Reading: Apple’s official documentation on AVKit is an excellent resource for developers looking to dive deeper into video playback and PiP functionalities.