playerContext

Import

import { playerContext } from "@videojs/html";

playerContext is a Web Components context token that carries the player store through the DOM tree. Player elements publish the store to this context, and consumers such as PlayerController read from it. Video.js contexts follow the Web Components Community Group Context Protocol, so providers and consumers communicate with standard context request events instead of requiring a specific element hierarchy.

playerContext carries player state and actions. ContainerElement registers the player’s visual container through containerContext, not playerContext; its internal PlayerController separately consumes playerContext for controls state.

Pass it as the second argument to PlayerController:

import { PlayerController, UIElement, playerContext, selectPlayback } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

class PlayButton extends UIElement {
  #playback = new PlayerController(this, playerContext, selectPlayback);

  render() {
    const playback = this.#playback.value;
    // Use playback state to render
  }
}

Import directly or destructure from createPlayer

createPlayer returns a playerContext property that is the same playerContext instance exported from the package. Both approaches reference the same object:

// Direct import
import { playerContext } from '@videojs/html';

// Destructured — identical object
const { playerContext: configuredContext } = createPlayer({ features: videoFeatures });
configuredContext === playerContext; // true

Use the direct import when building reusable elements that don’t depend on a specific createPlayer call.

When you need this

Most custom-player elements should use the configured PlayerController returned by createPlayer, which is already bound to the context. Import playerContext directly when using the package-level controller or another lower-level context consumer.