Ciao, in questa conferenza parleremo di multimedia.
Questo include video e audio nel tuo sito web.
Ora video e audio sono due degli
elementi più popolari e più odiati del web.
I designer lo adorano perché possono mettere i loro video fantastici e
forse qualche musica fatta in casa online e condividere con tutti.
Le persone che accedono al tuo sito a volte lo odiano perché sentono di non avere
alcun controllo su ciò che stanno vedendo.
Quindi, quello di cui parleremo oggi sono gli elementi audio e video HTML5.
Stiamo per spiegare brevemente lo scopo dei plugin.
E infine, rifletteremo sui problemi di accessibilità
che vengono di pari passo con l'utilizzo di questi tipi di tag multimediali.
Quindi prima di HTML5 non c'erano davvero usi coerenti di multimedia
che venivano tenuti su tutti i browser.
Quindi il nuovo HTML5 è progettato per evitare l'uso di dover usare plugin o
software extra che non hai già sulla tua macchina.
Dovrebbe essere davvero plug and play.
Se vuoi mettere un video, la gente dovrebbe essere in grado di vederlo senza
dover scaricare Quicktime o Flash, o qualsiasi altra cosa su quella linea.
Ora non è ancora un tag completamente implementato.
Ma si sta muovendo molto velocemente in quella direzione.
Quindi iniziamo con l'elemento video.
Quindi il tag video utilizza un attributo sorgente molto simile all'
attributo dell'immagine.
Si dice al browser dove si trova il file.
Puoi anche usare quelli che chiamiamo tag incorporati,
dove potresti avere il tag video e quindi più fonti sotto.
Ci sono un certo numero di attributi che vengono utilizzati molto ampiamente.
I primi due, altezza e larghezza, sono piuttosto auto-esplicativi.
Quanto vuoi che il tuo video venga visualizzato nel browser? La
riproduzione automatica determina se il video deve iniziare non appena si carica la pagina.
Loop permetterà al video di riprodurre più e più volte.
E l'ultimo, controlli, è qualcosa che puoi aggiungere per dare alla persona più
controllo su quando fermarsi e avviare il video.
Se usi un tag video, di solito è una buona idea inserire
del testo lì insieme ai diversi attributi.
In questo modo, se il browser per qualche motivo non supporta il tag o
non riesce a riprodurre il video, ottieni una sorta di suggerimento utile all'utente facendogli sapere che
dovrebbe esserci un video qui che staresti guardando.
L' elemento audio è molto simile al video, e
poi di nuovo usiamo un attributo sorgente per collegare al file.
In genere, si intende utilizzare un file.mp3 o .wav.
Gli attributi di nuovo, molto simili.
Hai autoplay, controlli e loop, ma abbiamo anche buffer, disattivato e volume.
E questi sono gli attributi extra che puoi inserire dove controllerai
ciò che la persona sta ascoltando e quanto forte.
Inoltre, quando si utilizza l'audio, è possibile impostare le clip in cui è possibile entrare e
dire, voglio che il video inizi in questo particolare momento.
Quindi il mio primo esempio, voglio che riproduca solo la musica da 5 a 25 secondi.
Il prossimo, inizi dall'inizio e
giocherai solo i primi 39 secondi.
Di nuovo, puoi andare avanti e avanti.
Voglio iniziare da un minuto 38 secondi, e basta andare avanti e giocare a 45.
O alla fine si può solo dire, hey, iniziare dal 42 secondo e giocare da lì.
Quindi mostrarti il codice per video e
audio HTML è praticamente l'antitesi di cosa si tratta.
Dovrebbe trattarsi di guardare le cose e sentire le cose.
Quindi andiamo avanti e diamo un'occhiata a qualche codice ora che sta effettivamente funzionando.
Si può vedere che ho il src come solo il mio film BoxCar, e
ho impostato la larghezza predefinita a 40.
Quindi, andro' qui da Sublime e apro questo nel browser.
Eccolo qui, e non è molto eccitante.
A meno che tu non abbia occhi super veloci e il tuo browser è incredibilmente veloce, ti
sei completamente perso il fatto che ha caricato questo video e giocato fino in fondo.
Quindi andiamo avanti e riproviamo.
A dire il vero, l'ha caricata e non ha fatto niente.
Aggiungiamo il gioco automatico.
Va bene, risparmiatelo.
Ho intenzione di andare qui e ricaricare, e ora puoi vedere
aggiungendo l'attributo autoplay, mostrerà automaticamente il video.
Ora questo è qualcosa che non vuoi fare a meno che tu non sia molto sicuro
che lo spettatore voglia vederlo.
C' è stato un grande tumulto di recente quando un sito
di social media ha iniziato a fare tutti i video autoplay.
Quindi, se andavi avanti, all'improvviso tutti questi video stavano riproducendo.
E stava mangiando un'enorme quantità di banda per le persone, ok?
Quindi, invece di fare solo autoplay, andiamo avanti e inseriamo i controlli.
In questo modo,
potete vedere che ora abbiamo aggiunto un piccolo pannello di controllo nella parte inferiore del video.
Gli utenti possono ora avviare il video, interrompere il video e riavvolgerlo.
Questo è davvero il modo in cui vuoi pensare a
come puoi migliorare l'esperienza per l'utente.
È possibile inserire più attributi
in questo e tipo di metterli uno sopra l'altro.
Se lo facciamo adesso, potrai sperimentare il mio bambino di
cinque anni che vola lungo la strada più volte e più volte.
Ancora una volta, vorresti davvero evitare di usare il loop e anche evitare di usare l'auto-play,
a meno che tu non stia dando alle persone l'opportunità di usare anche i controlli,
va bene?
Un' ultima cosa di cui voglio parlare qui è che potresti notare con controlli e
loop, questi sono attributi che non sembrano prendere alcun valore.
Quindi src =, width =.
Quando inserisci questi attributi booleani,
è la stessa cosa di dire che i controlli sono uguali a true.
Loop è uguale a true.
Quindi è così che abbiamo fatto con il nostro video.
Andiamo avanti e guardiamo l'audio per un secondo.
Rendi questo un po' piu' grande qui.
Quello che ho qui è che ho un link alla stessa canzone due volte.
Nella mia prima versione, puoi vedere che mi viene data la piccola barra audio,
perché mi sono assicurato di usare i controlli.
E se suonassi, andra' avanti e suonera' tutta la canzone.
Tuttavia nella mia seconda opzione, puoi vedere che ho aggiunto, proprio qui, il t = 15:35.
L' ho preparato per te, cosi'
potrai davvero sentire la canzone di quando entrera' in gioco la parte eccitante.
Quindi questi sono solo alcuni semplici esempi di come utilizzeresti i tag per mostrare il tuo
audio video.
E spero davvero che mentre stai codificando, ti assicuri di digitare le cose e
pasticciare con le cose e gioca con le cose per avere davvero un'idea di come
funzionano questi video e tutti i diversi tag HTML5.
Quindi una delle cose di cui parlo con le persone, che hanno codificato in
altre versioni di HTML e non vogliono davvero apportare la modifica a HTML5.
Che ci sono così tante ragioni per cui vuoi fare questo rapido e semplice interruttore.
E i plugin sono un ottimo esempio.
Da prima di HTML5, non c'era uno standard, erano necessari plugsins.
Quindi quello che vogliamo fare è andare avanti e
anche se non è supportato al momento, andare avanti e utilizzare questo tag,
capendo che alcuni browser mi richiedono ancora Flash per riprodurli.
Infine, parliamo di problemi di accessibilità.
Quando intendi utilizzare video o audio, proprio come con qualsiasi tipo di
contenuto non contestuale, vuoi assicurarti di fornire qualsiasi tipo di descrizione di testo e
sottotitoli o altri contenuti equivalenti.
Vuoi assicurarti di fornire anche qualsiasi link ai plugin.
Altrimenti, sei praticamente rimasto con una sorta
di piccola icona vuota rotta che la gente non sempre capisce.
E infine, la cosa più importante che vorrei che togliessi da questo discorso,
oltre ad essere in grado di usare il codice,
è che i contenuti multimediali dovrebbero davvero migliorare i tuoi contenuti.
Non vuoi che sia una distrazione.
Non vuoi che le persone passino del tempo cercando di capire come disattivarlo
in modo che possano, al fine di ottenere davvero il contenuto della tua pagina.
Grazie.