Mave für Entwickler

Video in wenigen
Zeilen Code.

Web Components für Ihr Frontend. Eine REST API, Webhooks und eine CLI für alles dahinter.

Mave übernimmt Kodierung, adaptives Streaming, Untertitel und cookielose Analytics, gehostet in Europa. Sie behalten die Kontrolle über Ihr Markup, Ihr Styling und Ihre Daten.

Dokumentation lesen Kostenlos starten

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

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

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

export default function Hero() {
  return <Player embed="ubg502qJu7jOKXP" />;
}

$ npm install @maveio/components

// An beliebiger Stelle in Ihrem Frontend
import "@maveio/components";

Funktioniert mit reinem HTML, React, Vue, Svelte und jedem CMS, in dem Sie HTML einfügen können.

Video, das zu Ihrer Website passt.

Ein vollständiger Player, ein dezenter Hintergrundclip oder ein Video per Klick. Probieren Sie dieselben Komponenten aus, die Sie auf Ihrer Website einsetzen können.

Ein Player, bereit zum Einbetten.

Adaptive Wiedergabe, Untertitel und Wiedergabesteuerung. Sie liefern das Video, Mave übernimmt die Auslieferung.

Dokumentation

Video als Teil der Seite.

Ein stummer Clip in Endlosschleife für Header, Produktdetails oder visuelle Geschichten. Ohne Player-Bedienelemente im Bild.

Clip-Dokumentation

Video per Klick öffnen.

Halten Sie Ihre Seite übersichtlich. Besucher öffnen den vollständigen Player, wenn sie schauen möchten.

So fügen Sie ein Popup hinzu

Einbettungscode ansehen

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

<!-- Player -->
<mave-player embed="ubg502qJu7jOKXP"></mave-player>

<!-- Clip -->
<mave-clip embed="ubg500Zc6dNVD8e"></mave-clip>

<!-- Popup -->
<button x-mave-pop="ubg506rsMmzDwXQ">Watch the video</button>

Passt zu Ihrer Website.

Nutzen Sie eine Einbettung, eine Komponente oder eine CMS-Integration. Sie müssen Ihre Website nicht um Mave herum neu aufbauen.

WordPress Drupal Webflow Statamic

Web Components für
jeden Teil von Video.

Native Custom Elements, die in jedem Framework funktionieren, oder ganz ohne. Konfigurieren Sie sie mit Attributen, gestalten Sie sie mit CSS und erweitern Sie sie mit Slots.

<mave-player>

Player

Adaptives Streaming, Untertitel, Audiospuren und Themes. Das Herzstück jeder Einbettung.

<mave-clip>

Clip

Eine stumme Schleife, die abspielt, sobald sie sichtbar ist, und pausiert, wenn nicht. Verwenden Sie sie wie ein Bild.

<mave-text>

Text

Das Transkript eines Videos auf Ihrer Seite, synchron zur Wiedergabe.

<mave-audio>

Audio

Spielen Sie hochgeladene Audiodateien oder die Audiospuren eines Videos mit denselben Bedienelementen ab.

<mave-upload>

Upload

Lassen Sie Nutzer direkt auf Ihrer Website hochladen, begrenzt durch ein Token, das Sie signieren.

<mave-list>

Liste

Zeigen Sie die Videos Ihres Space oder einer einzelnen Sammlung.

<mave-files>

Dateien

Bieten Sie bestimmte Versionen eines Videos zum Download an.

Attribute
statt SDKs.

Jede Einstellung aus dem Mave-Dashboard ist auch ein Attribut. Legen Sie eine Farbe fest, wählen Sie die Bedienelemente, laden Sie Ihr eigenes JavaScript-Theme oder platzieren Sie mit Slots eigenes HTML im Player.

Einstellungen live ausprobieren

index.html

<mave-player
  embed="ubg502qJu7jOKXP"
  color="#2563eb"
  theme="/themes/brand.js"
  controls="play time seek volume subtitles fullscreen"
  subtitles="all"
  active-subtitle="original">

  <!-- Wird angezeigt, sobald das Video zu Ende ist -->
  <div slot="end-screen" style="display: none;">
    <a href="https://calendar.proton.me/bookings#W2nrb0KzNAx8UP2xDlNshuUZCr3xiWcRvWWaFD4mF5s=">Demo buchen</a>
  </div>
