Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » HTML5 e JavaScript

Pagine:

RSS Download

Un player video in HTML5 con VideoJS

di: Filippo Buratti 23 Maggio 2011

VideoJS è un componente che consente di includere nelle nostre pagine web un Video Player in HTML5. È composto essenzialmente da 3 parti: un codice HTML di embed (che utilizza il tag video introdotto nelle nuove specifiche), una piccola libreria Javascript e un file CSS. Alcuni di voi si potranno domandare perché utilizzare VideoJS quando molti browser implementano già nativamente le funzionalità video con un player built-in. Vediamo allora subito i vantaggi e i motivi principali di questa libreria:

il codice utilizzato da VideoJS consente una compatibilità cross-browser pressoché completa, prevedendo anche un'alternativa facoltativa con Flash Player per i browser meno recenti che non implementano HTML5. I formati video supportati sono MP4 (codec video h.264), OGG Theora e WebM;
consente la correzione di eventuali bug dei browser e aggiunge funzionalità interessanti come il pulsante per la modalità full screen;
assicura un aspetto più coerente e uniforme al player e ai controlli incorporati nei diversi browser (e grazie all'utilizzo dei CSS, consente di creare facilmente delle interfacce personalizzate).

Letture consigliate per un approfondimento su HTML5 video e propedeutiche all'utilizzo di VideoJS sono Video for Everybody (su cui si basa il codice di embed di VideoJS) e naturalmente la guida HTML5 di Html.it.

Come utilizzare VideoJS

Per prima cosa è necessario effettuare il download dell'ultima versione di VideoJS, e dopo aver decompresso l'archivio zip, includere i file Javascript e CSS nell'head del documento. È richiesta solo qualche riga di codice Javascript che servirà per attivare il plugin al caricamento della pagina:

<head>
...
<script src="js/video.js" type="text/javascript"></script>
<script type="text/javascript">
  // Add VideoJS to all video tags on the page when the DOM is ready
  VideoJS.setupAllWhenReady();
</script>
<link rel="stylesheet" href="css/video-js.css" type="text/css">
...
</head>

In seconda battuta basta aggiungere il codice HTML necessario per l'embed, avendo cura di inserire nei vari tag source il percorso al formato del video che si desidera riprodurre. Come già detto è possibile utilizzare anche un player Flash alternativo (attribuendo all'object la classe "vjs-flash-fallback"), per i casi in cui manchi nel browser il supporto ad HTML5 o al formato video disponibile; l'esempio allegato a questo articolo include Flowplayer, prelevabile dal sito ufficiale, che presenta un'approfondita documentazione utile per una configurazione più avanzata delle varie impostazioni.

<div class="video-js-box">
  <video id="example" class="video-js" width="640" height="360" controls preload poster="images/poster.jpg">
    <source src="video/big_buck_bunny.mp4" type='video/mp4' />
    <source src="video/big_buck_bunny.ogv" type='video/webm' />
    <source src="video/big_buck_bunny.webm" type='video/ogg' />
    <object id="flash_fallback" class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="swf/flowplayer-3.2.7.swf">
      <param name="movie" value="swf/flowplayer-3.2.7.swf" />
      <param name="allowfullscreen" value="true" />
      <param name="flashvars" value='config={"playlist":["images/poster.jpg", {"url": "video/big_buck_bunny.mp4","autoPlay":false,"autoBuffering":true}]}' />
    </object>
  </video>
</div>

Pagina successiva

Pagine: