https://github.com/luwes/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 `<audio>` or `<video>`.
https://github.com/luwes/super-media-element

audio custom-elements htmlmediaelement video web-components

Last synced: 14 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/luwes/super-media-element
• Owner: luwes
• Created: 2022-06-07T13:09:35.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-09T00:47:47.000Z (over 1 year ago)
• Last Synced: 2024-10-06T08:42:07.429Z (about 1 month ago)
• Topics: audio, custom-elements, htmlmediaelement, video, web-components
• Language: JavaScript
• Homepage:
• Size: 271 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Super Media Element

[![Version](https://img.shields.io/npm/v/super-media-element?style=flat-square)](https://www.npmjs.com/package/super-media-element) 

[![Badge size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/super-media-element/+esm?compression=gzip&label=gzip&style=flat-square)](https://cdn.jsdelivr.net/npm/super-media-element/+esm)

A custom element that helps save alienated player API's in bringing back their true inner 

[HTMLMediaElement API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement), 

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](https://github.com/muxinc/media-chrome) Your media player's dancing suit. 🕺

- [``](https://github.com/muxinc/youtube-video-element) A custom element for the YouTube player.

- [``](https://github.com/luwes/vimeo-video-element) A custom element for the Vimeo player.

- [``](https://github.com/luwes/jwplayer-video-element) A custom element for the JW player.

- [``](https://github.com/luwes/wistia-video-element) A custom element for the Wistia player.

- [``](https://github.com/luwes/cloudflare-video-element) A custom element for the Cloudflare player.

- [``](https://github.com/luwes/videojs-video-element) A custom element for Video.js.

- [``](https://github.com/muxinc/hls-video-element) A custom element for playing HTTP Live Streaming (HLS) videos.

- [`castable-video`](https://github.com/muxinc/castable-video) Cast your video element to the big screen with ease!

- [``](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player custom element.

- [``](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.