In deze les neem ik de basis met je door om met mave aan de slag te gaan. Eerst bespreek ik wat je nodig hebt: een code-editor zoals Visual Studio Code en de materialen die we op GitHub beschikbaar hebben gesteld.
Daarna leg ik uit waarom je een mave-account nodig hebt. Of je nu inlogt op een bestaand account of een nieuw account aanmaakt: via dat account kun je zonder code te schrijven video's uploaden en beheren. Als voorbeeld maken we een videocursus voor een pizzabakker. Ik laat zien hoe je video's uploadt door ze simpelweg naar de mave-interface te slepen.
Zodra een video is geüpload, bespreek ik de belangrijkste onderdelen van de interface. Onder de videoplayer vind je de opties om video's in te sluiten. Daar kun je eenvoudig de insluitcode voor verschillende vormen, zoals een player of clip, kopiëren en plakken. Vervolgens bekijken we het onderdeel Metrics, met het actuele aantal kijkers en het totale aantal weergaven. Ook leg ik de uitvalgrafiek uit, die laat zien welke delen van de video het meest zijn bekeken. Tot slot bekijken we binnen dit gedeelte Pages: daar zie je op welke pagina's je video is ingesloten en hoe hij op iedere pagina presteert.
Als laatste vestig ik je aandacht op de verschillende opties rechts in de interface. Hiermee kun je onder meer de vormgeving van je videoplayer aanpassen en ondertitels instellen. mave kan automatisch ondertitels genereren, maar je kunt deze instellingen met attributen in je code ook overschrijven. Na deze les ken je de mave-interface en weet je hoe eenvoudig je video's online zet en nuttige statistieken verzamelt, zonder ook maar één regel code te schrijven.
Ontwikkelaar
David van Leeuwen is een webontwikkelaar met meer dan 15 jaar ervaring. Tijdens zijn carrière werkte hij samen met multidisciplinaire teams aan projecten voor gerenommeerde bedrijven als Sonos, WeTransfer en Red Bull.
David leidt momenteel de ontwikkeling van Mave en begeleidt je als mentor door deze cursus. Hij deelt graag zijn kennis en helpt je op weg met video-integratie.
1
2
3
4
5
<script type="module">
import { Player } from "https://cdn.video-dns.com/npm/@maveio/components/+esm";
</script>
<mave-player embed="ubg50Cq5Ilpnar1"></mave-player>
<script type="module">
import { Player } from "https://cdn.video-dns.com/npm/@maveio/components/dist/react.js";
</script>
<Player embed="ubg50Cq5Ilpnar1"></Player>
<script type="module">
import { Player } from "https://cdn.video-dns.com/npm/@maveio/components/+esm";
</script>
<mave-player embed="ubg50Cq5Ilpnar1"></mave-player>