Een aangepast begin- en eindscherm maken in de player
Het probleem
We helpen klanten regelmatig met specifieke toepassingen, en dit is er een van. Een klant vroeg ons of het mogelijk was om voor de start en na afloop van een video eigen HTML toe te voegen.
Zo’n intro kan bijvoorbeeld een titel, beschrijving, logo of knop bevatten. Voor de outro geldt hetzelfde, maar die verschijnt na de video. Denk bijvoorbeeld aan een formulier waarin een klant een e-mailadres achterlaat om updates over nieuwe video’s te ontvangen.
In dit artikel bouwen we precies dat en laten we met een voorbeeld zien wat er mogelijk is. We beginnen met iets wat je waarschijnlijk al kent: ons script, dat standaard wat HTML en CSS bevat.
<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>Dit levert simpelweg onze standaardplayer op:
De oplossing
Omdat <mave-player /> een webcomponent is, kunnen we het slot-attribuut gebruiken. Daarmee kunnen we aangepaste HTML binnen <mave-player /> weergeven. Bijvoorbeeld:
<!-- 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>De truc is om slot="start-screen" binnen de component toe te voegen. Met je eigen CSS kun je het scherm helemaal naar wens vormgeven. Dit start-screen verschijnt alleen voordat de video wordt afgespeeld, en slechts één keer. In dit voorbeeld maken we een overlay en gebruiken we de handler onClick om de video met this.closest('mave-player').play(); te starten. Dit is het resultaat:
Het einde is nog leuker. Met slot="end-screen" tonen we na afloop van de video eigen HTML. Bijvoorbeeld:
<!-- 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>.play(), which replays the video when ended -->
<a href="#" onClick="event.preventDefault(); this.closest('mave-player').play();">or watch it again ↻</a>
</div>
</div>Dit is het resultaat — we springen meteen naar het einde:
Dit is de volledige code wanneer je alles samenvoegt:
<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>
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>.play(), which replays the video when ended -->
<a href="#" onClick="event.preventDefault(); this.closest('mave-player').play();">or watch it again ↻</a>
</div>
</div>
</mave-player>Heb je andere ideeën of feedback? We horen graag wat je denkt. Praat mee en deel je ideeën op onze Discord. Klik hier om deel te nemen.
