Documentation Index

Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt

Use this file to discover all available pages before exploring further.

Picture in Picture

Prev Next

Available in Classic and VPC

This page explains how to configure Picture in Picture for the player.

Supported platforms: Android iOS

Note

This feature only works on physical devices. (Simulator not supported)

Caution

In React Native, the explicit PIP button (PipBtn) component has been deprecated. Instead, call the playerRef.current.pip() ref API or use the options.allowsPictureInPicture lifecycle to enter PIP mode automatically.

allowsPictureInPicture

To implement PIP, you must enable the autoPause option.

const playerRef = useRef(null);

return (
  <VpePlayer
    ref={playerRef}
    options={{
      playlist: [
        { file: 'https://CDNdomain/example_video_01.mp4' },
      ],
      autoPause: false,               // false: Configure background playback
      allowsPictureInPicture: true,   // PIP settings
    }}
  />
);

app.json configuration

You need to add the option to support Picture-in-Picture and background play.

{
  "expo": {
    "plugins": [
      [
        "@sgrsoft/react-native-video",
        {
          "enableAndroidPictureInPicture": true
        }
      ]
    ],
    "ios": {
      "infoPlist": {
        "UIBackgroundModes": ["audio", "fetch"]
      }
    },
    "android": {
      "edgeToEdgeEnabled": true,
      "supportsPictureInPicture": true,
      "permissions": [
        "android.permission.FOREGROUND_SERVICE"
      ]
    }
  }
}
Note

Depending on the situation, either prebuild or pod install is required.