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

Classic/VPC 환경에서 이용 가능합니다.

플레이어 Picture in Picture 설정 방법을 설명합니다.

지원 플랫폼: Android iOS

참고

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

주의

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: 백그라운드 재생 설정
      allowsPictureInPicture: true,   // PIP 설정
    }}
  />
);

app.json 설정

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