Volledig met css aan te passen videospeler(s) - overzicht

Pagina 1

Alle bedieningselementen gebruikt. Alleen op iOS: geen geluidsregeling. Binnen de knoppen zijn alleen gewone karakters uit een standaardfont gebruikt.
Als een knop focus heeft, is de achtergrond wit.
Als de speelduur van de video nog onbekend is, zijn nog niet bruikbare knoppen lichter van kleur.

Pagina 2

Algemene afwijkingen ten opzichte van pagina 1:
Niet gebruikt: snelheid, fullscreen, (voorlezen van) percentage volume, sleepbalk geluid, verstreken tijd, (voorlezen van) speelduur. Alleen op iOS: geen geluidsregeling. Voor de afbeeldingen in de knoppen is een webfont met symbolen gebruikt. De volgorde van de knoppen wijkt iets af.
Afwijkingen van afzonderlijke video's:
Hoogte, breedte, border en dergelijke van knop en balk van de sleepbalk variëren.
De eerste video heeft geen knop op de sleepbalk, maar de hele sleepbalk verkleurt tijdens het afspelen. Als de video speelt, pulseert de sleepbalk licht. Als de sleepbalk focus heeft, is de basiskleur van de sleepbalk oranje, anders lichtblauw.
De tweede video geeft links bovenaan en op de knop van de sleepbalk het percentage verstreken tijd aan.
De derde video heeft een smaller bedieningspaneel.
De vierde video heeft een knop op de sleepbalk, die niet helemaal tot links en rechts op de sleepbalk gaat.
De zesde video heeft een, in alle bescheidenheid, oogstrelend, artistiek, zeer verfijnd kleurenpalet in de sleepbalk.

Pagina 3

Algemene afwijkingen ten opzichte van pagina 1:
Niet gebruikt: snelheidsregeling en fullscreen. Ook op iOS is de geluidsregeling aanwezig, maar met een rood kruis erdoorheen, omdat die daar dus niet werkt. Voor de afbeeldingen in de knoppen is een achtergrond-afbeelding gebruikt. 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). Deze aanpassing geldt voor álle video's. Omdat echter niet bij alle video's op deze pagina de volgorde van de knoppen hetzelfde is, is bij de tweede, vierde en vijfde video de tabindex nogmaals aangepast, nu met een eenvoudig scriptje in de html. Op dezelfde manier zijn enkele ARIA-roles bij de eerste, tweede, vijfde en zesde video aangepast..
Afwijkingen van afzonderlijke video's:
De tweede video heeft wel fullscreen en snelheidsregeling (met radioknoppen), maar speelduur en afgespeelde tijd ontbreken. De volumesterkte staat op de knop van de sleepbalk.
De derde video heeft geen sleepbalk voor geluid en geen volumesterkte, maar wel een gedeeltelijke snelheidsregeling en fullscreen.
De vierde video heeft geen 5% verder, geen 5% terug en geen sleepbalken, maar wel wordt het percentage van de afgespeelde tijd weergegeven. Een aantal knoppen is hier gecombineerd tot ogenschijnlijk één knop, die in tweeën is gedeeld.
De vijfde video is hetzelfde als de tweede, maar het geluidsvolume ontbreekt en bij de snelheidsregeling zijn achtergrond-afbeeldingen zonder radioknoppen gebruikt.
De zesde video heeft afwijkende kleuren, zowel gewoon als bij focus.

Pagina 4

Algemene 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.
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. Om deze video te bereiken met een sneltoets kan beter de 7 worden gebruikt dan de 8.
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.

Pagina 5

Algemene afwijkingen ten opzichte van pagina 1:
Een aantal video's heeft geen snelheidsregeling.
Afwijkingen van afzonderlijke video's:
De eerste video geeft een tekst weer, die afhankelijk is van de ingestelde geluidssterkte.
De tweede video draait tijdens het afspelen rond.
De derde en vierde video hebben de snelheidregeling onder de andere knoppen staan. Omdat de volgorde van de knoppen (en bij de vierde video ook de volgorde van de links) afwijkt van die in de html, is met behulp van een heel simpel stukje JavaScript onderaan de html de tabindex aangepast.
De derde video heeft de besturing boven de video staan.
De vierde video heeft de besturing onder de links voor downloaden staan.
De vijfde en zesde video hebben de besturing rondom de video staan. De knop die focus heeft, is blauw omlijnd.
Bij de zesde video is de tabindex met behulp van een heel simpel stukje JavaScript onderaan de html aangepast. Deze videospeler slaat natuurlijk helemaal nergens op, maar het laat zien wat er in principe voor idiote dingen mogelijk zijn. Zodra de video gaat spelen, gedragen de knoppen zich trouwens weer op een manier die bij fatsoenlijk opgevoede knoppen past.