iOS Picture In Picture Button Appearing in the top left of the video player

DEVELOPING APPS NATIVELY PAYS OFF GREATLY

Enabling the Fancy iOS Picture In Picture Video Player on Xamarin

Apple has simplified PIP implementation in iOS 14

Picture In Picture (PIP) was introduced years ago in iOS 9, but it was only available for iPads. It was brought to iPhones recently in iOS 14, so I wanted to implement it in my app. The iOS 9 documents showed that several steps were involved to implement this, and I was having a hard time integrating that with Xamarin Forms. However, while I was experimenting I realized, Apple made changes to simplify PIP implementation greatly, so those steps are not needed anymore. This article assumes that you already followed Microsoft’s Xamarin Video Player tutorial, to implement a simple iOS video player in your app, and only goes over the steps to enable PIP.

Implementation

  1. Add the snippet below to your AppDelegate FinishedLaunching() above your return statement. Make sure that you use the right AVAudioSessionCategory because the PIP controller disappears depending on the category:
var audioSession = AVAudioSession.SharedInstance();
NSError nSError = new NSError();
audioSession.SetCategory(AVAudioSessionCategory.Playback);
audioSession.SetActive(true, AVAudioSessionSetActiveOptions.NotifyOthersOnDeactivation, out nSError);
Info.plist PIP Background mode selected

2. And then go to your Info.plist and in the application tab, Enable Background Modes and check the Picture in Picture mode, and that shall automatically add the required key to your Source tab.

Et puts voilà! After you implement these 2 short steps, just build your app onto your phone, play your video and then press the Home button. Your video will transform into the fancy PIP view! You can also test this using the sample GitHub repo I created.

Entering the PIP view automatically creates a screen with this message
Swiping the video to the right hides the video

Behavior

This section is for people curious about the behavior, but they would rather not clone and build the sample. There’s a few points to note about the behavior:

  1. If the video is playing in the app, you just need to press the home button and it will start. You do not need to tap on the PIP button.
  2. Once playing in the background, you can simply hide the video temporarily by swiping it to the right and it will show an arrow on the screen
  3. There’s only a few default places on the screen you can pin the video to keep playing from which you can’t change.
  4. You can also launch PIP within the app by tapping the PIP icon on the top left of the video controls that automatically is displayed by iOS.
  5. This works since we are using a non-customized AVPlayer for our video, so it may not work with other video libraries.
  6. Video calls with PIP use private API, only available for FaceTime.

--

--

--

Developers building things, on here to share knowledge. Featured blog for PlanetXamarin.com github.com/saamerm linkedin.com/in/saamer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How I fixed apple-app-site-association not updating

How to disable scrolling in NSTextView for macOS

The sane way to choose the architectural pattern for your iOS app: MVC/MVVM/VIPER?

Build a Server-Driven UI Using UI Components in SwiftUI

Top 20 iOS interview questions for beginner to Intermediate level

Getting Started with Core Data

Improving readability with typealias in Swift

Swift Dev SQLite LazyPack

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
The First Prototype

The First Prototype

Developers building things, on here to share knowledge. Featured blog for PlanetXamarin.com github.com/saamerm linkedin.com/in/saamer

More from Medium

App Tracking Transparency Permission in Xamarin.Forms for iOS

How to fix the “Failed to Codesign” Error With Warning: unable to build chain to self-signed root…

In this post, I’ll show you how to fix the codesign error with warning “Warning: unable to build chain to self-signed root for signer <Developer from certificate here (ID of certificate)” /directory/to/your/mobile.app: errSecInternalComponent. Just one of those rare errors you can get while busy on cross-platform mobile app development using the xamarin and xamarin.forms framework for your c# based mobile app project

Xamarin Forms: Client-Side caching

Shadow Effect| Xamarin.Forms | Xamarin Community Toolkit