Share
In deze zelfstudie leert u hoe HTML5 u verschillende manieren biedt om uw media-inhoud aan gebruikers te presenteren. Als gevolg hiervan vergroot u de beschikbaarheid van uw media voor gebruikers met verschillende
behoeften en vereisten, waardoor het toegankelijker wordt.
Deze zelfstudie is afkomstig van het onlangs verschenen HTML5 Multimedia-boek.
Ik moedig je sterk aan om na te denken over het toegankelijk maken van je inhoud ...
Als u denkt aan de gebruikers die proberen uw mediacontent te bekijken, kunt u een aantal aannames doen:
Alle zijn redelijk redelijke veronderstellingen om te maken en waarschijnlijk betrekking op de overgrote meerderheid van gebruikers die willen toegang tot uw inhoud. U bent misschien blij dat uw inhoud alleen toegankelijk is voor deze gebruikers; immers, meerderheidsregels, nietwaar??
Ik raad u aan om na te denken over het toegankelijk maken van uw inhoud voor gebruikers die niet vallen onder de categorie van de zojuist genoemde veronderstellingen. Wie zijn deze kijkers? Ze bevatten:
Omdat de meeste media-inhoud meestal wat audio bevat, is het niet mogelijk om de audio die het bevat te horen of te begrijpen. Het is een flinke showstopper om de boodschap en informatie van de inhoud te begrijpen.
Evenzo zou toegang tot de inhoud via een apparaat zoals een schermlezer, maar dan niet in staat zijn om het feitelijk te gebruiken als gevolg van het niet op de juiste wijze instellen van de mediabedieningselementen (bijvoorbeeld voor toegang tot het toetsenbord) elke gebruiker irriteren.
U zult later in deze zelfstudie de toegankelijkheid van mediabediening onderzoeken. U zult ook eens kijken naar wat HTML5 naar de tafel brengt in een poging het probleem aan te pakken van gebruikers die uw media-inhoud niet kunnen zien, horen of begrijpen. Maar laten we eerst even kijken naar wat leidde tot de poging van HTML5 om dit toegankelijkheidsprobleem aan te pakken: SRT.
SRT is een bestaand bestandsformaat voor het bevatten van video-ondertitels en hun timing.
SRT is een bestaand bestandsformaat voor het bevatten van video-ondertitels en hun timing. Een SRT-bestand wordt vaak automatisch geproduceerd met behulp van een Windows-programma genaamd SubRip, dat optische tekenherkenning (OCR) gebruikt om de ondertitels van de opgegeven videobron te verkrijgen.
Het SubRip-bestandsformaat is een basistekstbestand met de bestandsextensie .STR met een basisindeling:
Elke ondertitelingsset begint met een uniek ondertitelingsnummer, gevolgd door de start- en eindtijdstempels van de timing die de ondertitel op een afzonderlijke regel weergeeft, gevolgd door een of meer regels met ondertiteltekst. Elke volgende ondertitelingsset wordt gescheiden door een lege regel. Het tijdstempelformaat hh: mm: ss, msmsms geeft de uren, minuten, seconden en milliseconden van de betreffende tijd aan. Merk op dat het milliseconde scheidingsteken een komma is.
Een voorbeeld van een dergelijk bestand volgt:
1 00: 00: 10,500 -> 00: 00: 13,000 Elephant's Dream 2 00: 00: 15,000 -> 00: 00: 18,000 Links zien we ...
Het SRT-bestandsformaat is vrij populair en is vaak het formaat waarin video-ondertitels worden vrijgegeven. Dit bestandsformaat wordt momenteel niet gebruikt als onderdeel van de poging van HTML5 om de toegankelijkheid aan te pakken, hoewel het om te beginnen maar nu is uitgebreid en een nieuwe naam, WebVTT.
WebVTT (Web Video Text Tracks) is een bestandsindeling die is bedoeld voor het markeren van externe teksttracks. Het was in eerste instantie onderdeel van de WHATWG- en de W3C HTML5-specificaties en was een uitbreiding van SRT met de naam WebSRT (Web Subtitle Resource Tracks). Maar het W3C was bezorgd dat HTML5 onafhankelijk zou moeten zijn van een gekozen captioning-formaat en daarom werd het uit die specificatie verwijderd.
Opmerking: hoewel de SRT in WebSRT staat voor ondertitelingsbrontracks, stond het oorspronkelijke acroniem niet voor iets en reflecteerde het alleen
de gebruikte bestandsextensie. WebSRT is een "backronym"; subtitle resource Tracks is in de drie letters met schoenen gehangen om daadwerkelijk iets te betekenen.
De aanwezigheid van WebVTT is momenteel een belangrijk verschil tussen de WHATWG HTML5-specificatie en de W3C-specificatie.
Hoewel geen browser momenteel WebVTT ondersteunt, hebben grote browserleveranciers aangegeven dat ze in de toekomst ondersteuning voor WebVTT zullen implementeren. Deze indicatie heeft geleid tot de oprichting van een WebVTT Working Group Charter op het W3C, waarvan de missie is om:
"Maak een W3C-specificatie uitgaande van de WHATWG WebVTT-taal (Web Video Text Tracks) en maak deze vast door een WebVTT-testsuite te maken en door semantische toewijzingen van andere ondertitelformaten naar of van WebVTT te maken om de browserimplementatie te vergemakkelijken en marktacceptatie. "
Deze belofte van leveranciersondersteuning zal hopelijk op zijn beurt uiteindelijk leiden tot een formele standaardisatie van de WebVTT-specificatie op het W3C. Met browserondersteuning en die van de W3C, kunt u er zeker van zijn dat WebVTT er is om te blijven en wordt het de facto de methode voor het markeren van teksttracks in audio- en video-inhoud op het web.
Dus wat is het WebVTT-bestandsformaat en hoe kan het u helpen uw inhoud toegankelijk te maken? Lees verder.
Met het WebVTT-formaat kunt u ook een tekstuele beschrijving van de video-inhoud geven
U gebruikt de WebVTT-bestandsindeling om WebVTT-bestanden te definiëren. Een van de belangrijkste toepassingen van deze bestanden is om ondertitels aan video-inhoud te geven, hoewel het formaat van het bestand niet aangeeft waarvoor de inhoud wordt gebruikt.
Met het WebVTT-formaat kunt u ook een tekstuele beschrijving van de video-inhoud verstrekken, die vervolgens kan worden gebruikt door verschillende toegankelijkheidsapparaten (die de beschrijvingen hardop kunnen lezen) om de inhoud van de video te beschrijven voor degenen die het niet kunnen zien. U informeert de browser over het WebVTT-bestand en het doel ervan met behulp van HTML-markup; je zult later ontdekken hoe dit wordt gedaan in deze tutorial, wanneer je leest over het track-element.
Laten we het WebVTT-bestandsformaat in meer detail bekijken.
Een WebVTT-bestand is een eenvoudig tekstbestand met de extensie .vtt die een gespecificeerd formaat moet volgen, waar u binnenkort naar zult kijken. Het bestand moet zijn gecodeerd als UTF-8 en zijn gelabeld met het MIME-type text / tt. De regeleindregelaars in het bestand kunnen alleen \ r (een regelterugloop), \ n (een nieuwe regel) of \ r \ n (een regelterugloop gevolgd door een nieuwe regel) zijn. Het moet ook een WebVTT-bestandsstructuur bevatten die bestaat uit het volgende:
WEBVTT [keu] [keu] ...
De WEBVTT-tekenreeks bovenaan identificeert de inhoud als een WebVTT-bestand en moet vervolgens worden gevolgd door ten minste één lege regel, gevolgd door een willekeurig aantal cues, waarvan elk wordt gescheiden door een lege regel.
Een cue wordt gedefinieerd als:
[idstring] [hh:] mm: ss.msmsms -> [hh:] mm: ss.msmsms [cue-instellingen] TextLine1 TextLine2 ...
IDString is een unieke ID binnen het bestand die de cue identificeert. Het kan uit een of meer tekens bestaan die de substring "->" of een van de eerder genoemde terminators niet bevatten. [Hh:] mm: ss.msmsms -> [hh:] mm: ss.msmsms geeft de tijdstempel aan bereik binnen het videobestand waarop de cue is opgegeven. [hh:] mm: ss.msmsms is een eenvoudige tijdstempel, het uurgedeelte is optioneel (afhankelijk van de lengte van de video in kwestie natuurlijk).
Opmerking: de milliseconde scheidingstekens zijn volledige registers, geen komma's zoals in SRT.
cue-instellingen laten je toe om de positionering van de tekst te specificeren; je zult zo meteen meer over ze lezen.
TextLineN is de feitelijke tekst in het videobestand die het tijdstempelbereik in de keu vertegenwoordigt. De inhoud kan allemaal op één regel staan of in een aantal afzonderlijke regels worden weergegeven. Alle regels worden opgenomen in de cue totdat een lege regel wordt gevonden, die het einde van die bepaalde cue aangeeft.
Laten we een kort voorbeeld bekijken van een WebVTT-bestand met twee tijdstempelbereiken:
WEBVTT 1 00: 00: 10.500 -> 00: 00: 13.000 Elephant's Dream 2 00: 00: 15.000 -> 00: 00: 18.000 Aan de linkerkant kunnen we zien ...
Dit voorbeeld definieert twee cues: de eerste start 10 seconden en 500 milliseconden in de video en eindigt 13 seconden in, en de tweede begint 15 seconden in de video en eindigt 3 seconden later. De ondertitelingstekst voor elke keu wordt onder zijn tijdstempel gegeven.
Het gebruik van cues is relatief eenvoudig en je kunt zien hoe het bestand kan worden opgebouwd met een aantal aanwijzingen om de lengte van een hele video te dekken. U kunt ook een aantal instellingen opgeven per per cue. Deze beïnvloeden de positionering van de keu op de gerelateerde video. U kunt een aantal instellingswaarden hebben en een cue-instelling kan een of meer waarden bevatten, waarvan elke door een spatie wordt gescheiden. De verschillende instellingen worden hieronder vermeld:
Als er geen cue-instellingen zijn opgegeven, wordt de tekst uitgelijnd met het midden, onder aan het videoframe.
Laten we enkele van deze instellingen toevoegen aan het eerder gebruikte voorbeeld:
WEBVTT 1 00: 00: 10.500 -> 00: 00: 13.000 A: start Elephant's Dream 2 00: 00: 15.000 -> 00: 00: 18.000 A: einde L: 10% Aan de linkerkant kunnen we zien ...
De tekst in de eerste cue wordt uitgelijnd aan de linkerkant van de video (op dezelfde manier als de CSS-regel text-align: left works).
Aan de tweede cue zijn twee instellingen toegepast: de tekst wordt uitgelijnd aan het einde van de regel (vergelijkbaar met text-align: right in CSS) en wordt op de regel 10 procent onder aan de video geplaatst.
Naast het specificeren van cue-instellingen voor het bepalen van de positionering en uitlijning van cue-tekst, zijn er ook een aantal inline-stijlen die u op de tekst kunt toepassen. Deze zien eruit en handelen hetzelfde als HTML-elementen. Ze bevatten een begin- en een eindtag en de opmaak wordt toegepast op de tekst daartussenin.
Laten we het voorbeeld verder uitbreiden en enkele tekstlabels gebruiken om de cue-tekst te formatteren:
WEBVTT 1 00: 00: 00.000 -> 00: 00: 14.999 Elephant'sDroom 2 00: 00: 15.000 -> 00: 00: 18.000 A: einde L: 10% Op de links we kunnen zien... 3 00: 00: 18.167 -> 00: 00: 22.000 Aan de rechterkant <00:00:20.000>we kunnen de ... zien
Bij de eerste cue is een klassenaam van 'dream' toegevoegd, een stijl waarvoor u in uw HTML-bestand kunt definiëren op dezelfde manier als u CSS-stijlregels zou maken.
Opmerking: CSS-klassenamen die u in uw WebVTT ondertiteldefinities zou kunnen gebruiken, kunnen op dezelfde manier worden gedefinieerd in het bevattende HTML-bestand of een extern CSS-bestand als u andere css-klassen zou opgeven.
De tweede cue heeft nu tags die het woord "left" cursief en "see" vetgedrukt weergeven.
Aan dit voorbeeld is een extra cue toegevoegd om aan te geven hoe de tijdstempel wordt gebruikt om de tekst "karaoke-stijl" weer te geven. Wanneer de cue start, verschijnen eerst de woorden "Aan de rechterkant". Dan wordt de tekst "we can see ..." weergegeven op het juiste tijdstempel (Figuur 8.6).
Opmerking: als u wilt dat de tekens &, verschijnen in de tekst van een video-cue, moet u eraan ontsnappen
&<en>respectievelijk.
Het is vermeldenswaard dat omdat het WEBVTT-bestandsformaat relatief nieuw is voor de specificatie en met de recente oprichting van het WEBVTT werkgroephandvest, toevoegingen aan de specificatie waarschijnlijk zijn.
Als u op de hoogte wilt blijven van wijzigingen in deze specificatie, houdt u de site van het werkgroepcharter en de blog van Silvia Pfeiffer, die momenteel redacteur is van het werkgroephandvest, in de gaten. Silvia blogt ook regelmatig over HtML5-gerelateerde toegankelijkheidsonderwerpen.
U kunt zien hoe het volledige verhaal in een video kan worden toegevoegd aan een WebVTT-tekstbestand met opmaak en styling.
Maar hoe verbind je een WebVTT-bestand met een bepaalde video? Dit is waar het nieuwe HTML5-trackelement in komt.
Het trackelement is een van de nieuwe HTML5-elementen. Het doel is om externe teksttracks toe te staan voor media-elementen, zoals audio en video. Het baanelement vertegenwoordigt niets op zichzelf en moet worden gebruikt in combinatie met en als een kind van een media-element.
Het spoorelement heeft een aantal kenmerken, die hieronder worden vermeld:
Het volgende voorbeeld laat zien hoe een trackelement kan worden gebruikt in verband met een video om ondertitels te bieden:
Het trackelement in het voorbeeld geeft aan dat het bestand en.vtt Engelse ondertitels bevat (zoals het label zegt) in de Engelse taal (srclang is ingesteld op en) van de soort: ondertitels voor het omringende video-element. Aan de hand van dit voorbeeld kunt u zien hoe eenvoudig het is om een tweede ondertitelingsbestand toe te voegen dat zich mogelijk in een andere taal bevindt:
Hier is een andere spoordefinitie toegevoegd, wijzend op een de.vtt-bestand dat Duitse ondertitels bevat; srclang ingesteld op de.
Merk op dat het standaardkenmerk is toegevoegd aan de definitie van Engelse ondertitels en markeert het als de standaard ondertitel set die moet worden gebruikt als de gebruiker niet specifiek een ondertitel selecteert.
Als u het voorbeeld verder wilt uitbreiden en een hoofdstukoverzicht in elke taal wilt toevoegen (Engels en Duits), doet u het volgende:
Zodra de verschillende WebVTT-bestanden met de gewenste inhoud zijn gemaakt, is het een vrij eenvoudig proces om ze aan de juiste video toe te voegen.
Alles wat je zojuist over WebVTT hebt gelezen, klinkt allemaal best veelbelovend; Hoewel sommige browsers het trackelement tot op zekere hoogte ondersteunen, ondersteunt momenteel geen browser de WebVTT-bestandsindeling.
Opmerking: op het moment van dit schrijven heeft de Webkit (waarop chroom en safari zijn gebaseerd) elke avond een beetje ondersteuning voor WebVTT.
Alles is echter niet verloren, omdat er verschillende JavaScript-bibliotheken beschikbaar zijn waarmee u vandaag WebVTT kunt gaan gebruiken.
Een klein aantal browsers ondersteunt het baanelement enigszins. De nieuwste WebKit-browsers (bijvoorbeeld Chrome 12 en Safari 5.0.5) herkennen het element, maar doen er niets mee. De huidige versie van Firefox (5) parseert het element maar doet er ook niets mee. Hoewel deze browsers stappen in de goede richting zetten, helpen ze u niet echt om WebVTT nu te implementeren.
Update (19 maart 2012): Internet Explorer 10 Voorbeeld 4 en hoger parseert het spoorelement en geeft WebVTT weer. Het is nu ook beschikbaar in Google Chrome (moet worden ingeschakeld via chrome: flags - "Enable
element").
Gelukkig bieden vier JavaScript-bibliotheken u de mogelijkheid om het trackelement met WebVTT-bestanden in uw webdocument te definiëren, zodat u krijgt wat u wilt:
Hoewel slechts een handvol JavaScript-spelers WEBVTT ondersteunen, ondersteunen een aantal van hen JavaScript-ondertitelingsbestanden. de spelers die WebVtt ondersteunen (Playr, LeanBack, Captionator en MediaElementJS) ondersteunen ook SRT naast het volgende dat alleen ondersteuning biedt voor SRT:
Geen van deze bibliotheken biedt ondersteuning voor alle verschillende waarden voor het soortkenmerk van het trackelement: ze ondersteunen alleen de ondertitelwaarde (Playr ondersteunt ook de hoofdstukwaarde). Omdat ondertitels een van de belangrijkste waarden zijn, is het een goed begin. Met deze ondersteuning kun je ondertitels nu aan je video's toevoegen en ze in actie zien.
Laten we eens kijken hoe u de Playr JavaScript-bibliotheek kunt gebruiken om ondertitels en hoofdstukken aan een video toe te voegen.
Om Playr te gebruiken, moet u het eerst downloaden van de Playr-downloadwebsite. Eenmaal gedownload, moet u het Playr CSS-bestand en JavaScript in uw webdocument opnemen:
Wanneer je je video definieert, voeg je gewoon de CSS-klasse "playr_video" toe aan je video-element en wordt Playr automatisch voor die video gebruikt.
Een voorbeeld van Playr met een korte animatiefilm genaamd Elephant's Dream (© copyright 2006, Blender Foundation, Nederlands Media Art Institute, www.elephants dream.org) is hier beschikbaar.
De code die voor deze video wordt gebruikt, is als volgt:
Ook worden drie trackelementen gebruikt om naar Engelse en Duitse ondertitels en Engelse hoofdstukken te verwijzen.
Opmerking: Playr ondersteunt momenteel niet meerdere hoofdstukbestanden of het standaardkenmerk, maar zal dit in een toekomstige versie doen.
Met Playr's menu kunnen kijkers kiezen voor Engelse en Duitse ondertitels plus hoofdstukken. 
Ondertitels zijn geplaatst 6 procent vanaf de bovenkant (met L: 6%) en vetgedrukt met 
Accentsconagua
Dezelfde video met Duitse ondertitels gekozen. 
Een voorbeeld van hoe hoofdstukselectie eruit ziet in Playr. Playr is een handige videospeler en de mogelijkheid om ondertitels en hoofdstukken weer te geven is erg handig. Ondersteuning voor de andere soorten inhoud van het trackelement is gepland, dus net als andere beschikbare videospelers zal het blijven verbeteren.
Een ander belangrijk onderdeel van het toegankelijk maken van media-inhoud zijn de bedieningselementen. Vervolgens leer je hoe toegankelijk de standaardspelers zijn en wat kun je doen om je eigen aangepaste besturingselementen toegankelijker te maken.

Het is vrij belangrijk voor toegankelijkheid dat de bedieningselementen voor media toegankelijk zijn via het toetsenbord.
Zoals eerder vermeld, is het voor toegankelijkheid van groot belang dat de bedieningselementen voor media via het toetsenbord toegankelijk zijn. Browsers hebben hun eigen set besturingselementen voor media-elementen, maar hoe toegankelijk zijn ze van het toetsenbord? Helaas is het antwoord op dit moment niet erg. Opera lijkt de enige browser te zijn waarvan de standaardbesturingsset direct toegankelijk is vanaf het toetsenbord. U kunt eenvoudig van het ene besturingselement naar het andere tikken, gebruik de Return-toets om de afspeel- / pauzeknop in te schakelen en gebruik de pijltoetsen om de zoekbalk en volumeregeling te regelen.
Dus als u uw mediacontent volledig toegankelijk wilt maken in alle moderne browsers, moet u uw eigen aangepaste besturingselementen implementeren.
U hebt het HTML-knopelement al gebruikt om bijna alle besturingselementen te implementeren. Het gebruik van knopelementen verhoogt direct de toegankelijkheid van de bedieningselementen omdat het knopelement automatisch toegankelijk is vanaf het toetsenbord. Dat feit alleen al maakt het toetsenbord voor aangepaste bediening toegankelijk. Omdat de bedieningselementen ook in dezelfde volgorde worden weergegeven als ze op de speler worden weergegeven, bevindt hun tabvolgorde zich ook vrijwel in de vereiste logische volgorde. Het is echter mogelijk dat u de tabbladvolgorde van de voortgangsbalk en de knop Afspelen / Pauzeren wilt wijzigen. Hoogstwaarschijnlijk willen gebruikers eerst de video afspelen, dus die knop moet het eerste besturingselement zijn waartoe ze toegang hebben.
U kunt de tabvolgorde van HTML-besturingselementen opgeven met behulp van de tabindex attribuut. De volgorde die door dit attribuut wordt gespecificeerd, is de volgorde die de browser op het toetsenbord zal aangeven. Dus u past een toe tabindex van 1 tot de knop Afspelen / pauzeren en 2 tot de voortgangsbalk en pas vervolgens de volgende tabindexen toe in de volgorde waarin ze in de bron voorkomen:
In deze codelijst, de
bij klikken()evenementen zijn kortheidshalve weggelaten.
Het bereikelement zou ideaal zijn om als voortgangsbalk te gebruiken als de ondersteuning beter was omdat het ook automatisch toegang tot het toetsenbord biedt en de zoekbalk via het toetsenbord zou werken (de op en neer-toetsen zouden de zoekactie omschakelen als het element focus heeft) zonder eventuele verdere vereisten.
Omdat de knoppen automatisch toegankelijkheid bieden voor het toetsenbord, hoeft u nu alleen nog maar de voortgangsbalk te gebruiken, die een div en een reeks gebruikt.
U moet een gebeurtenislistener toevoegen voor de toets indrukken gebeurtenis, die wordt geactiveerd wanneer een toets wordt ingedrukt, en handel ernaar. U bent geïnteresseerd in slechts een druk op de voortgangsbalk, zodat het evenement alleen aan de voortgangsbalk wordt toegevoegd:
var progressBar = document.getElementById ("progressBar"); progressBar.addEventListener ("keypress", functie (e) checkKey (e.keyCode);, false); De functie die wordt aangeroepen wanneer een toets wordt ingedrukt, wordt opgeroepen controle sleutel() met een parameter die de numerieke code aangeeft van de toets die werd ingedrukt:
functie checkKey (code) if (code == 38) // pijltje omhoog video.currentTime + = 0,5; else if (code == 40) // pijltje omlaag video.currentTime - = 0,5;
De controle sleutel() functie controleert eenvoudig de sleutelcode om te zien of het de pijl-omhoog (code 38) of de pijl-omlaag-toets (code 40) is. Afhankelijk van welke sleutel het is, wordt het currentTime-kenmerk van de video verhoogd of verlaagd met 0,05 (een willekeurige tijdswaarde, maar het lijkt een goede stap om de video vooruit of achteruit te verplaatsen).
En dat is het. De zoekmogelijkheden van de voortgangsbalk zijn nu toegankelijk via het toetsenbord met de pijltoetsen omhoog en omlaag als deze in focus is. Het eindresultaat maakt dat je aangepaste besturingselementen voor media veel toegankelijker zijn dan ze zouden zijn geweest.
Met betrekking tot de toegankelijkheid is HTML5 geavanceerd en uitgebreid van de oorspronkelijke definitie van het WebSRT-bestandsformaat naar WebVTT. Met browser-leveranciers die dit formaat wilden ondersteunen, werd een nieuwe W3C-werkgroep opgericht met de bedoeling om de WebVTT-specificatie voor browsers te formaliseren om te beginnen met ondersteunen. Dus hopelijk is browserondersteuning slechts een kwestie van tijd.
Hoewel native-ondersteuning momenteel onregelmatig is, kunt u bestaande JavaScript-bibliotheken gebruiken om ondertitels aan uw video's toe te voegen. Deze bibliotheken zullen ongetwijfeld hun functionaliteit en mogelijkheden in de toekomst vergroten.
Kortom, toegankelijkheid is een doel waar u aan moet denken bij het aanbieden van multimedia-inhoud aan uw gebruikers. Hoe meer gebruikers toegang hebben tot uw inhoud, hoe beter?
Bezoek de HTML5 Multimedia-website of koop het boek voor meer informatie!
