selectPiP

Select the picture-in-picture state slice from the player store

Import

import { selectPiP } from '@videojs/core/dom';

Usage

Pass selectPiP to usePlayer (React) or PlayerController (HTML) to subscribe to picture-in-picture state. Returns undefined if the PiP feature is not configured.

The returned state includes whether PiP is active and its availability on the current platform.

import { usePlayer } from '@videojs/react';
import { selectPiP } from '@videojs/core/dom';

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, features, MediaElement } from '@videojs/html';
import { selectPiP } from '@videojs/core/dom';

const { PlayerController, context } = createPlayer({ features: features.video });

class PiPButton extends MediaElement {
  #pip = new PlayerController(this, context, selectPiP);
}

API Reference

Parameters

Parameter	Type	Default
`state*`	`{}`	`—`

Return Value

MediaPictureInPictureState | undefined