Da wir native Webkomponenten verwenden, können wir mit Slots eigenes HTML innerhalb des Players darstellen. So lassen sich eigene Schaltflächen oder andere Elemente zu bestimmten Zeitpunkten und an bestimmten Positionen einblenden.
Der entscheidende Schritt ist, innerhalb der Komponente slot="end-screen" hinzuzufügen. Sie können eigenes CSS verwenden und den Endbildschirm frei gestalten. Der end-screen wird nach dem Abspielen des Videos und nur einmal angezeigt.
<!-- 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>.restart(), which replays the video when ended -->
<a href="#" onClick="event.preventDefault(); this.closest('mave-player').restart();">oder erneut ansehen ↻</a>
</div>
</div>Wenn Sie den Endbildschirm bereits kurz vor dem Ende anzeigen möchten, ergänzen Sie neben slot="end-screen" das Attribut x-mave-end-shows="near_end".
Wenn Sie zusätzlich eine <mave-list>-Komponente verwenden, kann der Player das nächste Video aus dieser Liste auswählen. Ergänzen Sie dazu neben slot="end-screen" das Attribut x-mave-list-trigger-next="true".
Die Attribute name="mave-time-remaining" und name="mave-list-next-image" ersetzen den jeweiligen Inhalt durch die verbleibende Zeit beziehungsweise das Vorschaubild des nächsten Videos. Ein Klick darauf löst – wie bei der List-Komponente beschrieben – ein mave:user_click-Ereignis aus.
Hier sehen Sie alle Attribute zusammen:
<div
slot="end-screen"
style="display: none;"
x-mave-end-shows="near_end"
x-mave-list-trigger-next="true"
>
<div name="mave-time-remaining"></div>
<div name="mave-list-next-image"></div>
<a
href="#"
onClick="event.preventDefault(); this.closest('mave-player').restart();"
>or watch it again ↻</a
>
</div>