Available in Classic and VPC
This page explains how to configure Picture in Picture for the player.
Supported platforms: Android iOS
This feature only works on physical devices. (Simulator not supported)
In React Native, the explicit PIP button (PipBtn) component has been deprecated. Instead, call the playerRef.current.pip() ref API or use the options.allowsPictureInPicture lifecycle to enter PIP mode automatically.
allowsPictureInPicture
To implement PIP, you must enable the autoPause option.
const playerRef = useRef(null);
return (
<VpePlayer
ref={playerRef}
options={{
playlist: [
{ file: 'https://CDNdomain/example_video_01.mp4' },
],
autoPause: false, // false: Configure background playback
allowsPictureInPicture: true, // PIP settings
}}
/>
);
app.json configuration
You need to add the option to support Picture-in-Picture and 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"
]
}
}
}
Depending on the situation, either prebuild or pod install is required.