FrameworkStyle

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>

Selector

Pass selectPiP to usePlayer 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>
  );
}