Inserire un video in una pagina web con HTML5 e VideoJs

Tempo fa avevo parlato su queste pagine dell’elemento video per l’html5.

Tra i maggiori vantaggi di questa soluzione c’è l’esclusione di flash per device mobili (nello specifico ipad ed iphone).
Dall’ultimo articolo è passato un po’ e trovandomi a dover integrare un video per un progetto ho rivisto le mie precedenti nozioni sul tema.

Come prima cosa ho cercato una soluzione di veloce integrazione ma che garantisse un buon supporto e mi sono imbattuto in videojs (http://videojs.com/).

Un ottimo script che offre:

  • un file javascript (valuta se il browser supporta l’elemento video nel caso offre flowplayer)
  • un css (per gestire lo stile del player)
  • inclusione esterna a flowplayer (per browser che non supportano l’elemento video)

L’applicazione è estremamente semplice, nel caso non siate pratici del codice potete utilizzare il comodo tool (http://videojs.com/embed-builder/) che assembla il codice necessario al volo.

E’ sufficiente inserire le risorse necessarie, ovvero:

  • url dell’immagine di default (viene mostrata mentre il video viene caricato)
  • url delvideo in mp4
  • url del video in ogg
  • url del video in webm

tra le opzioni vediamo:

  • quale video caricare nel player flash (di default l’mp4)
  • altezza e larghezza del video
  • se inserire i link per il donwload del video (per device che non supportano i video)
  • support videojs (inserisce o meno un link al sito di videojs)
  • preload (permette di far partire il buffer non appena la pagina è caricata)
  • autoplay (fa partire il video in automatico)compact version (codice senza spazi per peso inferiore)

Con questa soluzione si velocizza notevolmente l’inserimento dei video in html su siti e applicazioni web, l’unica miglioria che mi sento di consigliare è quella di evitare l’inclusione esterna del flowplayer ma caricare la risorsa sul proprio spazio e richiamarla come tale.
In questo modo otteniamo un caricamento più veloce (e più gestibile) del player in flash oltre che assicurarci una versione più aggiornata rispetto a quella impostata nello script.

L’ultima considerazione su questa tecnica è la conversione del video nei tre formati necessari, sicuramente complessa per chi è poco pratico di questo ambito. Il mio suggerimento è quello di provare ad utilizzare vlc per la conversione, che permette un’ampia e dettagliata scelta dei codec e dei formati nella sua ultima versione includendo sia mp4 che ogg.

Come alternativa è possibile utilizzare handbrake (http://handbrake.fr/) per l’mp4 e ffmpeg2theora (http://v2v.cc/~j/ffmpeg2theora/) per l’ogg, nel caso non siate pratici di dos esiste una versione con interfaccia (http://www.softpedia.com/downloadTag/theora+converter) basata sullo stesso convertitore.
Se non incontrate successo con queste opzioni suggerisco una visita a questo post (http://www.reelseo.com/html5-ogg-h264-encoding-tools/), dove vengono consigliati numerose alternative.

Tra i consigli ho omesso un convertitore per il formato webm (http://www.webmproject.org/), personalmente non ho avuto fortuna e non son riuscito ad ottenere un file video funzionante per questo formato, probabilmente anche per il poco tempo a disposizione.

Per ora ho quindi preferito omettere questa alternativa nei miei progetti non essendo questo formato l’unico supportato dai diversi browser. Per il futuro spero di potermi applicare di più, in attesa vi lascio la lista di convertitori suggerita nel sito del webm (http://www.webmproject.org/tools/) per fare qualche test.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli. Contrassegna il permalink.

3 risposte a Inserire un video in una pagina web con HTML5 e VideoJs

  1. poci scrive:

    bellissima recensione di quelle che saranno le specifiche future per la pubblicazione dei video su web.
    Da buon smanettone video consiglio anche questi altri due programmi (entrambi gratuiti) per convertire i video.

    media coder -> http://www.mediacoderhq.com/
    winFF -> http://winff.org/html_new/

    Il primo è in assoluto il più completo ceh conosca come formati di output però ha un numero tale di opzioni che a volte mette in crisi pure me.

    Il secondo invece anche se permette di esportare in un buon numero di formati pecca per la mancanza dell’ogg. Però ha dalla sua che è davvero semplice e in questo paio d’anni che lo utilizzo non ha mai dato problemi o conversioni interrotte da crash improvvisi!

  2. Mauro Accornero scrive:

    Ciao Marco!

    Ottimi suggerimenti, io ho trovato questo: http://www.mirovideoconverter.com, non permette molte opzioni nell’esportazione ma mi sembra faccia il suo lavoro.

    • poci scrive:

      nostalgico dei tempi in cui ricordo Miro in beta ho dovuto scaricare il convertitore e provarlo subito!
      Devo dire che la prima conversione che ho fatto in mp4 mi ha stupito per la velocità, la seconda conversione dello stesso video in theora è stata un po’ meno esaltante…
      Ma a parte questo che comunque non è stato nulla di così traumatico attendere, la totale assenza delle opzioni di conversione (come un semplice ridimensionamento) mi ha lasciato un attimo perplesso!
      Raramente, se non mais, i clienti passano i video nelle dimensioni corrette… ed è un potenziale punto a sfavore!
      però per chi è proprio all’oscuro di video lo consiglierei lo stesso:P
      almeno non c’è da impazzire nei settaggi!

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>