Video

[Rozerinay]

We willen graag meer leren over de Video component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Video

Doel

Video met bedieningselementen voor afspelen, pauzeren, tekstalternatieven, en meer.

Ook bekend als

Video Player, Media Player

Gerelateerde componenten

Youtube Video, Figure

Onderzoek

Accessible multimedia - MDN docs
Artikel waarin wordt beschreven dat het native HTML video element niet toegankelijk genoeg is en hoe je hier textuele alternatieve voor kan aanbieden.

Browser video players review - Adrian Roselli
Adrian Roselli test de toegankelijkheid van het native HTML <video> element. Dat doet hij onder andere voor toetsenbord, schermlezer, stembediening en 'forced colors'. Sowieso heeft Adrian veel geschreven over Video en toegankelijkheid

Accessible HTML5 Media Players & Resources - Digita11y
Verzameling van toegankelijke mediaplayers en richtlijnen.

Notities

Deze notities van @Robbert zijn overgezet uit uit Backlog issue:

• De video player moet een tekstalternatief kunnen hebben in expandable region, bijvoorbeeld met een transcriptie.
• De labels in de user interface moeten beschikbaar zijn in de taal van de pagina, dus de player moet een mogelijkheid hebben om UI labels te vertalen.
• De labels van de buttons moeten passen bij de actie. Bij toggle buttons moeten aria-label aangepast worden wanneer ze pressed zijn:
  • Play/pauze: "Afspelen" vs "Pauzeer"
  • Fullscreen: "Schermvullende weergave openen"
  • Ondertitels: "Ondertiteling aan" vs "Ondertiteling uit"
  • Descriptive audio track: "Audiobeschrijving afspelen" vs "Audiobeschrijving stoppen"
  • Video description: "Gebarentaal tonen" vs "Gebarentaal verbergen"
• Toggle buttons moeten aria-pressed hebben, bijvoorbeeld:
• Onderzoeken of pressed toggle buttons met een aangepast label duidelijk zijn:
  • toggle button, pressed, Pauzeer
  • toggle button, pressed, Ondertiteling uit
  • toggle button, pressed, Audiobeschrijving stoppen
  • toggle button, pressed, Gebarentaal verbergen
• Onderzoeken of tooltips nodig zijn voor icon buttons, in plaats van title attribuut.
• Vermijd de title attribuut, daarvan kan de tooltip over de video heen staan zonder dat de button focus heeft.
• Keyboard shortcuts zonder modifier keys mogen alleen werken als iets de bijbehorende button focus heeft. Bijvoorbeeld M als de mute button focus heeft. Naar aanleiding van dit artikel: Keyboard shortcuts need modifier keys
• Icon buttons moeten minimaal 24x24 of 48x48 zijn, afhankelijk van WCAG versie
• Spatie button moet wel toggle buttons bedienen, niet video pauzeren (stopPropagation()).
• Spatie button: op welke plekken mag de spatie button de video pauzeren? Overal in de video, of alleen wanneer de play button focus heeft? Hoe zit het in full screen modus?
• Hoe wordt de video duration beschikbaar voor screen reader gebruikers? Duration moet een misschien duidelijke onzichtbare description hebben: "Videoduur: 2:30". Misschien aria-describedby?
• Tekst description moet paragraphs gebruiken, zodat je kunt skippen of terugspoelen met screen readers.
• Video: moet de video in een figure staan?
• Moet video een titel hebben?
• Moet titel van de video in een heading of in een figcaption staan?
• Is het nodig dat de beschrijvende tekst direct na de video komt, voor de download links?
• Link in de documentatie naar een voorbeeld van toegankelijke download links.
• Icon buttons met zichtbare tekst moeten de tekst in het label hebben. Bijvoorbeeld: aria-label="Closed Captions (CC)".

Deze notities van @jeffreylauwers zijn overgezet uit uit Backlog issue:

• Niet enkel op kleur vertrouwen om de status van de video controls te communiceren.
• Moeten de 'controls' in beeld blijven bij full screen?
• Moeten de 'controls' een zichtbaar label hebben met het oog op spraakbediening?

[jeffreylauwers]

Amsterdam

Figma

---

Screenshots / Varianten

Figma

Muis uit

Muis in

'Player' met opvolgend: Pauze, Pauze en Replay

Voorbeeld met componenten Button en Detail als onderdeel van de Player

---

Notities

• Gevonden in een Branch met label 'Todo'.
• Er wordt gesproken over 'Muis uit' en 'Muis in'. Mijn vermoeden is dat dit interactie rondom 'hover' betreft.
• Opties beschikbaar voor:
  • Play, Pauze, Replay
  • Geluid: aan/uit
  • Tijdsindicatie: huidig + totaal
  • Progress: totaal, buffer, huidig + knob.
  • Ondertiteling: aan/uit
  • Volledig scherm: aan/uit
• Onder de video worden de opties voor 'Download' en 'Uitgeschreven tekst' aangeboden.

[jeffreylauwers]

DSO

Documentatie website

---

Screenshots / Varianten

Documentatie website

Default

Collapse 'Download deze video' expanded

Collapse 'Uitgeschreven tekst' expanded

---

Notities

• Documentatie beschikbaar.
• Opties beschikbaar voor:
  • Play, Pauze
  • Geluid: aan/uit + volumeregelaar
  • Tijdsindicatie: huidig + totaal
  • Progress: totaal + knob.
  • Ondertiteling: aan/uit
  • Volledig scherm: aan/uit
• Onder de video worden opties voor 'Download deze video' en 'Uitgeschreven tekst' aangeboden.
• Implementatie is op basis van https://plyr.io/

[jeffreylauwers]

OpenGemeenten

• Documentatie website
• GitHub - AccessibleMediaPlayer

---

Screenshots / Varianten

Documentatie website

Default

Tekstalternatief - Expanded

---

Notities

• Documentatie beschikbaar voor gebruik op een toegankelijke manier.
• Opties beschikbaar voor:
  • Play, Pauze, Replay
  • Tijdsindicatie: huidig + totaal
  • Progress: totaal, huidig, buffer + knob (bij hover).
  • Geluid: aan/uit + volumeregelaar
  • Ondertiteling: aan/uit
  • Audi descriptie: aan/uit
  • Gebarentaal: aan/uit
  • Volledig scherm: aan/uit
• Onder de video wordt een optie voor 'Tekstalternatief' aangeboden.

[martijnrietveld]

Je kunt in bovenstaande mediaplayer ook een link naar Youtube of Vimeo toevoegen. In dat geval wordt er automatisch toestemming voor externe bron gevraagd. Bij een externe bron kun je geen audiobeschrijving of gebarentaal toevoegen. Door deze oplossing is het niet meer nodig om op de homepage al toestemming te vragen voor cookies

[martijnrietveld]

https://componenten.lenteveld.nl/mediaplayer

[jeffreylauwers]

ICTU

Github: ICTU - Digitale Overheid WP - rijksvideoplugin

Videoplayer door Paul van Buuren

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Video op het Community bord