Video's worden getoond in een gestijlde variant van de Plyr videospeler. Hierdoor is de styling per browser hetzelfde, is de videospeler accessible, en voorzien van een hoop extra functies; zoals bijvoorbeeld het tonen van videos van YouTube of Vimeo.
Voorbeeld video
Download deze video
Uitgeschreven tekst
Een groot konijn stapt uit zijn hol.
Hij rekt zich uit, gaapt en wrijft in zijn ogen.
Structuur
Onder de videospeler dient een collapse groep te staan met 2 koppen:
Download deze video
In deze collapse dien je alle losse bestanden die gebruikt worden in de videospeler, aan te bieden ter download.
Uitgeschreven tekst
In het kader van accessibility dien je hier de gesproken tekst en belangrijke visuele content van de video te schrijven, zodat screenreaders de content van de video voor kunnen lezen en deze begrijpbaar is zonder de video te zien.
Javascript
De video speler maakt gebruik van javascript voor zijn werking. Daarvoor is het nodig de Video
class in te laden.
Daarnaast dient plyr.min.js ingeladen te zijn.
<script src="/uno/vendor/plyr/plyr.min.js"></script>
System.import('/uno/components/video/video.js').then(function (module) {
var player = new Video('#player');
});
Benodigde stylesheets
/uno/vendor/plyr/plyr.css
/uno/components/video/video.css