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が必要になる場合があります。