usePIP

See: (Picture-in-Picture API).

Demo

INFO

The component uses usePIP hook to show a video and a button to enable PIP.

Loading demo…

Show source code

import { useRef, useState } from "react"
import video from '../../../../assets/mov_bbb.mp4';
import { usePIP } from "../../../..";

export const UsePIP = () => {
	const videoRef = useRef<HTMLVideoElement>(null);
	const [show, setShow] = useState(true);
	const { isSupported, openPIP } = usePIP({
		target: videoRef,
		onOpen: () => setShow(false),
		onClose: () => setShow(true)
	});

	return <div>
		<p>Supported: {isSupported ? 'Yes' : 'No'}</p>
		{
			show &&
			<>
				<video ref={videoRef} width="400" controls>
					<source src={video} type="video/mp4" />
					Your browser does not support HTML video.
				</video>
				<div>
					<button onClick={openPIP}>Open PIP</button>
				</div>
			</>
		}
	</div>
}

Types

UsePIPProps

Props for the usePIP.

Property	Type	Required	Description
target	RefObject<HTMLVideoElement> \| HTMLVideoElement	✓	The &lt;video&gt; element to enter Picture-in-Picture mode. Accepts a RefObject or a direct reference.
onOpen	(evt: Event) => void		Called when the PIP window is requested (before it opens).
onOpened	(pipWindow: PictureInPictureWindow) => void		Called when the PIP window has successfully opened.
onClose	(evt: PictureInPictureEvent) => void		Called when the PIP window is closed (video returns to its original position).
onError	(err: unknown) => void		Called if the PIP request or close operation fails.

UsePIPResult

Result object returned by usePIP.

Property	Type	Required	Description
isSupported	boolean	✓	true when the Picture-in-Picture API is supported by the current browser.
openPIP	() => Promise<void>	✓	Request Picture-in-Picture mode for the target video element.
closePIP	() => Promise<void>	✓	Exit Picture-in-Picture mode, returning the video to its original container.