Wil je headless video’s in je website opnemen, op dezelfde manier als een afbeelding, dan kun je de clipcomponent gebruiken. Dit is vooral handig wanneer je een video als achtergrond van je site wilt inzetten. De clipcomponent begint automatisch af te spelen zodra deze zichtbaar wordt in de viewport van de gebruiker, pauzeert wanneer deze niet meer zichtbaar is en herhaalt de video naadloos.
<script
type="module"
src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>
<mave-clip embed="{embed id}"></mave-clip>In tegenstelling tot de spelercomponent heeft de clipcomponent verwerkingstijd nodig voordat deze kan worden afgespeeld. Na het uploaden is de clip automatisch klaar voor gebruik zodra de verwerking is afgerond.
⚠️ Voor optimale prestaties met verschillende codecs hebben de renditions die voor onze clipcomponent worden gemaakt een maximale duur van 60 seconden.
| Attribuut | Beschrijving |
|---|---|
| embed | Verwijst naar een specifieke embed. |
| autoplay | Standaard lazy, maar je kunt ook always of off opgeven. Met off schakel je automatisch afspelen uit. |
| loop | Standaard true; geef false op om herhalen uit te schakelen. |
| quality | Standaard fhd, maar je kunt kiezen uit sd, hd, fhd, qhd en uhd. Geef je bijvoorbeeld qhd op terwijl die kwaliteit niet beschikbaar is, dan wordt de eerstvolgende beschikbare optie gekozen, zoals fhd. |
| fallback | Standaard placeholder: een spelerachtige afbeelding die wordt gebruikt wanneer een video niet kan worden afgespeeld, bijvoorbeeld door een bijna lege batterij. Stel dit in op thumbnail als je de aangepaste thumbnail of het eerste frame als fallback wilt gebruiken. |
| Methode | Beschrijving |
|---|---|
| play() | Speelt de video af wanneer deze is gepauzeerd. |
| pause() | Pauzeert de video wanneer deze wordt afgespeeld. |
| Eigenschap | Beschrijving |
|---|---|
| duration | Geeft een Promise<number> terug met de duur van de clip (niet van de oorspronkelijke video) als kommagetal. |
| currentTime | Geeft de huidige afspeeltijd van de video terug of stelt deze in. |
