@maveio/components NPM

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

Install

To use 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 use the hosted version

<script type="module">
  import { Player } from "//cdn.mave.io/npm/@maveio/components/+esm";
</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>

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.

Clip

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

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.