Omdat we native webcomponents gebruiken, kunnen we slots gebruiken om jouw HTML in de speler weer te geven. Zo kun je je eigen knoppen of andere elementen op specifieke momenten en/of posities tonen.
Je voegt hiervoor slot="end-screen" toe binnen de component. Met je eigen CSS kun je het eindscherm volledig naar wens vormgeven. Dit end-screen wordt pas getoond nadat de video is afgespeeld, en slechts één keer.
<!-- 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>
Get notified on updates
</h3>
<p>
Leave your email and we'll let you know when we release a new video.
</p>
<form>
<input type="text"></input>
<button>Subscribe</button>
</form>
<!-- call <mave-player>.restart(), which replays the video when ended -->
<a href="#" onClick="event.preventDefault(); this.closest('mave-player').restart();">or watch it again ↻</a>
</div>
</div>Wil je het eindscherm al tonen voordat de video helemaal is afgelopen, voeg dan x-mave-end-shows="near_end" toe naast het attribuut slot="end-screen".
Gebruik je ook een <mave-list>-component, dan kun je de speler de volgende video uit die lijst laten zoeken en afspelen. Voeg hiervoor x-mave-list-trigger-next="true" toe naast het attribuut slot="end-screen".
Als je de attributen name="mave-time-remaining" en name="mave-list-next-image" toevoegt, wordt de inhoud ervan vervangen door respectievelijk de resterende tijd en de thumbnail van de volgende video. Wanneer op die thumbnail wordt geklikt, wordt een event mave:user_click geactiveerd, zoals beschreven bij de lijstcomponent.
Hier zie je alle attributen bij elkaar:
<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>