How to enable out of app picture-in-picture on iOS and Android

Picture-in-picture

Meet Picture-in-picture (PiP), the feature that allows you to continue watching a video while interacting with others sites or applications. The PiP video floats on top of another window and can be moved around the screen. Depending on the available platform controls you can pause and play the floating video, and seek forward and backwards.

Our client Magycal was one of the first to implement the PiP feature, enabling their users to enjoy their videos while doing other stuff on their smartphone. Look how nice it is:

This feature is also supported by our THEOplayer on all platforms from Android, Android TV, iOS, iPADOS and Apple TV. So let's get started!

Android

Google initially announced the support of Picture-in-picture (PiP) starting Android 7.0/Nougat (API level 24), which was released in 2016, on Android TVs only. With the release of Android 8.0/Oreo (API level 26) the support was added to mobile devices as well. The PiP functionality leverages the multi-window APIs which allows users to run two apps side-by-side or one-above-the-other in split screen mode.

The straightforward requirements to implement PiP helped users of the THEOplayer to implement the feature without relying on our pre-integration for a long time. But with the release 2021.2.1 (Android 2.85.1) we added the support for PiP through our APIs, and it's available for both mobile and Android TV devices for Android 8.0 and later.

To make use of the PiP feature, our users have to simply add the PiP configuration as part of the player’s configuration when initializing it like this:

THEOplayerConfig playerConfig = new THEOplayerConfig.Builder().pipConfiguration(new PipConfiguration.Builder().build()).build();
THEOplayerView tpv = new THEOplayerView(context, playerConfig);

When the player is in PiP mode, you'll see the UI from Picture 1 with these controls:

• - Go to the PiP settings of the app.
• - Close the PiP window.
• - Go back to the previous presentation mode.
• - Play/pause the video.   

Picture 1: an android video player in PiP mode with the available controls

                        

During the development we aimed to keep supporting all our pre-integration such as Ads, Analytics and DRM for both inline playback and PiP. And we successfully achieved it! Now you can benefit from all the features we provide and enjoy a great experience on Android. More info can be found in our guide and feel free to contact us if you'd like to get started with picture-in-picture yourself.

iOS

Since the early versions of our iOS SDK we offered the Picture-in-Picture (aka PiP) functionality. To support this, we created our own frame that would hold the player and it would float on top of the application. The limitation of this approach was that it was only available "in-app", which meant that when the application went to the background, the PiP-window would do so too. On the positive side, this implementation provided the option to configure in which corner of your screen the PiP-window would initially appear.

As from THEOplayer v2.85.2, we added a new variant of PiP for newer iOS and tvOS devices. This uses the native PiP capabilities of the OS itself. This variant can put the player into PiP-mode outside of the application ("out-of-app"). So you can keep watching your video while navigating to another app. Note that this functionality only works for iOS 14 and above.

To configure the iOS SDK to have the PiP functionality you need to pass a PiPConfiguration object in the PlayerConfiguration, similar to Android. When you set the nativePictureInPicture parameter to 'true', it will enable the native "out-of-app" variant mentioned above, and it can be implemented as such:

let pip = PiPConfiguration(retainPresentationModeOnSourceChange: true, nativePictureInPicture: true)
let config = THEOplayerConfiguration(..., pip: pip, ...)
self.theoplayer = THEOplayer(configuration: config)

As for tvOS, the feature will be available as long as the tvOS version supports it, but only the new native PiP variant is available. Also there is no option to customize the UI, as we are only able to put the AVplayer into PiP-mode. This means that it uses the native controls, and only SSAI is supported. But we can assure DRM-protected content plays fine in PiP-mode.

These are the available controls in iOS, as shown in picture 2:

            
Picture 2: an IOS video player in PiP mode                                                 

And these are the available controls in tvOS, as illustrated in picture 3:

Picture 3: a tvOS video player in PiP mode

More info can be found in our documentation and feel free to contact us if you'd like to get started with PiP yourself.

Observe events

It’s also possible to listen for particular events when using PiP, these are for example if the PiP-mode was entered/exited or when the window has been moved. You can read all about this and how to hook-into or handle them, in our documentation.

Let's implement PiP together!