NoteThe hook automatically tracks global PiP events, so isActive will stay in sync even if the user exits PiP using the browser's native window controls
The usePictureInPicture hook allows developers to transition video content into a floating window that stays on top of other windows. It monitors browser support, tracks the active state of the PiP window, and provides safe enter and exit methods. It handles the native enterpictureinpicture and leavepictureinpicture events to ensure the React state stays synchronized even if the user closes the PiP window via browser UI.
| Name | Type | Description |
|---|---|---|
| videoRef | React.RefObject<HTMLVideoElement | null> | The ref that must be attached to the <video> element. |
| isActive | boolean | Reactive state indicating if the video is currently in PiP mode. |
| isSupported | boolean | Indicates if the current browser environment supports the PiP API. |
| enter | () => Promise<void> | Requests the browser to move the video into a PiP window. |
| exit | () => Promise<void> | Closes the PiP window and returns the video to the page. |