Super Media Element


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 or .

Usage

``js
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

- Media Chrome Your media player's dancing suit. 🕺
- A custom element for the YouTube player.
- A custom element for the Vimeo player.
- A custom element for the JW player.
- A custom element for the Wistia player.
- A custom element for the Cloudflare player.
- A custom element for Video.js.
- A custom element for playing HTTP Live Streaming (HLS) videos.
- castable-video Cast your video element to the big screen with ease!
- The official Mux-flavored video player custom element.
- ` A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.