Share
In questo tutorial, imparerai come HTML5 ti aiuta a offrire diversi modi di presentare i tuoi contenuti multimediali agli utenti. Di conseguenza, aumenterai la disponibilità dei tuoi contenuti multimediali con utenti diversi
esigenze e requisiti, rendendolo più accessibile.
Questo tutorial viene fornito per gentile concessione del libro multimediale HTML5 rilasciato di recente.
Ti incoraggio vivamente a pensare di rendere i tuoi contenuti accessibili ...
Quando pensi agli utenti che tenteranno di visualizzare i tuoi contenuti multimediali, potresti formulare una serie di presupposti:
Tutti sono presupposti abbastanza ragionevoli da fare e molto probabilmente riguardano la stragrande maggioranza degli utenti che vorranno accedere ai tuoi contenuti. Potresti essere felice che i tuoi contenuti siano accessibili solo a questi utenti; dopo tutto, le regole della maggioranza, non è così?
Bene, ti incoraggio vivamente a pensare di rendere i tuoi contenuti accessibili agli utenti che non rientrano nella categoria delle ipotesi appena elencate. Chi sono questi spettatori? Loro includono:
Poiché la maggior parte dei contenuti multimediali di solito include un po 'di audio, non essere in grado di ascoltare o comprendere l'audio che contiene è piuttosto un ostacolo nel comprendere il messaggio e le informazioni del contenuto.
Allo stesso modo, essere in grado di accedere al contenuto attraverso un dispositivo come uno screen reader ma non essere in grado di usarlo effettivamente perché i controlli multimediali non sono configurati correttamente (ad es. Per l'accesso alla tastiera) potrebbe infastidire qualsiasi utente.
Esplorerai l'accessibilità dei controlli multimediali più avanti in questo tutorial. Dai un'occhiata anche a ciò che HTML5 offre al tavolo nel tentativo di risolvere il problema degli utenti che non sono in grado di vedere, ascoltare o comprendere i tuoi contenuti multimediali. Ma prima, diamo una rapida occhiata a ciò che ha portato al tentativo di HTML5 di affrontare questo problema di accessibilità - SRT.
SRT è un formato di file esistente per contenere i sottotitoli dei video e i loro tempi.
SRT è un formato di file esistente per contenere i sottotitoli dei video e i loro tempi. Un file SRT viene spesso prodotto automaticamente utilizzando un programma Windows chiamato SubRip, che utilizza il riconoscimento ottico dei caratteri (OCR) per ottenere i sottotitoli dall'origine video specificata.
Il formato del file SubRip è un file di testo di base con l'estensione del file .srt che segue un formato di base:
Ogni set di sottotitoli inizia con un numero di sottotitolo unico, seguito dai timestamp di inizio e fine della temporizzazione che il sottotitolo rappresenta su una riga separata, che è seguita da una o più righe di testo sottotitoli. Ogni set di sottotitoli successivo è separato da una riga vuota. Il formato timestamp hh: mm: ss, msmsms specifica le ore, i minuti, i secondi e i millisecondi del tempo in questione. Si noti che il separatore millisecondo è una virgola.
Segue un esempio di tale file:
1 00: 00: 10,500 -> 00: 00: 13,000 Elephant's Dream 2 00: 00: 15,000 -> 00: 00: 18,000 A sinistra vediamo ...
Il formato di file SRT è molto popolare ed è spesso il formato in cui vengono rilasciati i sottotitoli dei video. Questo formato di file non è attualmente utilizzato come parte del tentativo di HTML5 di affrontare l'accessibilità, anche se all'inizio era stato esteso e dato un nuovo nome, WebVTT.
WebVTT (Web Text Text Tracks) è un formato di file che è inteso per tracciare tracce di testo esterne. Inizialmente faceva parte delle specifiche WHATWG e W3C HTML5 ed era un'estensione di SRT denominata WebSRT (Web Subtitle Resource Tracks). Ma il W3C era preoccupato che HTML5 dovesse essere indipendente da qualsiasi formato di didascalia scelto, e quindi, è stato rimosso da quella specifica.
Nota: anche se SRT in WebSRT sta per Tracce risorsa sottotitoli, l'acronimo originale non rappresentava nulla e si limitava a riflettere
l'estensione del file usata. WebSRT è un "backronym", la risorsa sottotitoli Tracks è stata inserita nelle tre lettere per indicare qualcosa.
La presenza di WebVTT è attualmente una delle principali differenze tra la specifica HTML5 WHATWG e la specifica W3C.
Sebbene nessun browser attualmente supporti WebVTT, i principali produttori di browser hanno indicato che implementeranno il supporto per WebVTT in futuro. Questa indicazione ha portato alla creazione di una Carta del gruppo di lavoro WebVTT al W3C, la cui missione è:
"Creare una specifica W3C partendo dal linguaggio WHATWG WebVTT (Web Video Text Tracks) e solidificarla attraverso la creazione di una suite di test WebVTT e attraverso la creazione di mappature semantiche di altri formati di sottotitoli da o verso WebVTT per facilitare l'implementazione del browser e adozione del mercato. "
Si spera che a sua volta questa promessa di supporto da parte del fornitore porti a una standardizzazione formale delle specifiche WebVTT al W3C. Con il supporto del browser e quello del W3C, puoi essere certo che WebVTT è qui per rimanere ed è destinato a diventare il metodo de facto per marcare le tracce di testo all'interno di contenuti audio e video sul web.
Allora, qual è il formato di file WebVTT e in che modo può aiutarti a rendere i tuoi contenuti accessibili? Continuare a leggere.
Il formato WebVTT ti consente anche di fornire una descrizione testuale del contenuto del video
Si utilizza il formato di file WebVTT per definire i file WebVTT. Uno degli usi principali di questi file è fornire i sottotitoli ai contenuti video, sebbene il formato del file non indichi a cosa serve il suo contenuto.
Il formato WebVTT consente inoltre di fornire una descrizione testuale del contenuto del video, che può quindi essere utilizzato da vari dispositivi di accessibilità (che potrebbero leggere le descrizioni ad alta voce) per descrivere il contenuto del video a coloro che non possono vederlo. Si informa il browser del file WebVTT e del suo scopo utilizzando il markup HTML; scoprirai come questo viene fatto più avanti in questo tutorial, quando leggi l'elemento track.
Diamo un'occhiata al formato di file WebVTT in modo più dettagliato.
Un file WebVTT è un semplice file di testo con l'estensione .vtt che deve seguire un formato specificato, che verrà esaminato a breve. Il file deve essere codificato come UTF-8 ed etichettato con il tipo MIME text / tt. I terminatori di riga all'interno del file possono essere \ r (un ritorno a capo), \ n (una nuova riga) o \ r \ n (un ritorno a capo seguito da una nuova riga). Deve inoltre contenere un corpo di file WebVTT, che comprende quanto segue:
WEBVTT [cue] [spunto] ...
La stringa WEBVTT in alto identifica il contenuto come un file WebVTT e deve quindi essere seguito da almeno una riga vuota, che viene quindi seguita da un numero qualsiasi di segni, ognuno dei quali è separato da una riga vuota.
Una stecca è definita come:
[idstring] [hh:] mm: ss.msmsms -> [hh:] mm: ss.msmsms [impostazioni cue] TextLine1 TextLine2 ...
IDString è un identificativo univoco all'interno del file che identifica la stecca. Può essere costituito da uno o più caratteri che non contengono la sottostringa "->" o uno dei terminatori di linea menzionati prima. [Hh:] mm: ss.msmsms -> [hh:] mm: ss.msmsms indica il timestamp intervallo all'interno del file video per cui è stata specificata la cue. [hh:] mm: ss.msmsms è un semplice timestamp; la porzione oraria è facoltativa (a seconda della lunghezza del video in questione, ovviamente).
Nota: i separatori al millisecondo sono fermi, non le virgole come in SRT.
le impostazioni di cue consentono di specificare il posizionamento del testo; leggerai di più su di loro in un momento.
TextLineN è il testo effettivo nel file video che rappresenta l'intervallo di data / ora nella stecca. Il contenuto può essere tutto in una riga o presentato in un numero qualsiasi di righe separate. Qualsiasi linea sarà contenuta all'interno della stecca fino a quando non si incontra una linea vuota, che indica la fine di quella particolare stecca.
Diamo una rapida occhiata a un file WebVTT di esempio contenente due intervalli di data / ora:
WEBVTT 1 00: 00: 10.500 -> 00: 00: 13.000 Elephant's Dream 2 00: 00: 15.000 -> 00: 00: 18.000 A sinistra vediamo ...
Questo esempio definisce due segnali: il primo inizia 10 secondi e 500 millisecondi nel video e termina a 13 secondi, e il secondo inizia 15 secondi nel video e termina 3 secondi dopo. Il testo dei sottotitoli per ogni cue è riportato sotto il suo timestamp.
Usare gli spunti è relativamente semplice e puoi vedere come il file può essere costruito con un numero di segnali per coprire la lunghezza di un intero video. È anche possibile specificare alcune impostazioni su una base per-cue. Questi influenzano il posizionamento della stecca sul video correlato. È possibile avere un numero di valori di impostazione e un'impostazione di cue può contenere uno o più valori, ciascuno separato da uno spazio. Le varie impostazioni sono elencate di seguito:
Se non vengono specificate le impostazioni di cue, il testo sarà allineato al centro, nella parte inferiore del fotogramma video.
Aggiungiamo alcune di queste impostazioni all'esempio usato in precedenza:
WEBVTT 1 00: 00: 10.500 -> 00: 00: 13.000 A: inizia Elephant's Dream 2 00: 00: 15.000 -> 00: 00: 18.000 A: fine L: 10% A sinistra vediamo ...
Il testo nella prima stecca sarà allineato a sinistra del video (più o meno allo stesso modo della regola CSS testo allineato: sinistra funziona).
La seconda cue ha due impostazioni applicate: il testo sarà allineato alla fine della riga (simile al testo-allineamento: proprio in CSS) e sarà posizionato sulla linea del 10 percento verso il basso dalla parte superiore del video.
Oltre a specificare le impostazioni di cue per controllare il posizionamento e l'allineamento del testo cue, ci sono anche alcuni stili in linea che puoi applicare al testo. Questi sembrano e si comportano come gli elementi HTML. Contengono un inizio e un tag di fine e la formattazione viene applicata al testo in mezzo.
Estendiamo ulteriormente l'esempio e usiamo alcuni dei tag di testo per formattare il testo cue:
WEBVTT 1 00: 00: 00.000 -> 00: 00: 14.999 ElefantiSognare 2 00: 00: 15.000 -> 00: 00: 18.000 A: fine L: 10% al sinistra noi possiamo vedere... 3 00: 00: 18.167 -> 00: 00: 22.000 A destra <00:00:20.000>possiamo vedere il ...
Con la prima stecca, è stato aggiunto un nome di classe di "sogno", uno stile per il quale è possibile definire all'interno del file HTML nello stesso modo in cui si creerebbero le regole di stile CSS.
Nota: qualsiasi nome di classe CSS che è possibile utilizzare nelle definizioni dei sottotitoli WebVTT può essere definito nel file HTML contenente o in un file css esterno nello stesso modo in cui si specifica qualsiasi altra classe css.
La seconda stecca ora ha tag che visualizzano la parola "sinistra" in corsivo e "vedi" in grassetto.
Un esempio aggiuntivo viene aggiunto a questo esempio per mostrare come viene utilizzato il timestamp per visualizzare il testo "stile karaoke". Quando inizia la stecca, le parole "A destra" appariranno per prime. Quindi il testo "possiamo vedere ..." verrà visualizzato con il timestamp appropriato (Figura 8.6).
Nota: se vuoi i caratteri e, per apparire nel testo di una stecca video, devi sfuggirli con
&<e>rispettivamente.
Vale la pena notare che, poiché il formato di file WEBVTT è relativamente nuovo rispetto alle specifiche e con la recente creazione della Carta del gruppo di lavoro WEBVTT, è probabile l'aggiunta alle specifiche.
Se vuoi essere aggiornato su eventuali modifiche a questa specifica, tieni d'occhio il sito della Carta del gruppo di lavoro e il blog di Silvia Pfeiffer che è attualmente redattore della Carta del gruppo di lavoro. Silvia inoltre fa regolarmente pubblicità sugli argomenti relativi all'accessibilità relativi a HtML5.
Puoi vedere come la narrativa completa di un video può essere aggiunta a un file di testo WebVTT con formattazione e styling.
Ma come si collega un file WebVTT con un particolare video? È qui che entra in gioco il nuovo elemento di traccia HTML5.
L'elemento traccia è uno dei nuovi elementi HTML5. Il suo scopo è quello di consentire l'inserimento di tracce di testo esterne per elementi multimediali, come audio e video. L'elemento track non rappresenta nulla da solo e deve essere usato insieme a, e come elemento figlio, un elemento multimediale.
L'elemento traccia prende un numero di attributi, che sono elencati di seguito:
L'esempio seguente mostra come un elemento track può essere utilizzato in connessione con un video per fornire i sottotitoli:
L'elemento traccia nell'esempio specifica che il file en.vtt contiene i sottotitoli in inglese (come dice l'etichetta) nella lingua inglese (srclang è impostato su en) di tipo: i sottotitoli per l'elemento video circostante. Da questo esempio, puoi vedere quanto sarebbe facile aggiungere un secondo file di sottotitoli che potrebbe essere in una lingua diversa:
Qui è stata aggiunta un'altra definizione di traccia, che punta a un file de.vtt che contiene i sottotitoli in tedesco; srclang è impostato per de.
Si noti che l'attributo predefinito è stato aggiunto alla definizione dei sottotitoli in inglese, contrassegnandola come set di sottotitoli predefinito da utilizzare se l'utente non ne seleziona specificamente uno.
Se si desidera estendere ulteriormente l'esempio e aggiungere un elenco di capitoli in ciascuna lingua (inglese e tedesco), si dovrebbe fare quanto segue:
Una volta che i vari file WebVTT sono stati creati con il contenuto desiderato, è un processo abbastanza semplice per aggiungerli al video appropriato.
Tutto ciò che hai appena letto su WebVTT sembra abbastanza promettente; tuttavia, anche se alcuni browser supportano l'elemento di traccia in una certa misura, attualmente nessun browser supporta il formato di file WebVTT.
Nota: al momento della stesura di questo documento, il Webkit (su cui si basano chrome e safari) ha un supporto per WebVTT.
Non tutto è perduto, tuttavia, poiché sono disponibili diverse librerie JavaScript che consentono di iniziare a utilizzare WebVTT oggi.
Un piccolo numero di browser supporta l'elemento di traccia in una certa misura. Gli ultimi browser WebKit (ad es. Chrome 12 e Safari 5.0.5) riconoscono l'elemento ma non ne fanno nulla. L'attuale versione di Firefox (5) analizza l'elemento ma non fa nulla con esso. Sebbene questi browser stiano prendendo i passi nella giusta direzione, in realtà non aiutano a implementare WebVTT ora.
Aggiornamento (19 marzo 2012): Internet Explorer 10 Anteprima 4 e versioni successive analizza l'elemento traccia e rende WebVTT. Ora è disponibile anche in Google Chrome (deve essere abilitato tramite chrome: flags - "Abilita
elemento").
Fortunatamente, quattro librerie JavaScript ti consentono di definire l'elemento traccia con i file WebVTT nel tuo documento web che fornirà ciò che desideri:
Sebbene solo una manciata di lettori JavaScript supportino WEBVTT, alcuni di essi supportano i file di sottotitoli SRT. i lettori che supportano WebVtt (Playr, LeanBack, Captionator e MediaElementJS) supportano anche SRT oltre a quanto segue che fornisce solo supporto per SRT:
Nessuna di queste librerie offre supporto per tutti i diversi valori per l'attributo kind dell'elemento track: supportano solo il valore dei sottotitoli (Playr supporta anche il valore del capitolo). Poiché i sottotitoli sono uno dei valori più importanti, è un buon inizio. Questo supporto ti consente anche di iniziare ad aggiungere i sottotitoli ai tuoi video ora e di vederli in azione.
Diamo un'occhiata a come potresti utilizzare la libreria JavaScript di Playr per aggiungere sottotitoli e capitoli a un video.
Per utilizzare Playr, devi prima scaricarlo dal sito Web di download di Playr. Una volta scaricato, devi includere il file CSS di Playr e JavaScript nel tuo documento web:
Quando definisci il tuo video, aggiungi semplicemente la classe CSS "playr_video" al tuo elemento video, e Playr verrà automaticamente utilizzato per quel video.
Un esempio di Playr con un breve film d'animazione chiamato Elephant's Dream (© copyright 2006, Fondazione Blender, Netherlands Media Art Institute, www.elephants dream.org) è disponibile qui.
Il codice utilizzato per questo video è il seguente:
Inoltre, tre elementi traccia sono usati per indicare i sottotitoli in inglese e tedesco e i capitoli in inglese.
Nota: attualmente Playr non supporta più file di capitolo o l'attributo predefinito, ma lo farà in una versione futura.
Il menu di Playr consente agli spettatori di scegliere i sottotitoli in inglese e tedesco più i capitoli. 
I sottotitoli sono stati posizionati al 6% dall'alto (usando L: 6%) e in grassetto con 
Accentsconagua
Lo stesso video con i sottotitoli in tedesco scelti. 
Un esempio di come appare la selezione dei capitoli in Playr. Playr è un pratico lettore video e la sua capacità di visualizzare sottotitoli e capitoli è molto utile. Il supporto per gli altri tipi di contenuto dell'elemento di traccia è pianificato, quindi, come gli altri lettori video disponibili, continuerà a migliorare.
Un'altra parte importante di rendere accessibili i contenuti multimediali sono i controlli. Successivamente, imparerai quanto sono accessibili i giocatori predefiniti e cosa puoi fare per rendere i tuoi controlli personalizzati più accessibili.

È abbastanza importante per l'accessibilità che i controlli multimediali siano accessibili dalla tastiera.
Come accennato in precedenza, è abbastanza importante per l'accessibilità che i controlli multimediali siano accessibili dalla tastiera. I browser hanno il proprio set di controlli per gli elementi multimediali, ma quanto sono accessibili dalla tastiera? Sfortunatamente, al momento, la risposta non è molto. Opera sembra essere l'unico browser il cui set di controlli predefinito è immediatamente accessibile dalla tastiera. Puoi facilmente passare da un controllo all'altro, utilizzare il tasto Invio per attivare / disattivare il pulsante Riproduci / Pausa e utilizzare i tasti freccia per controllare la barra di ricerca e il controllo del volume.
Quindi, se vuoi rendere i tuoi contenuti multimediali completamente accessibili attraverso tutti i browser moderni, devi implementare i tuoi controlli personalizzati.
Hai già utilizzato l'elemento del pulsante HTML per implementare quasi tutti i controlli. L'utilizzo degli elementi del pulsante aumenta immediatamente l'accessibilità dei controlli perché l'elemento del pulsante è accessibile automaticamente dalla tastiera. Solo questo fatto rende accessibile la tastiera dei controlli personalizzati. Poiché i controlli sono elencati nello stesso ordine in cui appaiono sul lettore, anche il loro ordine di tabulazione è praticamente nell'ordine logico richiesto. Tuttavia, potresti voler cambiare l'ordine di tabulazione della barra di avanzamento e il pulsante Riproduci / Pausa. Molto probabilmente, gli utenti vorrebbero riprodurre il video per primi, in modo tale che il pulsante debba essere il primo controllo a cui possono accedere.
È possibile specificare l'ordine di tabulazione dei controlli HTML utilizzando il tabindex attributo. L'ordine specificato da questo attributo è quello che il browser dirà alla tastiera da seguire. Quindi applichi a tabindex di 1 al pulsante Riproduci / Pausa e 2 alla barra di avanzamento, quindi applica i successivi tabindex nell'ordine in cui appaiono nella sorgente:
In questo elenco di codici, il
al clic()gli eventi sono stati omessi per brevità.
L'elemento intervallo sarebbe ideale da utilizzare come barra di avanzamento se il supporto era migliore perché anch'esso fornisce automaticamente l'accessibilità della tastiera e la barra di ricerca funzionerebbe tramite la tastiera (i tasti su e giù sposterebbero la ricerca quando l'elemento è attivo) senza eventuali ulteriori requisiti.
Poiché i pulsanti forniscono l'accessibilità della tastiera automaticamente, tutto ciò che devi affrontare ora è la barra di avanzamento, che utilizza un div e uno span.
È necessario aggiungere un listener di eventi per pressione di un tasto evento, che si attiva quando viene premuto un tasto, quindi agisce su di esso. Ti interessa semplicemente premere un tasto sulla barra di avanzamento, quindi l'evento viene aggiunto solo alla barra di avanzamento:
var progressBar = document.getElementById ("progressBar"); progressBar.addEventListener ("keypress", function (e) checkKey (e.keyCode);, false); Viene chiamata la funzione che viene chiamata quando viene rilevata una pressione di un tasto CheckKey () con un parametro che indica il codice numerico del tasto premuto:
function checkKey (code) if (code == 38) // up arrow key video.currentTime + = 0.5; else if (code == 40) // down arrow key video.currentTime - = 0.5;
Il CheckKey () funzione controlla semplicemente il codice chiave per vedere se è il tasto freccia su (codice 38) o il tasto freccia giù (codice 40). A seconda della chiave, l'attributo currentTime del video viene aumentato o diminuito di 0,05 (un valore temporale arbitrario, ma sembra un buon passo per spostare il video avanti o indietro di).
E questo è tutto. Le funzionalità di ricerca della barra di avanzamento ora sono accessibili tramite la tastiera con i tasti freccia su e giù quando è a fuoco. Il risultato finale rende i controlli personalizzati dei media molto più accessibili di quanto non sarebbero stati.
Per quanto riguarda l'accessibilità, HTML5 è avanzato e ampliato dalla sua definizione iniziale del formato di file WebSRT a WebVTT. Con i fornitori di browser che pianificano di supportare questo formato, è stato creato un nuovo gruppo di lavoro W3C con l'intenzione di formalizzare le specifiche WebVTT affinché i browser possano iniziare a supportare. Quindi, auspicabilmente, il supporto del browser è solo una questione di tempo.
Sebbene il supporto nativo sia attualmente frammentario, puoi ora utilizzare le librerie JavaScript esistenti per aggiungere i sottotitoli ai tuoi video. Queste librerie aumenteranno indubbiamente le loro funzionalità e capacità in futuro.
Nel complesso, l'accessibilità è un obiettivo a cui dovresti pensare quando servi contenuti multimediali ai tuoi utenti. Più utenti possono accedere ai tuoi contenuti, meglio è, giusto?
Assicurati di visitare il sito Web HTML5 Multimedia o di acquistare il libro per ulteriori informazioni!
