Komponenten

Player-Komponente

Die Player-Komponente dient als Kern für alle anderen Komponenten. Es stellt sicher, dass Ihr Video mit optimaler Geschwindigkeit, Flüssigkeit und optischer Attraktivität gerendert wird, abgestimmt auf Ihre gewünschten Anzeigepräferenzen, und nutzt dabei das volle Potenzial von mave. Teilen Sie uns einfach Ihre Anforderungen mit und wir kümmern uns für Sie um alle komplexen technischen Aspekte, einschließlich adaptiver Bitrate (z. B. HLS), Codecs, Analysen und Player-Einstellungen. Es wird auch sein Seitenverhältnis enthalten.

Wenn Sie Videos in Ihre Benutzeroberfläche integrieren möchten, anstatt einen Player zu verwenden, siehe <mave-clip />

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

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

Wenn Sie das Skript-Tag oder die Komponentenbibliothek nicht nutzen können, bieten wir alternativ auch eine iFrame-Einbettung an. Sie können dies im Dashboard Manage-Dashboard finden, indem Sie ein Video öffnen und das Snippet zwischen der Player-Komponente und dem Iframe umschalten, das wie folgt aussieht:

<iframe
  src="https://space-{space hash}.video-dns.com/{embed hash}/player.html"
  width="640" height="360" frameborder="0" scrolling="no" allowfullscreen>
</iframe>

Vorschau

Attribute

Es gibt zwei Ansätze zum Konfigurieren der Player-Einstellungen. Eine Methode besteht darin, Attribute manuell hinzuzufügen. Nachfolgend finden Sie eine umfassende Liste der verfügbaren Attribute. Alle im Abschnitt Manage-Dashboard vorgenommenen Änderungen werden auch als Standardeinstellungen für Ihren Player gespeichert. Dies bedeutet, dass Sie die Möglichkeit haben, diese Standardeinstellungen durch die Bereitstellung bestimmter Attribute zu überschreiben oder sie leer zu lassen und die Einstellungen über das benutzerfreundliche Einstellungsfeld zu optimieren.

Attribut	Beschreibung
aspect-ratio	Der Standardwert ist `16/9`, Sie können jedoch ein beliebiges Seitenverhältnis definieren.
width	Anstelle eines Seitenverhältnisses können Sie Breite und Höhe in Pixel angeben.
height	Anstelle eines Seitenverhältnisses können Sie Breite und Höhe in Pixel angeben.
autoplay	Der Standardwert ist „false“, aber Sie können `always` oder `lazy` angeben (wird nur angezeigt, wenn es angezeigt wird).
controls	Der Standardwert ist `full`, kann aber auch `big`, `none` (zeigt keine Schnittstelle) oder eine benutzerdefinierte Kontrollliste mit Token wie `airplay` und `cast` sein. Siehe controls.
color	Standardmäßig ist transparent, aber durch Angabe einer Hexadezimalfarbe können Sie die Farbe der Steuerelemente ändern. Siehe color.
opacity	Wenn Sie eine Farbe angeben, können Sie auch deren Deckkraft angeben.
loop	Standardmäßig ist „false“, aber wenn `loop` angegeben wird (erfordert kein Attribut).
poster	Standardmäßig wird der erste Frame verwendet (wenn nicht festgelegt), kann aber auf eine absolute URL zu einer anderen Quelle festgelegt werden.

Es gibt auch einige Attribute, die nur für die Komponente und nicht über die Verwaltungsschnittstelle festgelegt werden können:

Attribut	Beschreibung
embed (erforderlich)	Dies weist auf eine bestimmte Einbettung hin.
subtitles	Standardmäßig wird die Originalsprache verwendet (und wenn die Originalsprache nicht Englisch ist, wird auch Englisch hinzugefügt). Sie können auch eine Liste von Sprachen angeben (nur diejenigen, die in „Verwalten“ erstellt oder hinzugefügt werden), z. B.: `"en, nl"` oder `"none"`, wenn Sie keine Untertitel anzeigen möchten. Siehe Untertitel.
theme	Lesen Sie mehr über themes in den Dokumenten.
quality	Standardmäßig wird die höchste verfügbare Qualität verwendet, Sie können jedoch eine der folgenden Optionen auswählen: `sd`, `hd`, `fhd`, `qhd`, `uhd`. Wenn beispielsweise `qhd` angegeben, aber nicht verfügbar ist, wird die nächste verfügbare Option in der Zeile ausgewählt, z. B. `fhd`.
audiotracks	Steuert, ob die Audiospurauswahl angezeigt wird. Der Standardwert `auto` zeigt den Selektor nur an, wenn mehrere Audiospuren vorhanden sind. Legen Sie `off` fest, um es vollständig auszublenden.

Methoden

Obwohl wir viel schwere Arbeit leisten, verhält sich die Komponente <mave-player /> ähnlich wie die Komponente <video />. Das bedeutet, dass .play() und .pause() beispielsweise in Javascript verwendet werden können. Sie können dem Player auch Ereignis-Listener hinzufügen, die alle Videoereignisse, wie zum Beispiel: timeupdate, auslösen.

Methode/Eigenschaft	Beschreibung
play()	Um das Video abzuspielen, wenn es angehalten wurde.
restart()	Um das Video von Anfang an neu zu starten.
pause()	Um das Video während der Wiedergabe anzuhalten.
muted	Zum Stummschalten oder Aufheben der Stummschaltung des Videos (boolean).
paused	Gibt einen booleschen Wert zurück, um zu erfahren, ob das Video abgespielt wird.
currentTime	Gibt die aktuelle Zeit des Videos zurück oder legt sie fest.
duration	Gibt einen `Promise<number>` zurück, der die Dauer des Videos als Float zurückgibt.

Spielautomaten

Da wir native Webkomponenten verwenden, können Sie mit Slots eigenen HTML-Code im Player darstellen. So lassen sich eigene Schaltflächen oder andere Elemente zu bestimmten Zeiten und an bestimmten Stellen einblenden. Ein Beispiel finden Sie in unserem Blogbeitrag.

Methode	Beschreibung
end-screen	Wird jedes Mal das Video `ended` angezeigt.
start-screen	Wird nur einmal angezeigt, bevor das Video `playing` ist.