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…