Skip to content

A custom element that helps save alienated player API's to bring back their true inner HTMLMediaElement API, or to extend a native media element like `<audio>` or `<video>`.

Notifications You must be signed in to change notification settings

luwes/super-media-element

Repository files navigation

Super Media Element

Version Badge size

A custom element that helps save alienated player API's in bringing back their true inner HTMLMediaElement API, or to extend a native media element like <audio> or <video>.

Usage

import { SuperVideoElement } from 'super-media-element';

class MyVideoElement extends SuperVideoElement {

  static observedAttributes = ['color', ...SuperVideoElement.observedAttributes];

  // Skip from forwarding the `src` attribute to the native element.
  static skipAttributes = ['src'];


  async attributeChangedCallback(attrName, oldValue, newValue) {
    
    if (attrName === 'color') {
      this.api.color = newValue;
    }

    super.attributeChangedCallback(attrName, oldValue, newValue);
  }

  async load() {
    // This is called when the `src` changes.
    
    // Load a video player from a script here.
    // Example: https://github.com/luwes/jwplayer-video-element/blob/main/jwplayer-video-element.js#L55-L75

    this.api = new VideoPlayer();
  }

  get nativeEl() {
    return this.querySelector('.loaded-video-element');
  }
}

if (!globalThis.customElements.get('my-video')) {
  globalThis.customElements.define('my-video', MyVideoElement);
}

export { MyVideoElement };

Related

About

A custom element that helps save alienated player API's to bring back their true inner HTMLMediaElement API, or to extend a native media element like `<audio>` or `<video>`.

Topics

Resources

Stars

Watchers

Forks