Einen benutzerdefinierten Start- und Endbildschirm im Player erstellen
Das Problem
Wir unterstützen Kunden regelmäßig bei besonderen Anwendungsfällen. Einer davon war die Frage, ob sich vor dem Start eines Videos und nach dessen Ende eigenes HTML anzeigen lässt.
Ein eigenes Intro kann beispielsweise einen Titel, eine Beschreibung, ein Logo oder eine Schaltfläche enthalten. Dasselbe gilt für das Outro, das nach dem Video erscheint – etwa mit einem Formular, über das sich Besucher für Updates zu neuen Videos anmelden können.
In diesem Beitrag erstellen wir genau das und zeigen anhand eines Beispiels, was möglich ist. Wir beginnen mit dem vertrauten Grundaufbau: unserem Skript mit etwas HTML und CSS.
<script type="module">
import "https://cdn.video-dns.com/npm/@maveio/components/+esm";
</script>
<mave-player
embed="ubg50lro9d5Cuzu"
style="display: block; width: 100%; background: center / contain no-repeat url(https://space-ubg50.video-dns.com/lro9d5Cuzu/thumbnail.jpg); aspect-ratio: 16 / 9;"
></mave-player>Dadurch wird unser Standardplayer angezeigt:
Die Lösung
Da <mave-player /> eine Webkomponente ist, können wir das Attribut slot verwenden. Damit lässt sich eigenes HTML innerhalb von <mave-player /> platzieren. Zum Beispiel:
<!-- slot[start-screen] is shown before the video plays and requires "height: 100%; position: relative;" for initial render -->
<div slot="start-screen" style="height: 100%; position: relative;">
<!-- call <mave-player>.play(), which starts the video -->
<div
onClick="event.preventDefault(); this.closest('mave-player').play();"
class="container"
>
<div class="playbutton">
<svg
style="width: 34px; height: 34px;"
xmlns="http://www.w3.org/2000/svg"
stroke="rgba(0,0,0,0.7)"
fill="rgba(0,0,0,0.15)"
viewBox="0 0 24 24"
>
<polygon
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.1"
points="8 19 19 12 8 5"
></polygon>
</svg>
</div>
</div>
</div>Der entscheidende Schritt ist, innerhalb der Komponente slot="start-screen" hinzuzufügen. Sie können eigenes CSS verwenden und den Startbildschirm frei gestalten. Der start-screen wird nur vor dem Abspielen des Videos und nur einmal angezeigt. In diesem Beispiel erstellen wir ein Overlay und starten das Video über den onClick-Handler mit this.closest('mave-player').play();. Das Ergebnis sieht so aus:
Für das Ende können wir mit slot="end-screen" eigenes HTML anzeigen, sobald das Video beendet ist. Zum Beispiel:
<!-- slot[end-screen] is shown after the video ends and requires "display: none" for initial render -->
<div slot="end-screen" style="display: none;">
<div>
<h3>
Über Updates benachrichtigt werden
</h3>
<p>
Hinterlassen Sie Ihre E-Mail-Adresse und wir informieren Sie, sobald ein neues Video erscheint.
</p>
<form>
<input type="text"></input>
<button>Abonnieren</button>
</form>
<!-- call <mave-player>.play(), which replays the video when ended -->
<a href="#" onClick="event.preventDefault(); this.closest('mave-player').play();">oder erneut ansehen ↻</a>
</div>
</div>Das Ergebnis sieht so aus – wir springen direkt zum Ende:
Hier ist der vollständige Code, in dem alles zusammengeführt ist:
<mave-player id="mave_end" embed="ubg50lro9d5Cuzu" style="display: block; width: 100%; background: center / contain no-repeat url(https://space-ubg50.video-dns.com/lro9d5Cuzu/thumbnail.jpg); aspect-ratio: 16 / 9;">
<!-- slot[start-screen] is shown before the video plays and requires "height: 100%; position: relative;" for initial render -->
<div slot="start-screen" style="height: 100%; position: relative;">
<!-- call <mave-player>.play(), which starts the video -->
<div
onClick="event.preventDefault(); this.closest('mave-player').play();"
class="container"
>
<div class="playbutton">
<svg
style="width: 34px; height: 34px;"
xmlns="http://www.w3.org/2000/svg"
stroke="rgba(0,0,0,0.7)"
fill="rgba(0,0,0,0.15)"
viewBox="0 0 24 24"
>
<polygon
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.1"
points="8 19 19 12 8 5"
></polygon>
</svg>
</div>
</div>
</div>
<!-- slot[end-screen] is shown after the video ends and requires "display: none" for initial render -->
<div slot="end-screen" style="display: none;">
<div>
<h3>
Über Updates benachrichtigt werden
</h3>
<p>
Hinterlassen Sie Ihre E-Mail-Adresse und wir informieren Sie, sobald ein neues Video erscheint.
</p>
<form>
<input type="text"></input>
<button>Abonnieren</button>
</form>
<!-- call <mave-player>.play(), which replays the video when ended -->
<a href="#" onClick="event.preventDefault(); this.closest('mave-player').play();">oder erneut ansehen ↻</a>
</div>
</div>
</mave-player>Haben Sie weitere Ideen oder Feedback? Wir freuen uns auf Ihre Meinung. Diskutieren Sie mit uns auf Discord und teilen Sie dort Ihre Gedanken. Klicken Sie hier, um teilzunehmen!
