Der einfachste Einstieg besteht darin, sich bei Ihrem Konto anzumelden und dort ein Video hinzuzufügen. Wir stellen Ihnen das entsprechende Code-Snippet zur Verfügung, das Sie in Ihre Website einbetten können.
Wenn Sie es lieber manuell einrichten oder komplexere Dinge tun möchten, können Sie den unten gezeigten Codeausschnitt zu Ihrer Seite hinzufügen. Falls Sie Videos zu mehreren Seiten hinzufügen, empfehlen wir, das Element <script> zum Element <head> Ihrer Website hinzuzufügen.
⚠️ Komponenten erfordern HTML5-Funktionen und geben daher oben auf der Seite <!DOCTYPE html> an.
<script
type="module"
src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>
<mave-player embed="ubg50Cq5Ilpnar1"></mave-player>Mehr über unseren Player erfahren Sie hier.
Wir bieten drei Möglichkeiten, das Paket zu servieren, jede mit ihrem eigenen Geschmack. Unsere eigene unauffällige Methode ist oben beispielhaft dargestellt und läuft unter https://cdn.video-dns.com/npm/@maveio/components/+esm. Diese Option dient als unsere Standardeinstellung und kann als Best Practice angesehen werden.
Wenn Sie einen globalen Verteilungsansatz bevorzugen, haben Sie die Alternative, ein Drittanbieter-CDN wie JSDelivr zu verwenden: https://esm.run/@maveio/components.
Schließlich können Sie sich dafür entscheiden, die Dateien selbst zuzustellen. Laden Sie das Paket herunter und führen Sie es aus, indem Sie es von npmjs.com beziehen.
npm install @maveio/componentsVue und Svelte können unsere reguläre Bibliothek nutzen, da sie mit Webkomponenten arbeiten kann. React kann dies auch nutzen, allerdings geht React bei HTML-Elementen von bestimmten Annahmen aus, die bei benutzerdefinierten Elementen zu Problemen führen können. Sie arbeiten daran, diese Probleme anzugehen. In der Zwischenzeit stellen wir eine React-spezifische Bibliothek bereit, die Sie stattdessen verwenden können, etwa so:
npm install @maveio/componentsimport { Player } from "@maveio/components/react";
export default function App() {
return (
<div className="app">
<Player embed="ubg507Sd0mszn4F"></Player>
</div>
);
}