docs

Aan de slag

De eenvoudigste manier om te beginnen is door in te loggen op je account en daar een video toe te voegen. We geven je vervolgens het juiste codefragment om op je website te plaatsen.

Wil je de integratie handmatig instellen of geavanceerdere mogelijkheden gebruiken, voeg dan het onderstaande codefragment aan je pagina toe. Gebruik je video’s op meerdere pagina’s, plaats het <script> dan in de <head> van je website.

⚠️ De componenten gebruiken HTML5-functionaliteit. Plaats daarom <!DOCTYPE html> bovenaan de pagina.

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

<mave-player embed="ubg50Cq5Ilpnar1"></mave-player>

Lees hier meer over onze speler.

CDN of lokaal

We bieden drie manieren om het pakket aan te leveren. Onze eigen, onopvallende methode zie je hierboven: https://cdn.video-dns.com/npm/@maveio/components/+esm. Dit is de standaardoptie en geldt als best practice.

Wil je wereldwijde distributie, dan kun je een externe CDN zoals JSDelivr gebruiken: https://esm.run/@maveio/components.

Je kunt de bestanden ook zelf hosten. Download het pakket via npmjs.com.

npm install @maveio/components

React, Vue of Svelte

Vue en Svelte kunnen onze gewone bibliotheek gebruiken, omdat die met webcomponenten werkt. Dat kan ook met React, maar React doet bepaalde aannames over HTML-elementen die problemen kunnen veroorzaken met custom elements. Er wordt aan een oplossing gewerkt. In de tussentijd kun je onze React-specifieke bibliotheek gebruiken:

npm install @maveio/components
import { Player } from "@maveio/components/react";

export default function App() {
  return (
    <div className="app">
      <Player embed="ubg507Sd0mszn4F"></Player>
    </div>
  );
}
🍪 Klik op ‘Accepteren’ om te bevestigen dat je het ermee eens bent dat we geen cookies gebruiken. Ja, deze banner is puur voor de show!
Accepteren