Er wordt wel eens beweerd dat video "niet mag van de Webrichtlijnen" Dat is een fabeltje. Wel dient videocontent op een website op een toegankelijke manier te worden aangeboden, zodat niemand wordt buitengesloten van toegang tot de informatie die door middel van video wordt overgebracht.

Inhoud

Ontwikkelingen

Wat video op het web betreft zijn de belangrijkste ontwikkelingen van de afgelopen jaren:

  • de ontwikkeling van het <video> element in HTML 5, en
  • de toenemende ondersteuning van een open, licentievrij videoformaat, WebM

Ondersteuning voor video in HTML 5

Met het <video>-element is het in technisch opzicht een stuk eenvoudiger geworden om video te publiceren op een webpagina. Belangrijke voordelen zijn dat voor het afspelen van video geen aparte browserplug-in meer nodig is en dat het eenvoudig is om ondersteuning voor toegankelijkheid toe te voegen. Ondersteuning voor <video> is aanwezig in de volgende browsers:

  • Apple Safari, vanaf versie 3.0
  • Firefox, vanaf versie 3.5
  • Google Chrome, vanaf versie 5.0
  • Microsoft Internet Explorer, vanaf versie 9.0
  • Opera, vanaf versie 10.5
  • (mobiel) Android, vanaf versie 2.0
  • (mobiel) iOS, vanaf versie 3.0

Videoformaten

<video> ondersteunt meerdere videoformaten. Bestanden in verschillende formaten kunnen gelijktijdig in het <video> worden opgenomen; het eerste formaat dat de browser herkent wordt vervolgens gebruikt. Nu is dat wel nodig ook, want er is niet één formaat dat door alle in de vorige alinea genoemde genoemde browsers wordt ondersteund. De twee belangrijkste formaten zijn H.264 en WebM.

H.264 is ook bekend onder de namen Advanced Viceo Coding (AVC) en MPEG-4 Part 10. Het is een officiële ISO-standaard en wordt veel gebruikt, maar voldoet vanwege licentierestricties niet aan de kenmerken van een open standaard, zoals gedefinieerd in Webrichtlijnen versie 2. Deze is gebaseerd op de definitie van open standaard van de Nederlandse overheid.

WebM is een specificatie waarvan de patenten in mei 2010 door Google ter beschikking werden gesteld op een royalty-free basis. WebM voldoet aan de kenmerken van een open specificatie.

Van de twee videoformaten ondersteunen de browsers van Apple en Microsoft standaard alleen H.264, terwijl Opera, Firefox en de producten van Google - Chrome en Android - alleen WebM ondersteunen. Om alle gebruikers van moderne browsers te kunnen bereiken zal videocontent dus minimaal in beide formaten moeten worden aangeboden.

Toegankelijkheid

Om zeker te stellen dat videocontent voor iedereen toegankelijk is, dus ook voor mensen met een visuele of auditieve beperking, is van belang dat informatie die alleen door middel van beeld wordt overgebracht gelijktijdig ook via geluid beschikbaar is. En dat informatie die alleen door middel van geluid wordt overgebracht gelijktijdig ook via beeld beschikbaar is.
In HTML-code ziet het er als volgt uit, inclusief terugvalopties voor oudere browsers:

...
<video controls autoplay poster="video.png">
  <!-- referentie: http://www.w3.org/TR/html5/video.html#the-source-element -->
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <!-- referentie: http://www.w3.org/TR/html5/video.html#attr-track-kind -->
  <track kind="captions" src="captions.srt" srclang="nl" label="Ondertiteling">
  <track kind="descriptions" src="descriptions.vtt" srclang="nl" label="Audiospoor">
    <!-- Terugvaloptie in geval de browser HTML 5 niet ondersteunt -->
    <object type="application/x-shockwave-flash" data="flashvideoplayer.swf">
        <param name="movie" value="video.mp4">
        <param name="flashvars" value="controls=true&image=video.png&file=video.mp4&autostart=false&captions=video.srt&usecaptions=false&showcaptionbutton=true&audio=descriptions.mp3&useaudio=false&showaudiobutton=false">
            <!-- Tekst die wordt getoond als zowel Flash als HTML 5 niet worden ondersteund -->
           <p>Deze video is beschikbaar als downloadbaar bestand; zie hieronder</p>
    </object>
</video>

<ul>
<li>Download het videobestand: 
    <a href="video.webm">WebM-formaat</a> (10 Mb) / 
    <a href="video.mp4">MP4-formaat<a/> (10 Mb)</li>
<li><a href="captions.vtt">Download het ondertitelingsbestand</a> (10 Kb)</li>
<li><a href="desriptions.mp3">Download de Audiobeschrijving</a> (10 Kb)</li>
</ul>
...


Opmerking 1: Zolang de ondersteuning in HTML 5 van inschakelbare ondertiteling en aparte geluidssporen niet door alle browsers (even goed) wordt ondersteund, is het raadzaam om de nesting van <video> en <object> om te draaien. Dus beginnen met <object> en <video> toevoegen als terugvaloptie.

Opmerking 2: De in het voorbeeld toegepaste technologie voor het <object>-element is Flash. Softwaremaker Adobe heeft aangekondigd dat de volgende versie van Flash het WebM-formaat zal ondersteunen.

Opmerking 3: Als een video via het video-element wordt aangeboden wordt door de browser een bedieningspaneel toegevoegd om de video te starten en stoppen, het geluid te regelen en door de video te springen. Deze functionaliteit is niet altijd via de tabtoetsen bereikbaar en dus niet te bedienen via het toetsenbord. Dat is iets om rekening mee te houden, omdat daardoor een toegankelijkheidsprobleem wordt geïntroduceerd.

Terugvaloptie voor oudere browsers

Oudere browsers herkennen het <video>-element niet en zullen het dus negeren. Voor die browsers is het van belang om een terugvaloptie beschikbaar te hebben. De meest voor de hand liggende optie is om een videospeler als browserplug-in op te nemen in het <video>-element. Op die manier is de gebruikerservaring voor vrijwel elke bezoeker optimaal te maken, zonder dat de complexiteit van de oplossing er noemenswaardig door toeneemt. Van belang is wel om een videospeler te gebruiken die ondersteuning biedt voor ondertiteling en een apart audiospoor.

Tot slot is het aan te bevelen om de losse video-, onderttitelings- en audiospoorbestanden als downloadbare bestanden aan te bieden. In gevallen waarin de beschreven oplossing niet voorziet kunnen deze bestanden worden afgespeeld in een mediaspeler die is geïnstalleerd op het internetapparaat van de bezoeker.

Externe links