---
title: playerContext
description: The default player context instance for consuming the player store in controllers
---

import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
import DocsLink from "@/components/docs/DocsLink.astro";

`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 <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> or <DocsLink slug="reference/container-mixin">`ContainerMixin`</DocsLink>) read from it.

Pass it as the second argument to `PlayerController`:

```ts title="play-button.ts"
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

<DocsLink slug="reference/html-create-player">`createPlayer`</DocsLink> returns a `context` property that is the same `playerContext` instance. Both approaches reference the same object:

```ts
// 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 <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> (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 <DocsLink slug="reference/container-mixin">`ContainerMixin`</DocsLink> or <DocsLink slug="reference/provider-mixin">`ProviderMixin`</DocsLink>.

<UtilReference util="playerContext" />
