Etiquetes

,

Feia temps que buscava alguna solució pels vídeos inclosos dins d’un web. El tag <video> d’HTML5 és fantàstic, si, però encara hi ha molts usuaris que tenen navegadors que no el suporten. Però em van recomanar un component en Javascript, anomenat VideoJS, que soluciona bona part dels problemes.

Fins l’aparició del tag <video> amb HTML5, la única manera de reproduïr un vídeo amb certes garanties era l’ús de Flash, amb el vídeo convertit a format FLV. Abans, en èpoques dels primers Internet Explorer, es feia directament a través d’un objecte de Windows Media Player. En qualsevol dels casos, però, depeníem de diversos factors: còdecs instal·lats, plug-in de Flash (que Apple ja no incorpora),… Com fer-ho? Havia provat diversos components però no m’acabaven de convèncer, fins que em van recomanar VideoJS.

Sembla un anunci, però no ho és. Perquè en vaig quedar content, és senzill, i cobreix prou casos: navegadors amb HTML5 o, en cas contrari, que tinguin el plugin de Flash. Deixarem gent sense veure’l, però de vegades és millor un missatge amb un enllaç a descarregar l’arxiu de vídeo que fer experiments extranys.

A partir, doncs, de la descàrrega d’un arxiu ZIP que conté unes quantes carpetes, les podem publicar a l’FTP i incloure l’arxiu Javascript i el full d’estils en CSS. Llavors, només necessitem incloure un tag <video> perquè VideoJS faci la resta de la feina. D’aquesta manera, a més, no haurem de patir per canviar codis ni res per l’estil. Al tag <video> se li assigna una classe concreta i ja està: si cal fer “loop” o “autostart”, o posar els controls de volum i de pausa, s’indica dins del mateix tag. I també hi ha certes opcions addicionals que podem incloure a través del mateix Javascript.

Un consell: mireu-vos l’arxiu .js, ja que conté una ruta absoluta de l’arxiu Flash per incloure si el navegador no té suport per HTML5. Segurament us interessarà canviar l’adreça que hi apareix per una de pròpia. I per no tenir problemes, inclogueu els vídeos, dins el tag <video>, amb la ruta completa (http://&#8230;). I ja estarà.

Anuncis