Formato de videos para HTML5

03/10/2011       Sergio Raposo Vargas       Maquetación y diseño, Programación

Una de las grandes novedades de HTML5 son las etiquetas que dan soporte a contenido multimedia del estilo de video, audio o canvas.

En el tema de video y audio entran en juego ahora los distintos formatos soportados por los distintos navegadores, que hacen que tengamos que subir un mismo video en varios formatos para que se vean en la mayoría de navegadores y dispositivos posibles.

Pues bien, si el video es alojado en OpenCms (si el vídeo es demasiado grande no se recomienda subirlo al VFS ya que sobrecarga demasiado la BBDD), tenemos que tener en cuenta los formatos que soporta OpenCms. Por defecto los mimetypes definidos en OpenCms referente al tema de video son:

AUDIO

<mimetype extension=".au" type="audio/basic" />
<mimetype extension=".snd" type="audio/basic" />
<mimetype extension=".it" type="audio/it" />
<mimetype extension=".funk" type="audio/make" />
<mimetype extension=".my" type="audio/make" />
<mimetype extension=".pfunk" type="audio/makemyfunk" />
<mimetype extension=".rmi" type="audio/mid" />
<mimetype extension=".kar" type="audio/midi" />
<mimetype extension=".mid" type="audio/midi" />
<mimetype extension=".midi" type="audio/midi" />
<mimetype extension=".m2a" type="audio/mpeg" />
<mimetype extension=".mp2" type="audio/mpeg" />
<mimetype extension=".mp3" type="audio/mpeg" />
<mimetype extension=".mpga" type="audio/mpeg" />
<mimetype extension=".s3m" type="audio/s3m" />
<mimetype extension=".tsi" type="audio/tsp-audio" />
<mimetype extension=".tsp" type="audio/tsplayer" />
<mimetype extension=".qcp" type="audio/vndqcelp" />
<mimetype extension=".vox" type="audio/voxware" />
<mimetype extension=".aif" type="audio/x-aiff" />
<mimetype extension=".aifc" type="audio/x-aiff" />
<mimetype extension=".aiff" type="audio/x-aiff" />
<mimetype extension=".gsd" type="audio/x-gsm" />
<mimetype extension=".gsm" type="audio/x-gsm" />
<mimetype extension=".jam" type="audio/x-jam" />
<mimetype extension=".lam" type="audio/x-liveaudio" />
<mimetype extension=".mod" type="audio/x-mod" />
<mimetype extension=".m3u" type="audio/x-mpegurl" />
<mimetype extension=".wma" type="audio/x-ms-wma" />
<mimetype extension=".la" type="audio/x-nspaudio" />
<mimetype extension=".lma" type="audio/x-nspaudio" />
<mimetype extension=".ram" type="audio/x-pn-realaudio" />
<mimetype extension=".rm" type="audio/x-pn-realaudio" />
<mimetype extension=".rmm" type="audio/x-pn-realaudio" />
<mimetype extension=".rmp" type="audio/x-pn-realaudio-plugin" />
<mimetype extension=".rpm" type="audio/x-pn-realaudio-plugin" />
<mimetype extension=".sid" type="audio/x-psid" />
<mimetype extension=".ra" type="audio/x-realaudio" />
<mimetype extension=".vqf" type="audio/x-twinvq" />
<mimetype extension=".vqe" type="audio/x-twinvq-plugin" />
<mimetype extension=".vql" type="audio/x-twinvq-plugin" />
<mimetype extension=".mjf" type="audio/x-vndaudioexplosionmjuicemediafile" />
<mimetype extension=".voc" type="audio/x-voc" />
<mimetype extension=".wav" type="audio/x-wav" />
<mimetype extension=".xm" type="audio/xm" />

 

VIDEO

<mimetype extension=".afl" type="video/animaflex" />
<mimetype extension=".avs" type="video/avs-video" />
<mimetype extension=".m1v" type="video/mpeg" />
<mimetype extension=".m2v" type="video/mpeg" />
<mimetype extension=".mpa" type="video/mpeg" />
<mimetype extension=".mpe" type="video/mpeg" />
<mimetype extension=".mpeg" type="video/mpeg" />
<mimetype extension=".mpg" type="video/mpeg" />
<mimetype extension=".moov" type="video/quicktime" />
<mimetype extension=".mov" type="video/quicktime" />
<mimetype extension=".qt" type="video/quicktime" />
<mimetype extension=".vdo" type="video/vdo" />
<mimetype extension=".rv" type="video/vndrn-realvideo" />
<mimetype extension=".viv" type="video/vndvivo" />
<mimetype extension=".vivo" type="video/vndvivo" />
<mimetype extension=".vos" type="video/vosaic" />
<mimetype extension=".xdr" type="video/x-amt-demorun" />
<mimetype extension=".xsr" type="video/x-amt-showrun" />
<mimetype extension=".fmf" type="video/x-atomic3d-feature" />
<mimetype extension=".dl" type="video/x-dl" />
<mimetype extension=".dif" type="video/x-dv" />
<mimetype extension=".dv" type="video/x-dv" />
<mimetype extension=".fli" type="video/x-fli" />
<mimetype extension=".gl" type="video/x-gl" />
<mimetype extension=".isu" type="video/x-isvideo" />
<mimetype extension=".mjpg" type="video/x-motion-jpeg" />
<mimetype extension=".asf" type="video/x-ms-asf" />
<mimetype extension=".wmv" type="video/x-ms-wmv" />
<mimetype extension=".avi" type="video/x-msvideo" />
<mimetype extension=".qtc" type="video/x-qtc" />
<mimetype extension=".scm" type="video/x-scm" />
<mimetype extension=".movie" type="video/x-sgi-movie" />
<mimetype extension=".mv" type="video/x-sgi-movie" />

 

Pero como vemos para dar soporte a los nuevos formatos debemos agregar nuevos mimetypes, los más importantes son:

<mimetype extension=".flv" type="video/x-flv"/>
<mimetype extension=".ogv" type="video/ogg"/>
<mimetype extension=".ogg" type="audio/ogg"/>
<mimetype extension=".mp4" type="video/mp4"/>
<mimetype extension=".webm" type="video/webm"/>

 

Para añadir esta configuración tan solo tenemos que editar el fichero de configuración opencms-vfs.xml (%OPENCMS_HOME/WEB-INF/config/).