Because we’re using native webcomponents, we can use slots to render your html inside the player. This means you can add your own buttons or other things to be rendered at specific times and/or spots.
The trick is adding slot="end-screen" inside the component. You can use your own custom CSS and make however you like. This end-screen will only be shown after the video is played (and only once).
<!-- 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>
If you want to show the end-screen earlier than when it ends, you can add x-mave-end-shows="near_end" next to the slot="end-screen" attribute.
If you are also using a <mave-list> component you can allow it to find a next video to play from that list. This can be done using x-mave-list-trigger-next="true" next to the slot="end-screen" attribute.
Adding the attributes name="mave-time-remaining" and name="mave-list-next-image" will replace its contents with the time remaining and the next video thumbnail (which triggers a mave:user_click event when clicked, as described in the list component), respectively.
Here are all the attributes together:
<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>
