Come si fa ad inserire filmati in streaming dal proprio sito?

Credo di aver risposto a questa domanda già un paio di volte, sia privatamente che pubblicamente, adesso ho deciso di fare le cose per bene e di fornire questo piccolo vademecum, che spero vi faciliterà le cose quando vorrete mettere on line un vostro filmato.

Anzitutto la scelta del formato, se il vostro sistema operativo è Windows potreste optare per il formato wmv, vi elenco di seguito alcune motivazioni:

1. quasi tutti i pc Windows dispongono di Windows Media Player; 
2. a partire dalla stessa origine audio/video i filmati in formato wmv sono un po’ più compressi ed hanno una qualità video leggermente migliore rispetto ai loro equivalenti in formato mov;  
3. inoltre una volta che avrete realizzato il vostro video in formato wmv non è possibile importarlo in altri progetti, o almeno non è possibile farlo con programmi legali :-) .

E d’altra parte realizzare un wmv è relativamente semplice: Menu Avvio >> Accessori >> Svago >> Windows Movie Maker , con questo semplice programma potete importare video, foto e files audio. Se per caso non doveste trovare WMM potete comunque installarlo usando il disco di installazione di Windows (il programma è stato introdotto a partire da Windows ME), in alternativa, il link con le istruzioni per scaricarlo è questo: http://www.microsoft.com/windowsxp/downloads/updates/moviemaker2.mspx 


Un codice HTML abbastanza completo per far vedere un filmato è questo:

<object id="MediaPlayer1" width=”320” height=”240” classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"  type="application/x-oleobject" standby="Filmato in corso di caricamento...">

<param name="AutoStart" value="true"> <!-- Il filmato parte al caricamento della pagina -->
<param name="FileName" value="nome_filmato.wmv"> <!-- Istruzione molto importante in quanto permette di indicare il filmato da visualizzare -->
<param name="ShowControls" value="false"> <!-- non mostra i controlli di WMP -->
<param name="ShowStatusBar" value="true"> <!-- mostra la barra di stato -->
<param name="loop" value="true"> <!-- alla fine del filmato esso viene nuovamente riprodotto -->

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="nome_filmato.wmv" name="MediaPlayer1" width="320" height="240" autostart="1" showcontrols="0" showstatusbar="1"showdisplay="0">

</embed>

</object>

<!-- ecco un accorgimento molto utile, chi usa Linux può scaricare il filmato con un link diretto e poi vederlo sul proprio computer scaricando Mplayer -->

<p>Gli utilizzatori di sistema GNU/Linux possono visualizzare il <a href="nome_filmato.wmv" target="_blank" title="Link diretto al filmato">filmato</a> con  <a href="http://www.mplayerhq.hu/homepage/" target="_blank" title="Usi Linux? Scarica Mplayer">Mplayer</a></p>


Le proprietà nei tag param possono essere dichiarate vere o false, per intenderci per indicare SI o NO basta inserire true o false (o anche -1 o 0) nel attributo value. Dopo i tag param trovate il tag embed, la sua funzione è analoga a quella del tag object, si nota la presenza del attributo pluginspage, qui potete specificare un URL da cui scaricare ed installare il plugin necessario per eseguire il filmato.  

A questo punto ci si potrebbe chiedere per quale motivo utilizzare due tag diversi che hanno lo stesso scopo, la risposta è che il tag object consente al browser di caricare e renderizzare contenuti che nativamente non supporta. Se il browser deve caricare programmi esterni (ad esempio una applet Java o un plugin), le informazioni circa il contenuto che deve essere renderizzato sono contenute nel tag object, nei suoi  attributi, ed eventualmente, nei tag param ad esso associati ed innestati dentro di esso. Sebbene i browser attuali riconoscano il tag embed, le specifiche W3C per l’HTML indicano che la tendenza è quella di combinarlo con il tag object, al fine di dare a tutti i browser una possibilità di caricare il contenuto multimediale.

In altre parole se il filmato non viene caricato per mezzo di object viene caricato grazie ad embed e questa “regola” vale anche al contrario. Per chiarire ancora meglio il fatto che questa è una tecnica standard, basta considerare cosa avviene quando pubblichiamo un file Flash, la pagina ottenuta con Macromedia Flash per caricare il filmato ha un codice di questo tipo:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="600" height="200" id="nome_filmato" align="middle">

<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="nome_filmato.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">

<embed align="middle" src="nome_filmato.swf" quality="high" bgcolor="#ffffff" width="600" height="200" name="nome_filmato" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

</embed>

</object>


Naturalmente, trattandosi di un contenuto multimediale diverso da un wmv, gli attributi dei tag hanno valori diversi rispetto a quanto visto prima, ma ancora una volta è riscontrabile l’uso combinato di object ed embed. Con i tag param ci si può sbizzarrire, oltre ai comandi precedentemente indicati, ecco un elenco dei comandi principali:

<param name="AudioStream" value="-1"> <!-- Permette di indicare se permettere lo streaming dell'audio -->
<PARAM name="srcStart" value="immagini/nome_immagine.jpeg"> <!-- Se il player non è disponibile il browser cerca il primo tag param innestato, ad esempio un’immagine jpeg fissa -->
<param name="AutoSize" value="-1"> <!-- Autoridimensionamento -->
<param name="AutoStart" value="-1"> <!-- Partenza automatica -->
<param name="AnimationAtStart" value="-1"> <!-- Animazione alla partenza -->
<param name="AllowChangeDisplaySize" value="-1"> <!-- Possibilità di cambiare dimensione del display -->
<param name="AutoRewind" value="0"> <!-- Riavvio automatico -->
<param name="BufferingTime" value="7"> <!-- Tempo in secondi di buffering (i secondi di video da scaricare prima di vederlo) -->
<param name="ShowAudioControls" value="0"> <!-- Visualizza controlli audio -->
<param name="ShowDisplay" value="0"> <!-- Visualizza informazioni sul video -->
<param name="ShowPositionControls" value="0"> <!-- Visualizza i controlli --> 
<param name="ShowTracker" value="0">  <!-- Visualizza traccia -->

E’ ovvio che possono essere utilizzati filmati di formati diversi dal wmv: mov, mpeg, avi, etc, etc… ma in questo caso bisognerebbe specificare opportunamente il pluginspage ed il codebase. Non è obbligatorio o necessario ma chi vi naviga ve ne sarà grato.

Francesco Parisi

Reggio Calabria - 30/10/2004
(data ultima modifica)

Eventuali aggiornamenti di questa guida sono disponibili su http://fragger.altervista.org/download
Se hai apprezzato questo vademecum aiutami a migliorare il pagerank del mio sito, votami nella HeracleumTop100: http://heracleum.altervista.org/top/site.php?vote=118 .
Se vuoi aiutarmi ad offrire altri contenuti senza vedere pubblicità sul mio sito votami nella classifica di Altervista: http://fragger.altervista.org (il link per votarmi è nella homepage).