Skip to content

ReferenceFeatures

Picture-in-picture

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

Controls picture-in-picture mode.

Import

import { pipFeature } from '@videojs/html';

The liveVideoFeatures and videoFeatures feature bundles include this feature.

API Reference

State

PropertyTypeDetails
pipboolean
pipAvailability'available' | 'unavailable' | 'unsupported'

Actions

ActionTypeDetails
requestPictureInPicturefunction
exitPictureInPicturefunction
togglePictureInPicturefunction

Selector

Pass selectPiP to PlayerController to subscribe to picture-in-picture state. Returns undefined if the PiP feature is not configured.

import { createPlayer, UIElement, selectPiP } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController } = createPlayer({ features: videoFeatures });

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