</mave-player>

Automatisieren Sie alles
hinter dem Player.

Erstellen Sie Videos aus einer URL, organisieren Sie sie in Sammlungen und reagieren Sie mit Webhooks auf Ereignisse, statt regelmäßig abzufragen.

Authentifizieren Sie jede Anfrage mit einem Bearer-Token aus dem Dashboard. Schlüssel mit Lesezugriff können GET-Anfragen stellen; zum Erstellen, Aktualisieren und Löschen benötigen Sie einen Schlüssel mit Lese- und Schreibzugriff.

API-Referenz Webhooks

Video erstellen

curl -X POST https://api.mave.io/v1/videos \
  -H "Authorization: Bearer $MAVE_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "collection": "ubg50fRgMoWlCUU",
    "input_url": "https://example.com/launch.mp4"
  }'

Webhook-Events

video.created
video.uploaded
video.processing
video.ready
video.archived
video.unarchived
video.deleted

Ihre App. Ihre Regeln.

Signieren Sie Tokens auf Ihrem eigenen Server, rufen Sie jede Version über eine vorhersehbare URL ab und erzeugen Sie Frames bei Bedarf.

Uploads aus Ihrer App

Fügen Sie <mave-upload> zu Ihrer Website hinzu und signieren Sie ein JWT, das auf einen Space, eine Sammlung oder ein einzelnes Video beschränkt ist. Versehen Sie es mit einem Ablaufdatum, damit Sie den Zugriff jederzeit widerrufen können.

Upload-Komponente

Geschützte Videowiedergabe

Machen Sie ein Video privat und autorisieren Sie die Wiedergabe mit einem JWT, das Ihr Server mit einem API-Schlüssel mit Leserechten signiert. Funktioniert mit Mave-Komponenten und Ihrem eigenen Player.

Signierte URLs und JWTs

Hotlink-Schutz legt separat erlaubte Website-Domains über CORS fest.

Hotlink-Schutz

Vorhersehbare Quellen

Jede Version, jedes Manifest und jedes Posterbild hat eine feste URL. Nutzen Sie sie in Ihrem eigenen Player oder Ihrer Pipeline.

space-ubg50.video-dns.com/2qJu7jOKXP/h264_sd.mp4 Quellen

Frames auf Abruf

Rufen Sie jedes Frame eines Videos als Bild ab. Legen Sie Zeitpunkt und Größe in der URL fest.

image.mave.io/ubg502qJu7jOKXP.jpg?time=4&width=360 Bilder

$ brew install maveio/tap/mave
$ mave login
$ mave videos upload ./video.mp4 --wait
$ mave collections create --name "Product videos"
$ mave videos list --format table

Ihre Bibliothek,
aus dem Terminal.

Laden Sie Dateien hoch, prüfen Sie Ihre Bibliothek und erstellen Sie Sammlungen mit der Mave CLI.

Befehle geben standardmäßig JSON zurück, daher passt die CLI in Skripte, CI und KI-Assistenten, die Terminalbefehle ausführen. Sie wechseln von Vimeo? Importieren Sie Ihre Videos mit ihren Titeln und Ordnern.

CLI-Dokumentation

Lesen Sie den Code.
Bauen Sie darauf auf.

Mave ist Open Source: Mave Core, die Komponenten hinter dem Player und das clientseitige Paket, das Wiedergabedaten erfasst. Sehen Sie genau, was auf Ihrer Website läuft – oder betreiben Sie es selbst.

maveio/core

Die Plattform selbst: Dashboard, API, Videoverarbeitung und Analytics. Betreiben Sie sie auf Ihrer eigenen Infrastruktur.

Auf GitHub ansehen maveio/components

Die Web Components hinter Player, Clip, Text, Audio und Upload.

Auf GitHub ansehen maveio/data

Das clientseitige Paket, das im Browser cookielose Wiedergabedaten erfasst.

Auf GitHub ansehen

Legen Sie los.

Erstellen Sie ein kostenloses Konto, laden Sie ein Video hoch und fügen Sie das Snippet ein. Oder lesen Sie zuerst die Dokumentation.

Kostenlos starten Dokumentation lesen

Video in wenigenZeilen Code.