Tutorial: Insertar Vídeo HTML5  

  

Imagen de Tutorial: Insertar Vídeo HTML5

Una de las nuevas novedades que trae consigo HTML5 son las etiquetas <video> </video><audio> </audio> , hoy quería explicarles como incorporar estas etiquetas en su web y al final un truco de compatibilidad para que así funcione en el 99% de los navegadores (100% no, por que no falta quien ademas de tener un navegador viejo, tampoco tenga flash player).

En teoría <video> </video> deberia funcionar igual o muy similar a <img> </img> por lo cual cuando insertamos el codigo muchos cometemos el ERROR de colocarlo de este modo:

<video src=”video.formato” width=”640″ height=”480″> </video>

Lo que en teoría no esta mal, sin embargo como html5 todavía no es un estándar terminado hay ciertos aspectos que no están estandarizados, como lo es el codec de vídeo a usar, aquí surgen algunos problemas. Hay 3 codecs en este momento que se están disputando el convertirse en estándar: Avc/Mp4a, Vp8/Vorbis, Theora/Vorbis.

  • Avc/MP4a: es un codec muy expandido, muchos gadgets graban nativamente en este codec, es el muy conocido H.264 y lo usan sobretodo las extensiones .mp4, .mkv, m4v, el problema con este es que no es un codec abierto y hay que pagar por usarlo, le pertenece a la MPEGLA y varias compañías ganan acosta de el, lo aceptan reproductores Flash, Internet Explorer 9.0+, Android Browser 3.0+ y Safari 3.1+.
  • Vp8/Vorbis: es un codec abierto, VP8 es un codec de vídeo por el cual Google compro toda una empresa para liberarlo y Vorbis es un Codec de Audio Open Source, lo aceptan: Firefox 3.5+, Chrome 3+, Chromium r18297+, Android Brower 2.3+, Opera 10.50 parace el codec ideal ya que su comprencion en memoria es muy similar a H.264 y no pierde casi nada de calidad. el problema con este es que muchas compañias de navegadores(Leáse por estas Microsoft y Apple) no lo quieren aceptar ya que estos ganan ingresos con H.264, usa la extensión .webm .
  • Theora/Vorbis: casi igual a el anterior en este solo cambia el codec de vídeo a uno que también es Open Source y lo aceptan los mismos navegadores en casi las mismas versiones, y tiene el mismo problema de el anterior, usa la extensión .ogv.

Hasta que la W3C no decida uno lo recomendable es usar 2 0 los tres, yo recomendaría Avc/Mp4a y Vp8/Vorbis o Avc/Mp4a y Theora/Vorbis ya que al usar Vp8/Vorbis y Theora/Vorbis no se hace mucho por que se limitaría a los mismos dispositivos ademas con Avc/Mp4a puedes usarlo en Reproductores Flash y así verlo también en navegadores antíguos.

Osea que mínimo necesitaras subir dos videos con dos codecs diferentes. Primero Configuraremos el Tag <video> en sí y después le agregaremos los source (o mejor dicho los 2/3 vídeos).

Imagen de Tutorial: Insertar Vídeo HTML5

Atributos del Tag <video>:

  • class=” “ : la clase el Objeto, yo simplemente coloco vídeo.
  • loop : cuando finaliza el vídeo vuelve a empezar
  • width=” “ : el ancho de el vídeo.
  • height=” “ : el alto de el vídeo.
  • controls : si lo coloca te muestra los controles de reproducción (play, pausa, barra de carga, volumen) es diferente dependiendo de el navegador.
  • preload : carga el vídeo inmediatamente al abrir la página aunque no haya dado al boton play.
  • autobuffer=” “ : como preload, tiene valores “true” o “false”.
  • autoplay=” “ : reproduce el vídeo al abrir la pagina sin tener que dar play, tiene valores “true” o “false”, si lo colocamos y dejamos vació se asumirá como positivo.
  • src=” “ : no lo usaremos en vez de el usaremos <source> para cargar los diferentes videos.
  • poster=” “ : especifícas una imagen de portada.
  • type=” “ : lo usaremos tambien en <source> para decir que tipo de archivo es.
  • codecs=” ” : lo usamos en <source> dentro de type para decir que codec utiliza.

para el video en flash por si el navegador no soporta HTML5,  usare el flowplayer.

Ejemplo Código (PD: colocare todo entre un DIV pero no es necesario):

<div class="video">
 <video class="video" width="854" height="480" controls preload autoplay poster="imagen.jpg">
 <!-- Vídeos en HTML5-->
 <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
 <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
 <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' />
 <!-- Reproductor Flash -->
 <object width="854" height="480" type="application/x-shockwave-flas" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
 <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
 <param name="allowfullscreen" value="true" />
 <param name="flashvars" 
 value='config={"playlist":["", {"url": "Video.mp4","autoPlay":true,"autoBuffering":true}]}' />
 <!-- POSTER Imagen de Vídeo Flash -->
 <img src="imagen.jpg" width="854" height="480" alt="poster" title="" />
 </object>
 </video>
 </div>

Imagenes & Logotipos | W3C

Fuente | W3Schools

Tabla Compatibilidad Codecs | Wikipedia

Recuerda que puedes seguirme en Twitter para conversar o discutir sobre los temas tratados en Geektual, pedir que se hable sobre algo o preguntarme sobre cualquier cosa que gustes =>

Comentarios

Los usuarios llegaron buscando:

html5, insertar webm, insertar video html5