Picture-in-picture
Picture-in-picture state and actions for the player store
Controls picture-in-picture mode.
API Reference
State
| Property | Type | Details |
|---|---|---|
pip
|
boolean
|
|
|
||
pipAvailability
|
'available' | 'unavailable' | 'unsupported'
|
|
|
||
Actions
| Action | Type | Details |
|---|---|---|
requestPictureInPicture
|
() => Promise<void>
|
|
|
||
exitPictureInPicture
|
() => Promise<void>
|
|
|
||
togglePictureInPicture
|
() => Promise<void>
|
|
|
||
Selector
Pass selectPiP to usePlayer to subscribe to picture-in-picture state. Returns undefined if the PiP feature is not configured.
Pass selectPiP to PlayerController to subscribe to picture-in-picture 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.availability !== 'available') return null;
return (
<button onClick={pip.toggle}>
{pip.active ? '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);
}