Per poter rivivere brevemente i ricordi, ecco un esempio su come si integrano tradizionalmente i video in un sito web:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Una tale sintassi è tutto tranne che bella.
Ma anche se si lascia da parte il punto di vista estetico: la sintassi in questa forma è semplicemente troppo soggetta ad errori e complessa. In HTML5 è molto più semplice integrare i video. A tale scopo viene utilizzato l'elemento video.
Ecco un esempio su come integrare l'elemento video:
<video src="video.ogv" width="300" height="200"> Il tuo browser non supporta purtroppo HTML5 </video>
Questa è la forma più semplice. Tre attributi sono fondamentali per questa forma di sintassi. Attraverso src viene specificato il video da integrare. Prestare attenzione alla corretta indicazione del percorso. I due attributi width e height determinano la larghezza e l'altezza del video. Se uno dei due valori non viene specificato, il video verrà visualizzato con le dimensioni originali. Se si specifica solo uno dei due valori, l'altro viene calcolato automaticamente dal browser. L'attributo autoplay instruisce il browser ad avviare automaticamente il video non appena la pagina è stata caricata. Di solito, questo attributo non dovrebbe essere impostato poiché la riproduzione automatica di solito non è gradita dagli utenti. Questo vale ancora di più per gli utenti che utilizzano dispositivi mobili con connessioni a banda limitata.
Un altro attributo interessante è controls. Se utilizzato, il browser visualizza elementi di controllo nativi per la riproduzione e il volume.
<video src="video.ogv" width="300" height="200" controls> Il tuo browser non supporta purtroppo HTML5 </video>
Ecco il risultato nel browser:
Attraverso la barra visualizzata è possibile non solo fermare e riavviare il video, ma sono disponibili anche i controlli del volume.
Puoi specificare un'immagine tramite l'attributo poster, che verrà visualizzata fino all'avvio del video. Per questo viene utilizzato l'attributo poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Il tuo browser non supporta purtroppo HTML5 </video>
Anche qui, prestare attenzione alla corretta indicazione del percorso per garantire che l'immagine venga visualizzata correttamente.
È necessaria cautela nell'uso dell'attributo autoplay. Questo attributo specifica che il video dovrebbe essere riprodotto automaticamente non appena è disponibile.
<video src="video.ogv" width="300" height="200" autoplay> Il tuo browser non supporta purtroppo HTML5 </video>
Per quanto riguarda il traffico, potrebbe essere interessante l'attributo preload. Questo attributo controlla il comportamento del pre-caricamento. L'attributo può assumere i seguenti valori:
• auto – Il browser può pre-caricare l'intero file.
• none – Il file non deve essere pre-caricato.
• metadata – Il file può essere pre-caricato.
In assenza dell'attributo preload, vengono utilizzate le impostazioni predefinite del browser.
Video e i Codec
Chi si occupa dell'inserimento e della riproduzione di video sulle pagine web si imbatterà prima o poi nella problematica dei diversi codec. Grazie a questi codec è possibile comprimere ed estrarre video in modo efficiente. Il problema è che finora i produttori di browser non sono riusciti a trovare un formato di codec comune. Per HTML5 (e quindi alla fine anche per voi) questo significa che non esistono codec uniformi per video e file audio.
Per i video, i formati Ogg e MP4 si sono ormai consolidati. Pertanto, si è sempre dalla parte giusta se si offre il video in questi due formati. A tal fine, si assegnano due elementi source all'elemento video.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Quindi qui non si specifica la fonte video all'interno dell'elemento video. Piuttosto, vengono fornite solo informazioni generali sulla visualizzazione. Il video da visualizzare viene invece determinato dall'elemento source. All'attributo src viene assegnato il video corrispondente. Dopo type segue l'indicazione del tipo di video o del formato in cui il video è disponibile.
Se sono specificati più elementi source, il browser riprodurrà sempre il primo video che "sì adatta". Verrà spiegato di seguito cosa significa questo "sì adatta".
Ma quale formato supporta effettivamente quale browser? La risposta a questa domanda è fornita nella tabella seguente.
| Browser | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Dalla versione 9 | |
| Mozilla Firefox | Sì | |
| Google Chrome | Sì | Sì |
| Opera | Sì | |
| Safari | Sì | |
| iPhone | Sì | |
| Android | Sì |
La tabella evidenzia il dilemma: l'interpretazione dei formati è quasi equamente distribuita tra i vari browser. Quindi si è quasi costretti a specificare i video in entrambi i formati.
Attraverso l'attributo media, che può essere assegnato esclusivamente all'elemento source, è possibile specificare esplicitamente per quale tipo di supporto il video è adatto. Per specificare video specifici per determinati dispositivi finali, l'attributo src deve essere assegnato all'attributo media. Attraverso questo attributo media, si specifica il tipo di supporto desiderato.
Un possibile utilizzo dell'elemento source potrebbe apparire così:
<video width="400" height="300">
<!-- Solo per dispositivi mobili -->
<source src="video_mobile.ogg" media="handheld" />
<!—Per tutti gli altri dispositivi -->
<source src="video_normal.ogg" media="all" />
</video>
In base all'attributo media, si controlla se si tratta di un dispositivo mobile. In tal caso, viene riprodotto un video di dimensioni minori. Se si tratta di un altro dispositivo, viene utilizzato il valore "all".
Integrazione sicura dei video
Come è noto, l'HTML5 non è ancora supportato da tutti i browser. Questo vale naturalmente anche per l'elemento video. Una soluzione è offerta dalla combinazione di diverse tecniche di integrazione. Vengono quindi combinati i ben noti elementi object e embed con video. Potrebbe apparire così:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
I video integrati in questo modo saranno riproducibili nella maggior parte dei browser. I browser che conoscono l'elemento video vi accedono. Gli altri browser, invece, utilizzano le informazioni negli elementi object o, appunto, negli elementi embed.
