Picture in Picture

이 페이지에서는 플레이어 Picture in Picture 설정 방법을 가이드하고 있습니다.

AndroidiOS

현재 기능은 실제 기기에서만 동작합니다. (시뮬레이터 X)

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 이 필요합니다.