Picture-in-picture

Picture-in-picture state and actions for the player store

Controls picture-in-picture mode.

State

State	Type	Description
`pip`	`boolean`	Whether picture-in-picture is active
`pipAvailability`	`MediaFeatureAvailability`	Whether PiP is supported

Actions

Action	Description
`requestPictureInPicture()`	Enter picture-in-picture (returns a `Promise`)
`exitPictureInPicture()`	Exit picture-in-picture (returns a `Promise`)

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>
  );
}

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);
}

API Reference

Parameters

Parameter	Type	Default
`state*`	`object`	`—`

Return Value

MediaPictureInPictureState | undefined