<img src="https://img.shields.io/badge/%20-ENTERPRISE-B10031" style="float:left"/><br />

With Picture in Picture mode, users can watch video while using other apps. For example, one of your users can continue watching one of your videos while writing an email.

<br /> <hr />

## Requirement

  • iOS 14+ (iPhone)

  • iOS 13+ (iPad)

<br /> <hr />

## Implementation

<br />

### JWPlayerViewController

When using a `JWPlayerViewController`, the button to toggle Picture in Picture mode is automatically added to the top-right of the player view if the device supports the feature.

<br />

### JWPlayerView

Picture in Picture functionality can also be accessed through `JWPlayerView` using the `pictureInPictureController` property. If Picture in Picture mode is not supported by the device, the property will return nil. Otherwise, the property will return an `AVPictureInPictureController` object which can be used to start and stop Picture in Picture mode.

<br />

  1. Get `JWPlayerView`’s `AVPictureInPictureController` instance using the `pictureInPictureController` property.

    

<br />

  1. Create an observer to monitor if Picture in Picture is enabled. Sometimes Picture in Picture mode will be temporarily disabled even if the device supports Picture in Picture.

    

<br />

  1. Add a toggle to start and stop Picture in Picture mode.

    

<br />



See <a href="https://developer.apple.com/documentation/avkit/avpictureinpicturecontroller" target="_blank">Apple's AVPictureInPictureController documentation</a> for more information.

<br /> <hr />

## FAQ

<details><summary><strong>How can automatic Picture in Picture be prevented?</strong></summary>

<br />

In iOS 14.2 and above, Picture in Picture mode starts automatically when the app is placed in the background.

To disable this behavior, set `canStartPictureInPictureAutomaticallyFromInline = false` through `JWPlayerView`'s `pictureInPictureController` property.



<br />

</details>

<br />

<!-- Removes the automatic page-to-page navigation at the bottom of the page -->

<style> .rm-Pagination { display: none; } </style>