Dimensionare dinamicamente filmato e sottotitoli.

Qualche anno fa, nel 2001, avviai un test destinato a sondare la possibilità di ridurre le evidenti limitazioni della tecnica di embedding di un filmato rispetto alla libertà d’azione di un player esterno.
Tale test (effettuato su Internet Explorer 5.01) puntava appunto ad un ridimensionamento dinamico del plug-in (RealVideo) tramite il trascinamento dell’angolo inferiore di un <div> contenitore, utilizzando gli eventi DOM.

Ripensando a quella esperienza mi sono chiesto se fosse possibile interagire in maniera più diretta con l’oggetto multimediale, trasformando l’emulazione di una funzionalità del player in un servizio utile ai fini dell’accessibilità dei sottotitoli. E ho scoperto che può essere semplice, utilizzando i fogli di stile.

Esistono da tempo tecniche per il dimensionamento dinamico di immagini e banner Flash; tali tecniche agiscono direttamente sull’oggetto tramite un CSS che dà ad esso misure relative e non assolute, in modo da seguire proporzionalmente il ridimensionamento del carattere:

object
{  width: 25em;
   height: 20em; }

Queste impostazioni si legano ad un <object> cui sono stati rimossi gli attributi width ed height, in modo da svincolarlo totalmente dal rispetto di un’area prefissata:

<object type="application/x-shockwave-flash" data="hparty.swf"></object>

Anche per altri plug-in (come Real o Quicktime) è possibile sfruttare una simile tecnica, non senza però fare alcune considerazioni importanti:

  • Rimuovere width ed height dall’ <object> è assolutamente sconsigliabile, in quanto disattivando i fogli di stile il browser non renderizza questo elemento correttamente (esso risulta rimpicciolito, se non addirittura invisibile), al contrario di quanto invece accade solitamente con le immagini.
  • E’ sconsigliabile impostare con unità em larghezza ed altezza di un <object> generico, in quanto potrebbero essere presenti più oggetti con funzioni diverse all’interno di una pagina.

E quindi?
Quindi torna utile l’idea di un elemento contenitore per il filmato, cui affidare larghezza e altezza relative:

#mmobj
{  width: 25em;
   height: 20em; }

All’interno di esso si troverà il plug-in vero e proprio, le cui dimensioni andranno impostate al 100%, in modo da occupare tutta l’area del contenitore:

#mmobj object
{  width: 100%;
   height: 100%; }

Il codice HTML a questo punto sarà il seguente (assumendo un filmato Quicktime):

<div id="mmobj">
  <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="400" height="320">
    <param name="src" value="hparty-qt.smi" />
    <param name="autoplay" value="true" />
    <param name="controller" value="true" />
    <param name="scale" value="toFit" />
    <!--[if !IE]> -->
    <object data="hparty-qt.smi" type="video/quicktime" width="400" height="320">
      <param name="autoplay" value="true" />
      <param name="controller" value="true" />
      <param name="scale" value="toFit" />
    </object>
    <!-- <![endif]-->
  </object>
</div>

Osserviamo ora due particolari rispetto all’ <object>:

  1. La presenza di width ed height. Tale presenza garantisce una corretta visualizzazione nel caso si disattivino i fogli di stile, mentre, con CSS abilitati, viene tranquillamente sovrascritta dalle nuove impostazioni in percentuale.
  2. La presenza del parametro scale, impostato a toFit. Tale parametro abilita il pieno “stretching” del video nel plug-in, garantendone il ridimensionamento.

Da segnalare che il parametro scale è valido solo per Quicktime; Windows Media usa invece il seguente:
<param name="stretchToFit" value="true" />

Per maggiori particolari sul comportamento dei diversi plug-in si rimanda al capitolo successivo.

E’ possibile ora dedicarsi ad un paio di “rifiniture”.
Com’è noto le modalità di ingrandimento del carattere da parte di Internet Explorer differiscono da quelle dei browser Gecko, quindi anche l’ingrandimento del filmato risente di questa diversità procedurale, risultando meno evidente in IE.

Un notevole incremento a questa sorta di “zoom” è ottenibile introducendo nel CSS un font-size “robusto” e riproporzionando opportunamente larghezza ed altezza:

#mmobj
{  font-size: 2em;
   width: 12.5em;
   height: 10em; }

…e se poi vogliamo pensare anche a chi -per fortuna- supporta correttamente le proprietà max-width e max-height, possiamo fissare anche i limiti dello “zoom” aggiungendo, ad esempio:

   max-width: 760px;
   max-height: 630px;

Ora sottotitoli e filmato finalmente rispondono al browser, ai settaggi del sistema operativo (ad esempio le combinazioni ad elevato contrasto di Windows) e -soprattutto- alla volontà dell’utente.

Ma non tutto è semplice ed immediato come sembra…

Potrebbero interessarti anche i seguenti articoli

Condividi:

Informazioni sull'autore

Alessio Cartocci
Alessio Cartocci
36 anni, "prestato" al bit da ormai quasi 15 anni, attualmente faccio spola tra l'Italia e la Svizzera, con un occhio verso il Nord Europa. "Prestato" perché non ho mai nascosto le mie tendenze umanistiche (laurea in lettere, dopo qualche esame di ingegneria) e altri percorsi fatti di musica, parole ed immagini. Per questo è stato naturale occuparmi di multimedialità cercando di coniugare la logica ferrea della programmazione alla creatività. Una sfida davvero stimolante, partita da un 486 finalmente dotato di una scheda audio (all'epoca) davvero innovativa: la Sound Blaster AWE 64. La voglia di esplorare strade sempre nuove e diverse mi ha portato dapprima a un progetto culturale interattivo scritto in Visual C++, poi alla realizzazione di CBT utilizzando ToolBook e ancora a lavorare con software audio/video specifici come Cubase e Premiere. Quest'ultima esperienza è poi culminata, nel 1997, in una specializzazione di "midifonico programmatore di sistemi di automazione musicale". La rete delle reti è arrivata due anni dopo e da allora è di casa:  ho curato la progettazione e realizzazione di una web-tv e di speciali multimediali per un portale nazionale rivolto agli italiani nel mondo, primo a sperimentare in Italia i codec RealVideo 8 e tra i primi a puntare sul linguaggio SMIL. In seguito ho svolto attività di formazione di base (Office, ECDL) e avanzata (Flash MX), prima di affrontare, dal 2002, un nuovo importante percorso come consulente nella riprogettazione di alcuni portali istituzionali. E questo percorso fece incontrare compiutamente a me, che usavo editor visuali (WYSIWYG), un modo completamente nuovo ed affascinante di creare e di progettare. L'iniziale difficoltà nel comprendere ed assimilare i molteplici temi e problemi legati agli standard e all'accessibilità fu ben presto soppiantata dalla sempre più forte convinzione di "fare la cosa giusta", e non solo a livello di codice. Così ho finalmente ripreso in mano l'argomento "multimedia", convinto che l'accessibilità sia una scelta doverosa anche per i progetti culturali, artistici, educativi o che semplicemente fanno largo uso di materiale multimediale. E, soprattutto, convinto che non bisogna mai essere stanchi di sperimentare, di essere "in viaggio".

Commenti

Nessun commento

    Rispondi

    Link e informazioni