FrameworkStyle

PlayerMixin

Composed mixin combining ProviderMixin and ContainerMixin for a complete player element

PlayerMixin combines ProviderMixin and ContainerMixin into a single mixin. The resulting class both owns the player store and auto-attaches media elements, making it a complete player element. It is equivalent to ProviderMixin(ContainerMixin(Base)) — it creates the store on connect, observes the DOM for <video> or <audio> children, and publishes the store to descendant elements via context.

Choose your approach

Approach When to use
PlayerElement Simplest setup. Register and use directly — no custom class needed.
PlayerMixin(Base) Custom player element with additional lifecycle logic or methods.
ProviderMixin + ContainerMixin Provider and container are separate elements (e.g., store owner is a layout shell, media lives in a content region).

PlayerElement vs PlayerMixin

For the simplest setup, use the pre-composed PlayerElement from createPlayer: 

const { PlayerElement } = createPlayer({ features: features.video });
customElements.define('video-player', PlayerElement);

Use PlayerMixin when you need to add custom behavior: 

class MyPlayer extends PlayerMixin(MediaElement) {
  connectedCallback() {
    super.connectedCallback();
    this.store.subscribe(() => {
      // Custom logic on state changes
    });
  }
}

API Reference

Parameters

Parameter Type Default
context* PlayerContext<Store> —
factory* function —

Return Value

PlayerMixin<PlayerStore>

VideoJS