ProviderMixin

ProviderMixin creates a class that owns the player store and the media attach lifecycle. It publishes the store to context so descendants can consume it, and calls store.attach() when both a media element and a container are available.

Store lifecycle

The store is created when the element is constructed. On connectedCallback, the mixin publishes three context values to its descendants:

• playerContext — the store, consumed by PlayerController and other controllers
• mediaContext — a registration callback for media elements that returns a release function
• containerContext — a registration callback for container elements that returns a release function

When a media element and a container both register, the provider calls store.attach({ media, container }). Each release function removes only the element that registered it, so disconnecting an older element cannot clear a newer registration. The provider also watches for plain <video> and <audio> elements as they are added, removed, or replaced.

On disconnectedCallback, the mixin detaches the current media target but keeps the store alive. An element moved in the DOM reconnects without losing state. The store is destroyed in destroyCallback.

When to split provider and container

Use ProviderMixin with the independently extensible ContainerElement when the store owner is a different element from the container:

import { ContainerElement, createPlayer, MediaElement } from '@videojs/html';

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

// Layout shell owns the store
class AppShell extends ProviderMixin(MediaElement) {}

// Content region is the fullscreen target and container reference
class VideoRegion extends ContainerElement {}