---
title: "Picture in Picture"
slug: "vpe-picture-in-picture"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-picture-in-picture"
stale: true
---

> ## 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

Classic/VPC環境で利用できます。

このページでは、プレイヤー Picture in Pictureの設定方法について説明します。

              注意

              

現在の機能は実機のみで動作します。シミュレータでは動作しません。

              参考

              

Android、iOSで共通して適用されます。

## allowsPictureInPicture

PIPを実現するには autoPauseオプションは必須です。

```
const playerRef = useRef(null);
return (
  <VpePlayer
      ...
      ref={playerRef}
      options={{
            playlist: [ //再生ソース
                {
                    file: 'https://CDNドメイン/example_video_01.mp4'
                },
            ],
            autoPause: false, //false : Background再生設定
            allowsPictureInPicture: true, //PIP設定
          }}
      ...
  />

)
```

## app.json設定

PictureInPicture機能をサポートするために関連オプションを追加します。 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"
      ]
      ...
    },
  }
}
```

              注意

              

状況に応じて prebuildまたは pod installが必要です。