components

Components are pre-built rich UI components that help you build your own video experiences across desktop and mobile (web). There is no need to run external iframes these days. This library leverages the power of webcomponents, which makes it fast and has a small footprint. You can create a (free) account on mave.io.

Install • Usage • Contributing • Docs

Get started

Include the following in your site (and create an account):

<script
  type="module"
  src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>

and start using our components!

Install

If you want to use our component library locally within your project:

npm install @maveio/components

And either use the regular version

// include in your script.js
import { Player } from '@maveio/components';

// and use the component in your html
<mave-player embed="{embed id}"></mave-player>;

or use our React specific version:

import { Player } from '@maveio/components/react';

function App() {
  return (
    <>
      <Player embed="{embed id}"></Player>
    </>
  );
}

export default App;

or Vue:

<template>
  <Player embed="{embed id}"></Player>
</template>

<script setup lang="ts">
  import { Player } from '@maveio/components/vue';
</script>

Usage

Player

Once you have uploaded your first video you can show your videos in different formats. The most common used component is <mave-player>:

<mave-player embed="{embed id}"></mave-player>

You can either change the settings through our interface or provide it as attributes. To learn which attributes you can use to change the appearance of your player, go to our docs.

Audio

Use <mave-audio> to play audio uploads or the audio tracks of a video:

<mave-audio embed="{embed id}"></mave-audio>

You can customize the appearance with themes and use type="wave" to show a waveform. The <mave-player> component also automatically shows an audio player for audio-only uploads.

Clip

<mave-clip embed="{embed id}"></mave-clip>

We often find ourselves using simple .mp4 files, because we just want to show a simple video as interface element (just like an image). We provide just that, but using the power of mave (multiple renditions, codecs and analytics) without any UI on top to control the video. Useful as header, or on an e-commerce site to show products for instance.

List

<mave-list token="<token>">
  <template>
    <div slot="item-title"></div>
    <mave-img></mave-img>
  </template>
</mave-list>

A more complex example is <mave-list>, which can be useful to show a collection of videos. Combined with our x-mave-pop attribute, it can become pretty powerful.

More can be found on our docs

Contributing

Local development

npm run start

Build and typecheck with TypeScript 7 using npm run build:prod and npm run typecheck. The typescript-native alias selects that compiler; typescript stays on 6.0 for ESLint's compiler API compatibility. Run npm run lint to check code or npm run lint:fix to apply fixes.

Localization

When defining msg() run the following command: ./node_modules/.bin/lit-localize extract && ./node_modules/.bin/lit-localize build