MediaAttachMixin

MediaAttachMixin creates a class that registers itself with the provider on connect. Apply it to custom media elements so they automatically wire to the store.

Built-in elements, like <hls-video>, <dash-video>, <simple-hls-video>, and <background-video>, all use this mixin internally.

import { MediaAttachMixin } from '@videojs/html';
import { MyCustomMedia } from './my-custom-media';

export class MyMedia extends MediaAttachMixin(MyCustomMedia) {
  // inherits context registration
}

customElements.define('my-media', MyMedia);

Who needs this

You only need MediaAttachMixin when your base class doesn’t already register as a media element with the provider. For example, elements that wrap a third-party player or use a canvas renderer.

For plain <video> and <audio> elements, the provider discovers them automatically via querySelector — no mixin needed.

Overriding the media target

By default, MediaAttachMixin registers this as the media element. Override getMediaTarget() if the actual media element is something other than the element itself — for example, an inner <video> in a shadow root:

import { MediaAttachMixin } from '@videojs/html';

export class BackgroundVideo extends MediaAttachMixin(HTMLElement) {
  getMediaTarget() {
    return this.shadowRoot?.querySelector('video') ?? null;
  }
}

Factory function

MediaAttachMixin is pre-configured with the default mediaContext. To use a different context, call createMediaAttachMixin:

import { createMediaAttachMixin } from '@videojs/html';
import { myCustomContext } from './my-player/context';

export const MyMediaAttachMixin = createMediaAttachMixin(myCustomContext);