Share
În acest tutorial, veți afla cum vă ajută HTML5 să vă ofere mai multe moduri de prezentare a conținutului dvs. media utilizatorilor. În consecință, veți spori disponibilitatea suportului media pentru utilizatorii cu diferite
nevoilor și cerințelor, făcându-l mai accesibil.
Acest tutorial vine prin curtoazie de recent lansat HTML5 Multimedia carte.
Aș încuraja cu tărie să vă gândiți să faceți conținutul dvs. accesibil ...
Când vă gândiți la utilizatorii care vor încerca să vizualizeze conținutul dvs. media, puteți face o serie de ipoteze:
Toate sunt presupuneri destul de rezonabile pentru a face și cel mai probabil acoperă marea majoritate a utilizatorilor care vor dori să vă acceseze conținutul. S-ar putea să fiți mulțumit de conținutul dvs. fiind accesibil numai acestor utilizatori; după toate, reguli majoritare, nu-i așa??
Ei bine, v-aș încuraja cu tărie să vă gândiți să faceți conținutul dvs. accesibil utilizatorilor care nu intră în categoria ipotezelor enumerate. Cine sunt acești spectatori? Ei includ:
Deoarece majoritatea conținuturilor media vor include, de obicei, un anumit sunet, neputând să auziți sau să înțelegeți că sunetul pe care îl conține este destul de evident în înțelegerea mesajului și informațiilor conținutului.
De asemenea, posibilitatea de a accesa conținutul printr-un dispozitiv, cum ar fi un cititor de ecran, dar care nu îl poate utiliza efectiv din cauza faptului că controalele media nu sunt configurate corect (de exemplu, pentru accesul la tastatură), ar deranja orice utilizator.
Veți explora accesibilitatea controalelor media ulterior în acest tutorial. De asemenea, veți arunca o privire asupra a ceea ce aduce HTML5 la masă în încercarea de a aborda problema ca utilizatorii să nu poată vedea, auzi sau înțelege conținutul media. Dar, mai întâi, să examinăm rapid ceea ce a dus la încercarea HTML5 de a face față acestei probleme de accesibilitate - SRT.
SRT este un format de fișier existent pentru a conține subtitrările video și cronogramele acestora.
SRT este un format de fișier existent pentru a conține subtitrările video și cronogramele acestora. Un fișier SRT este adesea produs automat folosind un program Windows numit SubRip, care utilizează recunoașterea optică a caracterelor (OCR) pentru a obține subtitrările din sursa video specificată.
Formatul de fișier SubRip este un fișier text de bază cu extensia de fișier .srt care urmează un format de bază:
Fiecare set de subtitrare începe cu un număr unic de subtitrare urmat de timestamp-urile de început și de sfârșit ale timpului pe care subtitrarea îl reprezintă pe o linie separată, care este apoi urmată de una sau mai multe linii de text subtitrate. Fiecare set de subtitrări ulterioare este separat printr-o linie necompletată. Formatul marcajului de timp hh: mm: ss, msmsms specifică orele, minutele, secundele și milisecundele timpului în cauză. Rețineți că separatorul de milisecunde este o virgulă.
Un exemplu de astfel de dosar urmează:
1 00: 00: 10,500 -> 00: 00: 13,000 Visul Elefantului 2 00: 00: 15,000 -> 00: 00: 18,000 În stânga vedem ...
Formatul de fișier SRT este destul de popular și este adesea formatul în care sunt lansate subtitrările video. Acest format de fișier nu este utilizat în prezent ca o încercare de abordare a accesului la HTML5, deși a fost început, însă a fost extins și dat nume nou, WebVTT.
WebVTT (Web Video Text Tracks) este un format de fișier care este destinat marcării pistelor text externe. A fost inițial parte din specificațiile WHATWG și W3C HTML5 și a fost o extensie a SRT numită WebSRT (Web Subtitle Resource Tracks). Dar W3C era îngrijorat de faptul că HTML5 ar trebui să fie independent de orice format de subtitrare ales și, prin urmare, a fost eliminat din specificația respectivă.
Notă: chiar dacă SRT-ul din WebSRT înseamnă melodii pentru subtitrări Tracks, acronimul original nu a rezistat nimic și a reflectat doar
extensia de fișier utilizată. WebSRT este un "backronym"; resursele de subtitrari Tracks au fost pantofi cu coarda în cele trei litere pentru a însemna ceva de fapt.
Prezența WebVTT este în prezent o diferență majoră între specificația WHATWG HTML5 și specificația W3C.
Deși niciun browser nu acceptă în prezent WebVTT, furnizorii importanți de browser-i au indicat că vor implementa în viitor suport pentru WebVTT. Această indicație a condus la crearea unei Carte a Grupului de Lucru WebVTT la W3C, a cărei misiune este de a:
"Creați o specificație W3C pornind de la limbajul WHATWG WebVTT (Web Video Text Tracks) și solidificați-l prin crearea unei suite de testare WebVTT și prin crearea de mapări semantice ale altor formate de subtitrări către sau de la WebVTT pentru a facilita implementarea browserului și adoptarea pieței ".
Această promisiune a sprijinului vânzătorului va spera, la rândul său, în cele din urmă să conducă la o standardizare formală a specificației WebVTT la W3C. Cu suportul browserului și cel al W3C, puteți fi sigur că WebVTT este aici pentru a rămâne și este destinat să devină metoda de facto de marcare a pistelor text în cadrul conținutului audio și video de pe web.
Deci, ce este formatul de fișier WebVTT și cum vă poate ajuta să vă faceți accesibil conținutul? Citește mai departe.
Formatul WebVTT vă permite de asemenea să furnizați o descriere textuală a conținutului video
Utilizați formatul de fișier WebVTT pentru a defini fișierele WebVTT. Una dintre principalele utilizări ale acestor fișiere este de a furniza subtitrări conținutului video, deși formatul fișierului nu indică conținutul acestuia.
Formatul WebVTT vă permite, de asemenea, să furnizați o descriere textuală a conținutului video, care apoi poate fi utilizat de diverse dispozitive de accesibilitate (care ar putea citi descrierile cu voce tare) pentru a descrie conținutul videoclipului pentru cei care nu îl pot vedea. Informați browserul cu privire la fișierul WebVTT și la scopul acestuia prin utilizarea marcajului HTML; veți afla cum se face acest lucru mai târziu în acest tutorial, atunci când citiți despre elementul de piesă.
Să analizăm mai detaliat formatul de fișier WebVTT.
Un fișier WebVTT este un fișier text simplu cu extensia .vtt care trebuie să urmeze un format specificat, pe care îl veți uita la scurt timp. Fișierul trebuie codificat ca UTF-8 și etichetat cu text / tt de tip MIME. Terminatorii de linii din fișier pot fi doar \ r (retur de carriage), \ n (o linie nouă) sau \ r \ n (un retur de carieră urmat de o nouă linie). Acesta trebuie să conțină, de asemenea, un corp de fișier WebVTT, care constă din următoarele:
WEBVTT [cue] [cue] ...
Șirul WEBVTT din partea de sus identifică conținutul ca fișier WebVTT și trebuie apoi urmat de cel puțin o linie necompletată, care este apoi urmată de un număr de repere, fiecare dintre acestea fiind separat de o linie necompletată.
Un tac este definit ca:
[idstring] [hh:] mm: ss.msmsms -> [hh:] mm: ss.msmsms [setări cue] TextLine1 TextLine2 ...
idstring este un identificator unic în cadrul fișierului care identifică tacul. Acesta poate consta din unul sau mai multe caractere care nu conțin subcadrul "->" sau oricare dintre terminatoarele de linii menționate anterior. [Hh:] mm: ss.msmsms -> [hh:] mm: ss.msmsms indică timestamp (hh:] mm: ss.msmsms este un marcaj de timp simplu, porțiunea de ore este opțională (în funcție de lungimea videoclipului în cauză, desigur).
Notă: Separatoarele de milisecunde sunt opriri complete, nu virgule, ca în SRT.
setările cue vă permit să specificați poziționarea textului; veți citi mai multe despre ele într-un moment.
TextLineN este textul real din fișierul video pe care îl reprezintă intervalul marcajului de timp al indicelui. Conținutul poate fi într-o singură linie sau prezentat în orice număr de linii separate. Orice linii vor fi incluse în tac atunci când se întâlnește o linie necompletată, care indică sfârșitul acelui cue.
Să aruncăm o privire rapidă la un exemplu de fișier WebVTT care conține două intervale de timp:
WEBVTT 1 00: 00: 10.500 -> 00: 00: 13.000 Visul Elefantului 2 00: 00: 15.000 -> 00: 00: 18.000 În stânga vedem ...
Acest exemplu definește două indici: Primul pornește cu 10 secunde și 500 de milisecunde în videoclip și se termină la 13 secunde, iar al doilea începe cu 15 secunde în videoclip și se termină cu 3 secunde mai târziu. Textul subtitrare pentru fiecare indicație este dat sub marcajul de timp.
Folosirea reperelor este relativ simplă și puteți vedea cum poate fi creat fișierul cu un număr de repere pentru a acoperi durata întregului videoclip. De asemenea, puteți specifica anumite setări pe bază per-cue. Acestea afectează poziționarea indicelui pe videoclipul asociat. Puteți avea un număr de valori de setare, iar setarea cue poate conține una sau mai multe valori, fiecare separată de un spațiu. Diferitele setări sunt enumerate mai jos:
Dacă nu sunt specificate setări tactice, textul se va alinia la mijloc, în partea de jos a cadrului video.
Să adăugăm câteva dintre aceste setări la exemplul utilizat anterior:
WEBVTT 1 00: 00: 10.500 -> 00: 00: 13.000 A: începe visul Elefantului 2 00: 00: 15.000 -> 00: 00: 18.000 A: sfârșitul L: 10%
Textul din primul tac va fi aliniat la stânga videoclipului (la fel ca și regula CSS text-align: stânga funcționează).
Al doilea tac are două setări aplicate: textul va fi aliniat la sfârșitul liniei (similar cu text-align: right în CSS) și va fi plasat pe linie cu 10% mai jos în partea de sus a videoclipului.
În plus față de specificarea setărilor cue pentru a controla poziționarea și alinierea textului cue, există și un număr de stiluri inline pe care le puteți aplica textului. Acestea arată și acționează la fel ca elementele HTML. Acestea conțin o etichetă de început și un sfârșit, iar formatul este aplicat textului între ele.
Să extindem exemplul mai departe și să folosim unele dintre etichetele text pentru a formata textul cue:
WEBVTT 1 00: 00: 00.000 -> 00: 00: 14.999 ElefanțiiVis 2 00: 00: 15.000 -> 00: 00: 18.000 A: sfârșitul L: 10% La stânga noi putem vedea... 3 00: 00: 18.167 -> 00: 00: 22.000 În dreapta <00:00:20.000>putem vedea ...
Cu primul tac, a fost adăugat un nume de clasă de "vis", un stil pentru care puteți defini în fișierul HTML în același mod în care ați crea orice reguli de stil CSS.
Notă: toate denumirile de clase CSS pe care le-ați putea utiliza în cadrul definițiilor de subtitrare WebVTT pot fi definite în fișierul HTML care conține sau într-un fișier css extern în același mod în care ați specifica orice alte clase CSS.
Al doilea cue are acum etichete care vor afișa cuvântul "stânga" în caractere italice și "vezi" cu caractere aldine.
În acest exemplu este adăugat un cue supliment pentru a arăta modul în care se utilizează marcajul de timp pentru a afișa textul "stil karaoke". Când se începe cuvântul, vor apărea mai întâi cuvintele "În partea dreaptă". Apoi, textul "putem vedea ..." va fi afișat la momentul potrivit (Figura 8.6).
Notă: dacă doriți ca caracterele &, să apară în textul unei indicații video, trebuie să le scăpați
&<și>respectiv.
Este demn de remarcat faptul că, deoarece formatul de fișier WEBVTT este relativ nou față de specificație și cu recenta creare a Cartei Grupului de Lucru WEBVTT, adăugările la specificație sunt probabile.
Dacă doriți să fiți informat cu privire la orice modificare a acestei specificații, țineți cont de site-ul Cartei grupurilor de lucru și de blogul lui Silvia Pfeiffer, care este în prezent editorul Cartei grupurilor de lucru. Silvia bloguri, de asemenea, în mod regulat despre subiecte legate de accesibilitatea legate de HtML5.
Puteți vedea cum narațiunea completă dintr-un videoclip poate fi adăugată la un fișier text WebVTT cu formatare și stil.
Dar cum conectați un fișier WebVTT cu un anumit videoclip? Aici intră noul element de urmărire HTML5.
Elementul de piesă este unul dintre noile elemente HTML5. Scopul său este de a permite ca melodiile text externe să fie specificate pentru elementele media, cum ar fi audio și video. Elementul de pista nu reprezinta nimic singur si trebuie folosit in combinatie cu un element media si ca un copil.
Elementul de pistă are un număr de atribute, care sunt enumerate mai jos:
Următorul exemplu arată modul în care un element de pistă poate fi utilizat în legătură cu un videoclip pentru a furniza subtitrări:
Elementul de piesă din exemplu specifică faptul că fișierul en.vtt conține subtitrări în engleză (după cum spune eticheta) în limba engleză (srclang este setat la en) de tipul: subtitrări pentru elementul video din jur. Din acest exemplu, puteți vedea cât de ușor ar fi să adăugați un al doilea fișier de subtitrări care ar putea fi într-o altă limbă:
Aici a fost adăugată o altă definiție a piesei, care indică un fișier de.vtt care conține subtitrări în limba germană; srclang este setat sa de.
Observați că atributul implicit a fost adăugat definiției subtitrare în limba engleză, marcându-l ca set de subtitrare implicit pentru a fi utilizat în cazul în care utilizatorul nu selectează în mod specific unul.
Dacă doriți să extindeți mai departe exemplul și să adăugați o listă de capitole în fiecare limbă (engleză și germană), ați face următoarele:
Odată ce diferitele fișiere WebVTT au fost create cu conținutul dorit, este un proces destul de simplu de a le adăuga la videoclipul potrivit.
Tot ceea ce tocmai ați citit despre WebVTT sună destul de promițătoare; cu toate acestea, chiar dacă unele browsere acceptă într-o oarecare măsură elementul piesei, în prezent niciun browser nu acceptă formatul de fișier WebVTT.
Notă: la momentul acestei scrieri, construirea pe timp de noapte Webkit (pe care se bazează cromul și safari) are un suport pentru WebVTT.
Totuși nu este pierdut, deoarece există mai multe biblioteci JavaScript care vă permit să începeți să utilizați WebVTT astăzi.
Un număr mic de browsere acceptă într-o oarecare măsură elementul piesei. Cele mai recente browsere WebKit (de exemplu, Chrome 12 și Safari 5.0.5) recunosc elementul, dar nu fac nimic împreună cu acesta. Versiunea curentă a Firefox (5) analizează elementul, dar nu face nimic și cu acesta. Deși aceste browsere fac pași în direcția corectă, ei nu vă ajută cu adevărat să implementați WebVTT acum.
Actualizare (19 martie 2012): Internet Explorer 10 Preview 4 și mai sus analizează elementul piesei și redă WebVTT. De asemenea, este disponibil acum în Google Chrome (trebuie să fie activat prin intermediul cromului: steaguri - "Activați
element").
Din fericire, patru biblioteci JavaScript vă permit să definiți elementul piesei cu fișiere WebVTT în documentul dvs. web care va livra ceea ce doriți:
Deși doar o mână de jucători JavaScript suportă WEBVTT, un număr dintre ei suportă fișiere de subtitrări SRT. acei jucatori care sustin WebVtt (Playr, LeanBack, Captionator si MediaElementJS) sprijina, de asemenea, SRT in plus fata de urmatoarele care ofera suport doar pentru SRT:
Niciuna dintre aceste biblioteci nu oferă suport pentru toate valorile diferite ale atributului de gen al elementului de piesă: acestea acceptă doar valoarea subtitrării (Player acceptă, de asemenea, valoarea capitolului). Deoarece subtitrările sunt una dintre cele mai importante valori, este un început bun. De asemenea, acest suport vă permite să începeți acum adăugarea de subtitrări în videoclipurile dvs. și să le vedeți în acțiune.
Să ne uităm la modul în care puteți utiliza biblioteca JavaScript Playr pentru a adăuga subtitrări și capitole la un videoclip.
Pentru a utiliza Player, trebuie mai întâi să o descărcați de pe site-ul Web de descărcare Player. După descărcare, trebuie să includeți fișierul Playback CSS și JavaScript în documentul dvs. Web:
Când definiți videoclipul, pur și simplu adăugați clasa CSS "playr_video" la elementul dvs. video, iar Player va fi utilizat automat pentru acel videoclip.
Un exemplu de Playr cu un scurt film animat numit Visul Elefantului (© copyright 2006, Fundația Blender, Institutul de Artă Media din Olanda, www.elephants dream.org) este disponibil aici.
Codul utilizat pentru acest videoclip este următorul:
De asemenea, trei elemente de piste sunt folosite pentru a indica subtitrările în limba engleză și germană și capitolele în limba engleză.
Notă: În prezent, playerul nu acceptă mai multe fișiere de capitole sau atributul implicit, dar va face acest lucru într-o versiune viitoare.
Meniul Player permite spectatorilor să aleagă subtitrări în engleză și germană, plus capitole. 
Subtitrările au fost plasate 6% din partea de sus (folosind L: 6%) și bolded cu 
Accentsconagua
Același videoclip cu subtitrări germane alese. 
O probă a modului de selecție a capitolului în Playr. Player este un player video util, iar capacitatea sa de a afișa subtitrări și capitole este foarte utilă. Sprijinul pentru alte tipuri de conținut de elemente de cale sunt planificate, la fel ca și alte playere video disponibile, va continua să se îmbunătățească.
O altă parte importantă a accesibilității conținutului media sunt controalele. În continuare, veți afla cât de accesibile sunt jucătorii impliciți și ce puteți face pentru a vă face mai accesibile propriile comenzi personalizate.

Este foarte important pentru accesibilitate faptul că controalele media pot fi accesate de la tastatură.
Așa cum am menționat mai devreme, este foarte important pentru accesibilitatea că controalele media pot fi accesate de la tastatură. Browserele au propriul set de comenzi pentru elementele media, dar cât de accesibile sunt acestea de la tastatură? Din păcate, în acest moment, răspunsul nu este foarte. Opera pare a fi singurul browser al cărui set implicit de control este accesibil imediat de la tastatură. Puteți să treceți ușor de la un control la altul, utilizați tasta Return pentru a comuta butonul Redare / Pauză și utilizați tastele săgeți pentru a controla bara de căutare și controlul volumului.
Deci, dacă doriți să creați conținutul media complet accesibil în toate browserele moderne, trebuie să implementați propriile controale personalizate.
Ați utilizat deja elementul butonului HTML pentru a implementa aproape toate controalele. Utilizarea elementelor de buton crește imediat accesibilitatea comenzilor deoarece elementul de buton este accesibil automat din tastatură. Numai acest fapt face ca tastatura pentru comenzi personalizate să fie accesibilă. Deoarece comenzile sunt, de asemenea, enumerate în aceeași ordine în care apar pe player, ordinea filelor lor este, de asemenea, destul de mult în ordinea logică necesară. Cu toate acestea, poate doriți să schimbați ordinea filelor din bara de progres și butonul Redare / Pauză. Cel mai probabil, utilizatorii ar dori mai întâi să redea videoclipul, astfel încât butonul să fie primul control pe care aceștia îl pot accesa.
Puteți specifica ordinea filelor pentru comenzile HTML utilizând tabindex atribut. Ordinea specificată de acest atribut este cea pe care browserul o va spune platformei de urmărire. Deci, aplicați a tabindex de la 1 la butonul Redare / Pauză și 2 la bara de progres și apoi aplicați tabindexes ulterioare în ordinea în care apar în sursă:
În această listă de coduri,
onclick ()evenimentele au fost omise pentru scurtă durată.
Elementul de domeniu ar fi ideal pentru a fi utilizat ca bara de progres dacă suportul ar fi mai bun, deoarece oferă prea multă accesibilitate la tastatură, iar bara de căutare va funcționa prin tastatură (tastele sus și jos ar schimba căutarea atunci când elementul se focalizează) fără orice alte cerințe.
Deoarece butoanele oferă automat accesibilitatea tastaturii, tot ce trebuie să faceți este acum bara de progres, care utilizează div și interval.
Trebuie să adăugați un ascultător de eveniment pentru keypress eveniment, care se declanșează atunci când o tastă este apăsată și apoi acționează asupra acesteia. Vă interesează doar o apăsare-cheie pe bara de progres, astfel încât evenimentul să fie adăugat numai barei de progres:
var progressBar = document.getElementById ("progressBar"); progressBar.addEventListener ("keypress", funcția (e) checkKey (e.keyCode);, false); Este apelată funcția care este apelată atunci când este detectată o apăsare de tastă verifica cheia() cu un parametru care indică codul numeric al tastei care a fost apăsată:
funcția checkKey (codul) if (code == 38) // tasta săgeată sus video.currentTime + = 0.5; altfel dacă (code == 40) // tasta săgeată jos video.currentTime - = 0.5;
verifica cheia() Funcția simplu verifică codul cheie pentru a vedea dacă este vorba de tasta cu săgeată în sus (cod 38) sau cu tasta săgeată în jos (cod 40). În funcție de ce cheie este, atributul curent al videoclipului este mărit sau micșorat cu 0,05 (o valoare de timp arbitrară, dar se pare că este un pas bun pentru a muta videoclipul înainte sau înapoi prin).
Si asta e. Capabilitățile de căutare ale barei de progres pot fi accesate prin intermediul tastaturii cu tastele săgeți sus și jos atunci când este focalizată. Rezultatul final vă face controalele personalizate ale mass-media mult mai accesibile decât ar fi fost.
În ceea ce privește accesibilitatea, HTML5 a avansat și sa extins de la definiția inițială a formatului de fișier WebSRT la WebVTT. Cu furnizorii de browsere care intenționează să sprijine acest format, a fost creat un nou grup de lucru W3C, cu intenția de a formaliza caietul de sarcini WebVTT pentru ca browserele să înceapă să fie susținute. Deci, sperăm, suportul pentru browser este doar o chestiune de timp.
Deși suportul nativ este în prezent neuniform, puteți utiliza bibliotecile JavaScript existente pentru a adăuga acum subtitrări videoclipurilor dvs. Aceste biblioteci vor crește fără îndoială funcționalitatea și capacitățile lor în viitor.
Per ansamblu, accesibilitatea este un obiectiv pe care ar trebui să-l gândiți atunci când difuzați conținut multimedia către utilizatorii dvs. Cu cât mai mulți utilizatori care vă pot accesa conținutul, cu atât mai bine?
Asigurați-vă că vizitați site-ul HTML5 Multimedia sau cumpărați cartea pentru a afla mai multe!
