playerContext

playerContext is a Web Components context token that carries the player store through the DOM tree. Provider elements publish the store to this context, and consumer elements (via PlayerController or ContainerMixin ) read from it.

Pass it as the second argument to PlayerController:

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

class PlayButton extends MediaElement {
  #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 context property that is the same playerContext instance. Both approaches reference the same object:

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

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

Use the direct import when building reusable elements that don’t depend on a specific createPlayer call. Destructure from createPlayer when you want all player utilities from a single result.

When you need this

Most elements should use PlayerController (which accepts a context argument) rather than importing playerContext directly. Import it directly when you need to pass the context token to a lower-level API like ContainerMixin or ProviderMixin .