RSS del sito
La maggioranza schiacciante dei manuali del web-development in generale e del html5 in particolare ci racconta un sacco di cose interessanti sugli elementi <audio> e <video>, ma si dimentica di una di quelle più importanti: le dimensioni di quegli elementi sulle pagine dei siti. Non so proprio perché succeda: si tratta di un aspetto rilevante sia per la bellezza estetica che per la comodità di ogni sito dove quegli elementi vengono utilizzati.
Certo, dal punto di vista tecnico si tratta di una questione semplicissima, ma c’è sempre qualche sviluppatore che la deve affrontare per la prima volta e quindi non conosce la strada ottimale. Di conseguenza, ho pensato di scrivere questo breve paragrafo specifico.
Raccontando di come impostare le dimensioni degli elementi <audio> e <video> preferisco trattare separatamente i relativi tag perché anche gli interventi analoghi perseguiranno degli obiettivi in parte differenti: a seconda che si tratti di un file audio o video.
1. Come impostare le dimensioni dell’elemento <audio>
Il codice html dell’elemento <audio> è noto a tutti. Esso permette al visitatore di un sito di ascoltare un brano audio, metterlo in pausa, scrollarlo avanti o indietro, regolare il volume di riproduzione.
<audio controls preload="auto" src="song.mp3" type="audio/mp3"></audio>
Il problema consiste nel fatto che il codice appena riportato produce il seguente risultato:
Quindi ha due difetti:
1. La larghezza dell’elemento è stata impostata dal browser e non dallo sviluppatore (il quale potrebbe avere delle preferenze o linee guida estetiche ben determinate);
2. La lunghezza dell’elemento non ha alcun legame con la durata del brano a cui si riferisce, quindi qualora si dovesse trattare di un brano audio lungo, l’elemento <audio> è troppo corto per poter scrollare comodamente il file per tratti brevi pochi secondi o poche decine di secondi (i nostri mouse e le nostre dita non sono abbastanza sensibili e/o precisi).
Entrambi i difetti vanno corretti allo stesso modo: impostando una buona larghezza dell’elemento. È possibile impostarla in pixel…
<audio style="width: 800px;" controls preload="auto" src="song.mp3" type="audio/mp3"></audio>
… oppure in percentuali (rispetto al contenitore).
<audio style="width: 80%" controls preload="auto" src="song.mp3" type="audio/mp3"></audio>
Il risultato sarà decisamente meglio perché assieme all’elemento si allunga automaticamente anche la barra del tempo (provate a confrontare la sua comodità con quella del primo esempio).
Ovviamente, l’indicazione della larghezza dell’elemento può essere messa anche fuori dal suo codice html: per esempio, in un file css esterno.
audio { width: 80%; }
Con l’impostazione della dimensione fatta, il visitatore guadagna in comodità, mentre lo sviluppatore guadagna in controllo della situazione.
E ora passiamo all’elemento <video>.
2. Come impostare le dimensioni dell’elemento <video>
Il codice html dell’elemento <video> è noto a tutti. Esso permette al visitatore di un sito di visionare un video, metterlo in pausa, scrollarlo avanti e indietro, regolare il volume del suono, aprire il video a schermo intero.
<video controls preload="auto" src="videoclip.mp4" type="video/mp4"></video>
I problemi relativi all’utilizzo di tale codice sono molteplici, ma hanno sempre la stessa origine: la risoluzione e le proporzioni del video. Potrebbe trattarsi di un video di piccole proporzioni (perché registrato anni o decenni fa, con un dispositivo primitivo e/o obsoleto; oppure un video convertito in una schifezza inguardabile solo per essere alleggerito). Potrebbe, al contrario, essere un video di proporzioni grandi, quindi di una larghezza notevolmente superiore non solo alla porzione della pagina riservata ai contenuti, ma anche allo schermo del computer / smartphone / tablet del visitatore. Il principio generale che ci interessa è: i video pubblicati su un sito quasi sicuramente saranno tutti di proporzioni e risoluzioni diversi (perché realizzati con dispositivi diversi o in modalità diverse). Quindi noi, gli sviluppatori, dobbiamo impostare l’elemento <video> in un modo che nessuno file video pubblicato sul sito…
a) rovini il design del sito a causa della propria grandezza,
b) risulti inguardabile senza la modalità «schermo intero» (quando le proporzioni del video sono ridotte),
c) sia scomodo da scrollare avanti e indietro a causa della barra del tempo troppo corta (come nel caso dell’elemento <audio>).
Il punto a) è facilissimo da realizzare: con l’aiuto del css diciamo all’elemento <video> che non può assumere una larghezza superiore a quella del (div) contenitore. In tal senso ci è utile la proprietà max-width:
<video style="max-width: 100%" controls preload="auto" src="videoclip.mp4" type="video/mp4"></video>
Sì, avete capito bene: ormai è sufficiente indicare solo la larghezza. L’altezza del video si adeguerà automaticamente in un modo proporzionato. E, soprattutto, l’elemento <video> diventerà responsive!
Ovviamente, possiamo indicare la larghezza massima anche in pixel.
<video style="max-width: 1000px" controls preload="auto" src="videoclip.mp4" type="video/mp4"></video>
E, ovviamente, possiamo faro anche da un file css esterno:
video { max-width: 100%; height: auto; }
In entrambi i casi il risultato sarà quello riportato sotto (il file video ha la risoluzione 1920×1080):
I video di proporzioni piccole sono un po’ più difficili da trattare. La proprietà max-width si applicherà anche a loro, ma quando sono meno larghi del contenitore molto spesso appaiono più grandi di quello che sono in realtà (ma non più larghi del valore impostato con il max-width) e si vedono dunque un po’ sfuocati. La colpa non è del sito, la colpa è delle impostazioni del computer o del browser utilizzati per visitare il sito. Ma gli sviluppatori dei siti non hanno i mezzi (e nemmeno il compito) per fare la manutenzione di tutti i computer del mondo, quindi devono creare i siti più prevedibili possibile. In tale missione hanno tre opzioni:
1) indicare le dimensioni esatte per i video meno larghi del contenitore (per esempio, se il div nel quale si vedono i contenuti del sito è largo 1000 pixel, per i video di larghezza inferiore indichiamo le loro dimensioni). Ovviamente, è una strada percorribile solo quando inseriamo manualmente ogni singolo video pubblicato e non lo ripeschiamo attraverso uno script:
<video width="800" height="507" controls preload="auto" src="videoclip.mp4" type="video/mp4"></video>
2) scrivere uno script che determini le dimensioni del fotogramma di ogni singolo video e inserisca i valori ottenuti nel codice html dell’elemento <video>. Se avete la possibilità di utilizzare le librerie ID3, potete provare a scrivere uno script in PHP con un codice di questo tipo:
include_once('pathto/getid3.php');
$getID3 = new getID3;
$file = $getID3->analyze($filename);
$width = $file['video']['resolution_x'];
$heigth = $file['video']['resolution_y'];
Con il javascript, invece, aggiungere i valori width e height in un codice html dell’elemento <video> già presente sulla pagina sarà una missione un po’ incasinata. Ma alla base del tutto dovrebbe essere un codice come questo:
var v = document.getElementById("video");
v.addEventListener( "loadedmetadata", function (e) {
var width = this.videoWidth,
height = this.videoHeight;
}, false );
(non aggiungo una soluzione completa solo perché le caratteristiche dei siti e dei hosting sono troppo varie);
3) infine, gli sviluppatori potrebbero anche non preoccuparsi dei video minuscoli, giustificandosi ragionevolmente con il fatto che essi stiano estinguendosi nella natura digitale.
Indipendentemente dalla opzione da voi scelta, dai vostri obiettivi e dalle caratteristiche del progetto sul quale state lavorando, ora sapete almeno due cose importanti:
– come impostare le dimensioni degli elementi <audio> e <video> rendendoli comodi per gli utenti;
– come rendere gli elementi <audio> e <video> responsive indipendentemente dal loro contenuto.
