Volledig met css aan te passen videospeler(s) - pagina 4

Afwijkingen ten opzichte van pagina 1:
Niet gebruikt: sleepbalk voor volume, snelheidsregeling, vijf seconden terug en vijf seconden vooruit, speelduur en verstreken speelduur. Voor de afbeeldingen zijn data-uri's gebruikt (zeg maar: afbeeldingen in de css). Volgorde en kleuren van de knoppen wijken af.
Omdat de volgorde van de knoppen op het scherm anders is dan die in de html, is in het JavaScript de tabindex aangepast (een hele simpele aanpassing).
Als een knop focus heeft, krijgt deze - naast de witte achtergrond - een blauwe outline.
Als de speelduur van de video nog onbekend is, is de achtergrond van nog niet bruikbare knoppen oranje.
Omdat de knoppen voor geluid en beeld niet als groep bij elkaar staan, is met behulp van een eenvoudig script onderaan de pagina een kleine aanpassing aan enkele ARIA-roles aangebracht.
Afwijkingen van afzonderlijke video's:
Bij de tweede video is de besturing alleen zichtbaar na aanraken van of klikken op 'Toon besturing'. Bij nogmaals aanraken of klikken verdwijnt de besturing weer. De besturing staat hier over de video heen. Deze besturing kan ook worden getoond en verborgen met sneltoets 7.
De derde video zet resterende tijd en totale speelduur voor de downloadlink, gescheiden door een schuin streepje.
De vierde video heeft ronde knoppen. Als de speelduur van de video nog onbekend is, hebben de nog niet bruikbare knoppen een rode outline.
De vijfde video heeft ook ronde knoppen. De verstreken tijd wordt voor de sleepbalk gezet, de resterende erachter.