Come per il supporto dei formati audio, anche per quelli video la libreria si occupa di testare se un determinato formato è supportato dal browser. Anche in questo caso il funzionamento è del tutto identico all'esempio precedente. Al momento i due formati video supportati sono: ogg e h264.
Un esempio
Dopo aver visto alcuni semplici esempi di codice, vediamo insieme un esempio un po' più elaborato per l'integrazione di un player video all'interno di una pagina web: vediamo insieme come realizzarlo.
L'obiettivo di questo esempio è quello di garantire la visualizzazione del video in tutti i browser che supportano l'HTML5 cercando di ridurre al minimo l'utilizzo di player esterni. Per effettuare ciò sfrutteremo gli strumenti messi a disposizione da ognuno dei browser.
Innanzitutto procuriamoci un file video e convertiamolo nei formati ogg, mp4 e flv. Dovremo lavorare un po' di più per garantire la visualizzazione anche nel caso non ci siano i codec o ci sia qualche problema nella riproduzione ma andiamo per gradi.
Creiamo la nostra pagina HTML5 e includiamo la libreria Modernizr. Utilizziamo anche il codice CSS visto negli esempi precedenti per visualizzare il contenitore in base al supporto video. Il codice completo realizzato finora quindi è il seguente:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Modernizr - Sample Video</title>
<script type="text/javascript" src="modernizr-1.0.min.js"></script>
<style type="text/css">
body { background: #f7f7f7; color: black; text-align: center; }
.video #no-video,
.no-video #video { display: none; }
</style>
</head>
<body>
<!-- se il browser supporta il tag video -->
<div id="video">
</div>
<!-- se il browser non supporta il tag video -->
<div id="no-video">
</div>
</body>
</html>
Come spiegato in precedenza abbiamo due div, uno che conterrà il codice per i browser che supportano il tag <video> (#video), e l'altro per gli altri browser (#no-video).
Inseriamo ora il codice HTML all'interno del div #video:
<div id="video"> <video width="640" height="360" poster="poster.jpg" controls="controls"> <source src="http://tinyvid.tv/vfe/big_buck_bunny.ogv" type="video/ogg" /> <source src="http://tinyvid.tv/vfe/big_buck_bunny.mp4" type="video/mp4" /> </video> </div>
Con il codice precedente garantiamo a Firefox e Chrome la perfetta visualizzazione del video. Andiamo ora a lavorare per gli altri browser.
Per visualizzare correttamente il video anche in caso di codec non installati abbiamo bisogno di un player esterno. Per l'occasione abbiamo scelto FlowPlayer ma potete sceglierne uno qualsiasi. Per il codice all'interno del div #no-video andiamo ad utilizzare un trucchetto ideato da Kroc Camen.
Innanzitutto andiamo a creare un elemento object per la riproduzione del video mp4 compatibile con i computer che hanno il codec installato:
<!-- se il browser supporta gli mp4 --> <object width="640" height="375" type="video/quicktime" data="video.mp4"> <param name="src" value="video.mp4" /> <param name="autoplay" value="true" /> <param name="showlogo" value="false" /> </object>
Ora, prima del tag di chiusura dell'object, inseriamo il codice necessario al caricamento del player. Questo piccolo trucchetto consente il caricamento del player nel caso ci fossero problemi con l'utilizzo del codec mp4. Il codice in questo caso sarà il seguente (ovviamente cambierà in base al player scelto):
<!-- altrimenti carico un player esterno -->
<script type="text/javascript" src="flowplayer-3.1.4.min.js"></script>
<a
href="video.flv"
style="display:block;width:640px;height:375px"
id="player">
</a>
<script type="text/javascript"> flowplayer("player", "flowplayer-3.1.5.swf"); </script>
Il codice completo dell'esempio è disponibile per il download.
Conclusioni
Dall'articolo, e soprattutto dall'ultimo esempio, abbiamo potuto vedere che integrare contenuti multimediali all'interno di una pagina web diventa giorno dopo giorno sempre più semplice e meno laborioso. Nella speranza che la perfetta integrazione dell'HTML5 nei moderni browser diventi una realtà quanto prima, non ci resta che affidarci a strumenti come Modernizr per incominciare a sfruttare a pieno le potenzialità che questo linguaggio di markup ci offre.
Guide HTML/XHTML
Guida HTMLL'HTML è il principale linguaggio di pubblicazione di pagine Web.... |
Guida XHTMLXHTML è il nuovo standard per il WEB ed è la transizione verso... |
Newsletter @Daily HTML.it
Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |