Menu Uno designsysteem 5.3.4

Video

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