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 PlayerController to subscribe to picture-in-picture state. Returns undefined if the PiP feature is not configured.

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