Picture-in-Picture support in Bitmovin iOS player SDK

[lucky.goyal]

Hello Community,

Picture-in-Picture or PiP is a popular feature for video applications. This feature can be used in multiple use cases and scenarios. It allows the video playback continue in a smaller screen while allowing user to use another application or other pages/views in same application.

• Video application is put to background. Real world scenario could be

  • Incoming call when watching a video content.
  • User putting application in background to check something on device’s home screen or another application(non-video).

• Within same video application, user navigates to a different page.

  • User browsing other content in the app.
  • User checking game analysis, score cards etc. while watching a game.

Bitmovin player SDK on iOS supports PiP functionality out of the box. It is advised to use Bitmovin player iOS version 3.34.0 or later to get all available PiP functionality. This is supported for all following UI configurations.

• Bitmovin default UI (HTML/CSS based) : StyleConfig.isUiEnabled=true AND StyleConfig.userInterfaceType=.bitmovin

• iOS System UI : StyleConfig.isUiEnabled=true AND StyleConfig.userInterfaceType=.system

• Bitmovin UI for Subtitles only : StyleConfig.isUiEnabled=true AND StyleConfig.userInterfaceType=.subtitle

• No Bitmovin UI but application implementing PlayerView : StyleConfig.isUiEnabled=false

Bitmovin iOS SDK provides following configuration object, APIs and events to configure and use PiP functionality.

PiP Configuration

• Use PlayerViewConfig.pictureInPictureConfig to add PiP configuration

• Set PlayerViewConfig.pictureInPictureConfig.isEnable as true to enable PiP support. The older configuration PlaybackConfig.isPictureInPictureEnabled is deprecated.

• Use PlayerViewConfig.pictureInPictureConfig.restoreUserInterfaceHandler to get a callback to allow application to restore custom views.

• Use PlayerViewConfig.pictureInPictureConfig.showSkipControls to enable/disable skip forward and back controls inside the PiP window.

• Use PlayerViewConfig.pictureInPictureConfig.shouldEnterOnBackground to control if playback should enter PiP mode or not when app is backgrounded.

• Set the PlayerViewConfig.pictureInPictureConfig object to PlayerView

Sample code snippet demonstrating PiP config

let config = PlayerViewConfig()
        config.pictureInPictureConfig.isEnabled = true
        config.pictureInPictureConfig.restoreUserInterfaceHandler = {restored in
            // restore custom views
            restored(true)
        }

#if os(iOS)
        if #available(iOS 14.0, *) {
            config.pictureInPictureConfig.showSkipControls = false
        }

        if #available(iOS 14.2, *) {
            config.pictureInPictureConfig.shouldEnterOnBackground = true
        }
#endif
       
        let playerView = PlayerView(player: player, frame: .zero, playerViewConfig: config)

PiP APIs

• Use isPictureInPictureAvailable API to check if PiP is available on the device. PiP feature is supported from iOS 14.0 onwards only.

• Use enterPictureInPicture and exitPictureInPicture APIs to programatically enter or exit PiP mode based on user action.

• Use pictureInPicture.showSkipControls API to enable/disable skip controls(forward and backward skip buttons) shown in PiP window dynamically during playback.

Events

• UserInterfaceListener.onPictureInPictureEnter event when playback is about to enter PiP mode.

• UserInterfaceListener.onPictureInPictureEntered event when app has already entered PiP mode.

• UserInterfaceListener.onPictureInPictureExit event when app is about to exit PiP mode.

• UserInterfaceListener.onPictureInPictureExited event when app has exited PiP mode.

Please let us know if there are any questions/doubts about PiP functionality.