Super Media Element
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 or
.
Usage
import { SuperVideoElement } from 'super-media-element';
class MyVideoElement extends SuperVideoElement {
constructor() {
super();
this.loadComplete = new Promise((resolve) => {
this.loadResolve = resolve;
});
}
async attributeChangedCallback(attrName, oldValue, newValue) {
// This is required to come before the await for resolving loadComplete.
if (attrName === 'src' && newValue) {
this.load();
return;
}
super.attributeChangedCallback(attrName, oldValue, newValue);
}
async load() {
if (this.hasLoaded) {
this.loadComplete = new Promise((resolve) => {
this.loadResolve = resolve;
});
}
this.hasLoaded = true;
// Wait 1 tick to allow other attributes to be set.
await Promise.resolve();
// code to load a video element from a script
// example: https://github.com/luwes/jwplayer-video-element/blob/main/src/jwplayer-video-element.js#L49-L69
this.loadResolve();
}
get nativeEl() {
return this.querySelector('.loaded-video-element');
}
get src() {
return this.getAttribute('src');
}
set src(val) {
if (this.src == val) return;
this.setAttribute('src', val);
}
}
if (!globalThis.customElements.get('my-video')) {
globalThis.customElements.define('my-video', MyVideoElement);
globalThis.MyVideoElement = MyVideoElement;
}
export { MyVideoElement };
Related
- Media Chrome Your media player's dancing suit.
🕺
A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.
A web component for the YouTube player.
A web component for the Wistia player.
A web component for the JW player.
A web component for playing HTTP Live Streaming (HLS) videos.
A web component for Video.js.castable-video
Cast your video element to the big screen with ease!
The official Mux-flavored video player web component.