Picture in Picture

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

AndroidiOS

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

Breaking change: React Native에서는 명시적 PIP 버튼(PipBtn) 컴포넌트가 폐지되었습니다. 대신 playerRef.current.pip() ref API를 호출하거나 options.allowsPictureInPicture lifecycle을 사용해 자동 진입하세요.

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 설정
        }}
        ...
    />
)

iOS 네이티브 설정

백그라운드 재생 및 PIP 를 위해 Info.plist 에 Background Modes(audio) 를 추가합니다. Xcode 의 Signing & Capabilities → Background Modes 에서Audio, AirPlay, and Picture in Picture 를 체크하거나 아래를 직접 추가합니다.

<!-- ios/<App>/Info.plist -->
<key>UIBackgroundModes</key>
<array>
  <string>audio</string>
  <string>fetch</string>
</array>

Android 네이티브 설정

PIP 를 지원하려면 메인 액티비티에 PiP 속성을 추가하고, 백그라운드 재생을 위한 포그라운드 서비스 권한을 선언합니다.

<!-- android/app/src/main/AndroidManifest.xml -->
<manifest ...>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

    <application ...>
        <activity
            android:name=".MainActivity"
            android:supportsPictureInPicture="true"
            android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation|keyboard|keyboardHidden|uiMode"
            ... />
    </application>
</manifest>

네이티브 설정 변경 후에는 pod install(iOS) 및 앱 재빌드가 필요합니다.@sgrsoft/react-native-video 의 PiP 관련 빌드 옵션도 함께 확인하세요.