1.3.0 • Published 2 days ago
custom-media-element v1.3.0
Custom Media Element
A custom element for extending the native media elements (<audio>
or <video>
).
Usage
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;
<my-custom-video
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
></my-custom-video>
Interfaces
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<T> = {
readonly observedAttributes: string[];
Events: string[];
template: HTMLTemplateElement;
new(): T
};
export function CustomMediaMixin(superclass: any, options: { tag: 'video', is?: string }):
CustomMediaElementConstructor<CustomVideoElement>;
export function CustomMediaMixin(superclass: any, options: { tag: 'audio', is?: string }):
CustomMediaElementConstructor<CustomAudioElement>;
Related
- Media Chrome Your media player's dancing suit. 🕺
<hls-video>
A custom element for playing HTTP Live Streaming (HLS) videos.<youtube-video>
A custom element for the YouTube player.<vimeo-video>
A custom element for the Vimeo player.<spotify-audio>
A custom element for the Spotify player.<jwplayer-video>
A custom element for the JW player.<wistia-video>
A custom element for the Wistia player.<cloudflare-video>
A custom element for the Cloudflare player.<videojs-video>
A custom element for Video.js.<castable-video>
Cast your video element to the big screen with ease!<mux-player>
The official Mux-flavored video player custom element.<mux-video>
A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.
1.3.0
2 days ago
1.2.3
3 months ago
1.2.2
5 months ago
1.2.1
5 months ago
1.2.0
5 months ago
1.1.1
5 months ago
1.1.3
5 months ago
1.1.2
5 months ago
1.0.2
6 months ago
1.1.0
5 months ago
1.0.1
7 months ago
1.0.0
8 months ago
1.0.2-canary.0
6 months ago
1.0.2-canary.1
6 months ago
1.0.2-canary.2
6 months ago
0.2.0
12 months ago
0.1.9
12 months ago
0.1.8
12 months ago
0.1.7
12 months ago
0.1.6
12 months ago
0.1.5
12 months ago
0.1.4
12 months ago
0.1.3
12 months ago
0.1.2
12 months ago
0.1.1
12 months ago