Custom Media Element


A custom element for extending the native media elements ( or ).

Usage

``js
import { CustomVideoElement } from 'custom-media-element';

class MyCustomVideoElement extends CustomVideoElement {
constructor() {
super();
}

// Override the play method.
play() {
return super.play()
}

// Override the src getter & setter.
get src() {
return super.src;
}

set src(src) {
super.src = src;
}
}

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

export default MyCustomVideoElement;
`

`html
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
>
`

Interfaces

`ts
export const Events: string[];

export const audioTemplate: HTMLTemplateElement;
export const videoTemplate: HTMLTemplateElement;

export class CustomAudioElement extends HTMLAudioElement implements HTMLAudioElement {
static readonly observedAttributes: string[];
static Events: string[];
static template: HTMLTemplateElement;
readonly nativeEl: HTMLAudioElement;
attributeChangedCallback(attrName: string, oldValue?: string | null, newValue?: string | null): void;
connectedCallback(): void;
disconnectedCallback(): void;
handleEvent(event: Event): void;
}

export class CustomVideoElement extends HTMLVideoElement implements HTMLVideoElement {
static readonly observedAttributes: string[];
static Events: string[];
static template: HTMLTemplateElement;
readonly nativeEl: HTMLVideoElement;
attributeChangedCallback(attrName: string, oldValue?: string | null, newValue?: string | null): void;
connectedCallback(): void;
disconnectedCallback(): void;
handleEvent(event: Event): void;
}

type CustomMediaElementConstructor = {
readonly observedAttributes: string[];
Events: string[];
template: HTMLTemplateElement;
new(): T
};

export function CustomMediaMixin(superclass: any, options: { tag: 'video', is?: string }):
CustomMediaElementConstructor;

export function CustomMediaMixin(superclass: any, options: { tag: 'audio', is?: string }):
CustomMediaElementConstructor;
`

Related

- Media Chrome Your media player's dancing suit. 🕺
- A custom element for playing HTTP Live Streaming (HLS) videos.
- A custom element for the YouTube player.
- A custom element for the Vimeo player.
- A custom element for the Spotify 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.
- 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.