Media Elements

The media-tracks library polyfills standard HTML <audio> and <video> elements to support multiple audio and video tracks, as well as renditions (quality levels).

It acts as a bridge between two types of consumers:

1. Media Engines (e.g., hls.js, shaka): These engines can use the standardized API to add tracks and renditions retrieved from a manifest.
2. Media UI Implementations (e.g., media-chrome): These UI components consume the uniform API to render menus for selecting tracks (languages/subtitles) and renditions (video quality).

Note on iOS: Manual rendition switching is not supported on iOS because it uses a native HLS implementation that cannot be overridden by this library.

The packages in this repository are distributed as ESNext and include modern JavaScript features like private class fields.

Because they are not pre-transpiled (unlike media-chrome), you must configure your bundler (e.g., Webpack, Vite, Rollup) to include these packages in its transpilation step if you need to support older browsers.

Example Requirement: If you need to support browsers like Safari < 14.1, ensure your build tool processes these packages and targets a compatible version (e.g., es2019).

The custom-media-element package provides base classes for creating custom HTML elements that extend native <audio> or <video> functionality. You can subclass CustomVideoElement or CustomAudioElement to override methods (like play()) or intercept property accessors (like src) while maintaining the native media interface.

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;

If you are using a bundler (like Webpack or Vite), install the package via npm/yarn and then import the module in your application's entry point (e.g., src/App.js). This registration allows you to use the <youtube-video> tag directly in your HTML/JSX templates.

import 'youtube-video-element';

You can use the <vimeo-video> custom element to embed a Vimeo player with an API that matches the standard <video> API. This allows for seamless integration with Media Chrome.

Via NPM

1. Install the package:

npm install vimeo-video-element

2. Import it in your application's entry point (e.g., src/App.js):

import 'vimeo-video-element';

Via CDN

Alternatively, you can load the element directly from JSDelivr using a module script:

<script type="module" src="https://cdn.jsdelivr.net/npm/vimeo-video-element@1.0/+esm"></script>

To use the element directly in your HTML without a build step, load the module via a <script> tag. Ensure you use type="module" so the browser registers the custom element correctly. It is recommended to load this in the <head> for quick registration.

<head>
  <script type="module" src="https://cdn.jsdelivr.net/npm/youtube-video-element@1"></script>
</head>
<body>
  <youtube-video controls src="https://www.youtube.com/watch?v=rubNgGj3pYo"></youtube-video>
</body>

To start the development server for this Next.js project, use your preferred package manager to run the dev script. Once running, you can view the application at http://localhost:3000.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

You can install and use <spotify-audio> in your project via NPM or by loading it directly from a CDN. This custom element provides a Spotify player with an API designed to match the standard <audio> API and is compatible with HTMLMediaElement and Media Chrome.

npm install spotify-audio-element