# super-media-element

> Helps you create a custom element w/ a HTMLMediaElement API.

Latest version **1.4.2** (published 2024-06-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install super-media-element
pnpm add super-media-element
yarn add super-media-element
bun add super-media-element
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.4.2 |
| Published | 2024-06-07 |
| First published | 2022-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 264 |
| Author | @muxinc |
| Maintainers | luwes, mux-npmjs |
| Keywords | custom, element, video, audio, media, web, component |

## Links

- npm: https://www.npmjs.com/package/super-media-element
- Repository: https://github.com/muxinc/media-elements
- Homepage: https://github.com/muxinc/media-elements#readme
- Issues: https://github.com/muxinc/media-elements/issues
- npm.io page: https://npm.io/package/super-media-element

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.4.2 (latest) — 2024-06-07
- 1.4.1 — 2024-05-09
- 1.4.0 — 2024-05-08
- 1.3.0 — 2023-06-09
- 1.2.5 — 2023-04-19
- 1.2.4 — 2023-04-18
- 1.2.3 — 2023-04-15
- 1.2.2 — 2023-04-15
- 1.2.1 — 2023-04-09
- 1.2.0 — 2023-04-09
- 1.1.3 — 2023-04-09
- 1.1.2 — 2023-04-08
- 1.1.1 — 2023-04-08
- 1.1.0 — 2023-04-08
- 1.0.0 — 2023-04-08
- … 10 more at https://npm.io/package/super-media-element/versions

## README

# Super Media Element

[![NPM Version](https://img.shields.io/npm/v/super-media-element?style=flat-square&color=informational)](https://www.npmjs.com/package/super-media-element) 
[![NPM Downloads](https://img.shields.io/npm/dm/super-media-element?style=flat-square&color=informational&label=npm)](https://www.npmjs.com/package/super-media-element) 
[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/super-media-element?style=flat-square&color=%23FF5627)](https://www.jsdelivr.com/package/npm/super-media-element)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/super-media-element?style=flat-square&color=success&label=gzip)](https://bundlephobia.com/result?p=super-media-element) 

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 `<audio>` or `<video>`.

## 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. 🕺
- [`<youtube-video>`](https://github.com/muxinc/media-elements/tree/main/packages/youtube-video-element) A custom element for the YouTube player.
- [`<vimeo-video>`](https://github.com/muxinc/media-elements/tree/main/packages/vimeo-video-element) A custom element for the Vimeo player.
- [`<jwplayer-video>`](https://github.com/muxinc/media-elements/tree/main/packages/jwplayer-video-element) A custom element for the JW player.
- [`<wistia-video>`](https://github.com/muxinc/media-elements/tree/main/packages/wistia-video-element) A custom element for the Wistia player.
- [`<cloudflare-video>`](https://github.com/muxinc/media-elements/tree/main/packages/cloudflare-video-element) A custom element for the Cloudflare player.
- [`<videojs-video>`](https://github.com/muxinc/media-elements/tree/main/packages/videojs-video-element) A custom element for Video.js.
- [`<hls-video>`](https://github.com/muxinc/media-elements/tree/main/packages/hls-video-element) A custom element for playing HTTP Live Streaming (HLS) videos.
- [`castable-video`](https://github.com/muxinc/media-elements/tree/main/packages/castable-video) Cast your video element to the big screen with ease!
- [`<mux-player>`](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player custom element.
- [`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.

---
_Source: https://npm.io/package/super-media-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._