Controls picture-in-picture mode. Required by PiPButton.
Import
import { pip, selectPiP } from '@videojs/react';
// or
import { pip, selectPiP } from '@videojs/html';
Usage
import { createPlayer, pip } from '@videojs/react';
const Player = createPlayer({
features: [pip],
});
import { createPlayer, pip } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [pip],
});
State
Whether the player is currently in picture-in-picture mode.
Whether picture-in-picture is supported in the current environment.Possible values:
'available' — Ready to use'unavailable' — Could work but not ready yet'unsupported' — Platform can never support PiP (e.g. iOS Safari)
Actions
requestPictureInPicture()
Enter picture-in-picture mode. Returns a promise that resolves when PiP is active.
Exit picture-in-picture mode. Returns a promise that resolves when PiP is exited.
Selector
Use selectPiP to subscribe to only the PiP slice of state. Returns undefined if the pip feature is not configured.
import { selectPiP, usePlayer } from '@videojs/react';
function PiPButton() {
const pip = usePlayer(selectPiP);
if (!pip || pip.pipAvailability !== 'available') return null;
return (
<button onClick={pip.pip ? pip.exitPictureInPicture : pip.requestPictureInPicture}>
{pip.pip ? 'Exit PiP' : 'Picture-in-Picture'}
</button>
);
}
import { createPlayer, MediaElement, selectPiP } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';
const { PlayerController, context } = createPlayer({ features: videoFeatures });
class PiPButton extends MediaElement {
readonly #pip = new PlayerController(this, context, selectPiP);
}
Picture-in-picture is not available on iOS Safari. Check pipAvailability before calling requestPictureInPicture().
