componenten

Spelercomponent

De spelercomponent vormt de kern van alle andere componenten. De component geeft je video met optimale snelheid, vloeiendheid en visuele kwaliteit weer, afgestemd op jouw voorkeuren en met alle mogelijkheden van Mave. Geef aan wat je nodig hebt, dan regelen wij de complexe technische aspecten voor je, waaronder adaptive bitrate (bijvoorbeeld HLS), codecs, analytics en spelerinstellingen. De component behoudt ook de beeldverhouding.

Wil je video in je interface opnemen zonder een speler te gebruiken, bekijk dan <mave-clip />.

<script
  type="module"
  src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>

<mave-player embed="{embed id}"></mave-player>

Kun je de scripttag of componentbibliotheek niet gebruiken, dan bieden we als alternatief ook een iframe-embed aan. Je vindt deze in het dashboard van Beheer. Open een video en schakel het codefragment van de spelercomponent naar iframe. Dat ziet er zo uit:

<iframe
  src="https://space-{space hash}.video-dns.com/{embed hash}/player.html"
  width="640" height="360" frameborder="0" scrolling="no" allowfullscreen>
</iframe>

Voorbeeld

Attributen

Je kunt de spelerinstellingen op twee manieren configureren. Je kunt attributen handmatig toevoegen; hieronder vind je een volledige lijst van de beschikbare attributen. Wijzigingen in Beheer worden ook opgeslagen als standaardinstellingen voor je speler. Je kunt deze standaardwaarden overschrijven met specifieke attributen, of de attributen weglaten en de instellingen aanpassen via het gebruiksvriendelijke instellingenpaneel.

Attribuut	Beschrijving
aspect-ratio	Standaard `16/9`, maar je kunt elke gewenste beeldverhouding instellen.
width	In plaats van een beeldverhouding kun je de breedte en hoogte in pixels opgeven.
height	In plaats van een beeldverhouding kun je de breedte en hoogte in pixels opgeven.
autoplay	Standaard `false`, maar je kunt `always` of `lazy` opgeven. Met `lazy` speelt de video alleen af wanneer deze in beeld is.
controls	Standaard `full`, maar je kunt ook `big`, `none` (geen interface) of een aangepaste lijst met bedieningselementen opgeven, met tokens zoals `airplay` en `cast`. Zie bedieningselementen.
color	Standaard transparant. Met een hexkleur kun je de kleur van de bedieningselementen wijzigen. Zie kleur.
opacity	Wanneer je een kleur opgeeft, kun je ook de dekking ervan instellen.
loop	Standaard `false`; voeg `loop` toe om de video te herhalen. Hiervoor is geen waarde nodig.
poster	Standaard wordt het eerste frame gebruikt wanneer je niets instelt. Je kunt ook een absolute URL naar een andere bron opgeven.

Er zijn ook enkele attributen die je alleen op de component kunt instellen en niet via Beheer:

Attribuut	Beschrijving
embed (verplicht)	Verwijst naar een specifieke embed.
subtitles	Standaard wordt de oorspronkelijke taal gebruikt. Als die taal niet Engels is, wordt ook Engels toegevoegd. Je kunt ook een lijst met talen opgeven die in Beheer zijn gemaakt of toegevoegd, bijvoorbeeld `"en, nl"`, of `"none"` als je geen ondertiteling wilt tonen. Zie ondertiteling.
theme	Lees meer over thema’s in de documentatie.
quality	Standaard wordt de hoogst beschikbare kwaliteit gebruikt, 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`.
audiotracks	Bepaalt of de audiotrackselector wordt getoond. De standaardwaarde `auto` toont de selector alleen wanneer er meerdere audiotracks zijn. Stel dit in op `off` om de selector volledig te verbergen.

Methoden

Hoewel wij veel van het technische werk uit handen nemen, gedraagt de <mave-player />-component zich ongeveer als een <video />-component. Je kunt bijvoorbeeld .play() en .pause() in JavaScript gebruiken. Je kunt ook eventlisteners aan de speler koppelen. De speler activeert alle video-events, zoals timeupdate.

Methode/eigenschap	Beschrijving
play()	Speelt de video af wanneer deze is gepauzeerd.
restart()	Start de video opnieuw vanaf het begin.
pause()	Pauzeert de video wanneer deze wordt afgespeeld.
muted	Dempt de video of schakelt het geluid weer in (boolean).
paused	Geeft als boolean terug of de video wordt afgespeeld.
currentTime	Geeft de huidige afspeeltijd van de video terug of stelt deze in.
duration	Geeft een `Promise<number>` terug met de duur van de video als kommagetal.

Slots

Omdat we native webcomponents gebruiken, kunnen we met slots je HTML in de speler weergeven. Zo kun je je eigen knoppen of andere elementen op specifieke momenten en/of posities tonen. Bekijk onze blogpost voor een voorbeeld.

Slot	Beschrijving
end-screen	Wordt iedere keer getoond wanneer de video is `ended`.
start-screen	Wordt slechts één keer getoond, voordat de video wordt `playing`.