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
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!
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>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.
<mave-audio> plays published audio tracks from audio or video uploads using
native <audio>. It never fetches a video rendition or original video as a fallback.
<mave-player> automatically uses the same audio presentation for audio-only
uploads. Existing embeds keep their tag, playback API, events, theme and color.
Video uploads continue to use the video player; use <mave-audio> to play only
their audio tracks.
<!-- Both examples accept the same embed id, including a video upload. -->
<mave-audio embed="{embed id}" type="line"></mave-audio>
<mave-audio embed="{embed id}" theme="dolphin" type="wave"></mave-audio>
<!-- Automatically chooses audio or video from the uploaded media. -->
<mave-player embed="{embed id}" theme="dolphin" type="wave"></mave-player>type="line" (default) shows a progress bar; type="wave" shows measured amplitude
peaks. Independently, theme="default", theme="dolphin" and theme="synthwave"
reuse the video themes' buttons, icons, timeline styling, typography and color
contrast colors. Synthwave keeps its timeline above the controls.
The same audio attributes work on <mave-player> when it detects audio-only
media. Switching its embed between audio and video also switches presentation.
Audio defaults to controls="full": play, time, seek, volume, captions and audio
track selection when available. Use an explicit list for fewer controls, none
to hide the controls or big for a large play button. rate and airplay are
explicit opt-ins, just as in the video player. Video-only controls are ignored.
thumbnail is always opt-in, including with full; omitting it hides the image
and avoids loading it. For example:
<mave-audio embed="{embed id}" theme="dolphin" type="wave"
controls="full rate thumbnail"></mave-audio>
<mave-audio embed="{embed id}" theme="synthwave" type="line"
controls="play time seek volume"></mave-audio>Optional title, subtitle and poster customize the audio heading and image.
subtitle is the secondary text below the title (for example, an artist or show
name), not a subtitle/caption track. The title defaults to the embed name.
poster uses the same image selection as the video player and is only displayed
when controls includes thumbnail. These replace the earlier audio-title,
audio-subtitle and audio-artwork attributes, respectively.
<mave-audio embed="{embed id}" title="Episode 12" subtitle="The Mave Podcast"
poster="https://example.com/cover.jpg" controls="full thumbnail"></mave-audio>The public playback methods, events, tokens and analytics are shared with Player. Audio
sizes to its content and shows an unavailable message for sources without a
published audio track. Changing type keeps the current playback position.
The same component is exported as Audio from @maveio/components,
@maveio/components/react and @maveio/components/vue:
import { Audio } from '@maveio/components/react';
<Audio embed="{embed id}" theme="dolphin" type="wave" controls="full thumbnail" />Use --mave-audio-min-height to reserve space across loading and playback. To
reserve the same space before the component is registered, also set
min-height: var(--mave-audio-min-height) on the element.
Additional CSS overrides: --mave-audio-background and --mave-audio-radius,
alongside the existing theme's control variables.
Waveforms use the optional manifest field
waveform: {version: 1, duration, audio_track, peaks}. Peaks are amplitudes from
0 to 1; audio_track identifies the analyzed track's filename. Core generates them
from the processed primary track of audio and video uploads. Missing, invalid,
mismatched-duration or different-track peaks fall back to the line timeline.
Switching language tracks preserves position and speed. Existing uploads need
reprocessing with the updated publishing preset to gain waveform data.
<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.
<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.
npm run start
When defining msg() run the following command: ./node_modules/.bin/lit-localize extract && ./node_modules/.bin/lit-localize build