Como integrar vídeo en un sitio Web - Web Oficial | Kubikmedia programación y diseño web 2.0
Kubikmedia empresa dedicada al diseño web, programación de aplicaciones internet, creacion de gestores cms, infografia 3d e interactiva, y creación de videojuegos para moviles y web. También tenemos servidores para alojamiento de grandes empresas
Kubikmedia, kubik media,kubikmedia.com, diseño, diseño web, web webdsign, programación web, webs en flash, webs con bases de datos, bases de datos, videojuegos, 3d, aplicaciones movil, infografia interactiva, video interactivo, video, multimedia, creación de intranets, intranet, cms, gestos cms, creacion gestor cms, tienda online, online, video 3d interactivo, webdesign, web programation, databases, Web applications, 3D, CMS
53
post-template-default,single,single-post,postid-53,single-format-standard,woocommerce-no-js,ajax_fade,page_not_loaded,,columns-3,qode-theme-ver-9.2,wpb-js-composer js-comp-ver-5.1.1,vc_responsive
 

Como integrar vídeo en un sitio Web

Como integrar vídeo en un sitio Web

Cuando viene un cliente y nos pide que insertemos unos vídeos en su sitio Web y con el nuevo lenguaje HTML5, pensamos que es tan fácil como insertar la etiqueta vídeo pero no es asi. Ahora hemos estado con un proyecto de una bodega de Vinos en Albacete y Valencia. Tienen vídeos muy bien trabajados y que el cliente quería darle toda la relevancia posible y nos encontramos con la problemática del vídeo y los navegadores.

Y cómo se inserta un video dentro de una página web con la sintaxis de HTML5? Muy fácil:

<video id=»sampleMovie» src=»HTML5Sample.mov» controls></video>

¡Y ya está! Esto es todo cuanto necesitamos para incorporar un reproductor de vídeo a nuestro sitio web sin tener que acudir a complementos de otros fabricantes o añadir código de otros sitios: basta con una sencilla etiqueta.

¡Ojalá fuera todo así de simple!

La complejidad de HTML5 viene no de su sintaxis, sino del soporte que ofrezca el propio navegador y la codificación del vídeo. Los desarrolladores hasta ahora se las han visto negras para resolver los problemas de compatibilidad entre los diferentes navegadores, pero es que además existen discrepancias mucho más amplias de lo normal entre los distintos fabricantes de navegadores al respecto de los estándares de codificación (los «codecs») de vídeo. Para poder hacer un sitio HTML5 que funcione bien necesitaremos tener en cuenta la forma en que implementan los navegadores actuales, como Chrome 4, Firefox 4 e Internet Explorer 9 los estándares de vídeo para la web y también tendremos que resolver el problema de la reproducción en los navegadores antiguos.

Limitaciones y ventajas

Lo primero de todo, solo para poner nuestras expectativas en su justo término, tenemos que conocer cuáles son las limitaciones de HTML5 en el tema de la reproducción de vídeo.

La reproducción a pantalla completa no está incluida a día de hoy en la especificación de HTML5. En este momento bastantes ?pero no todos- los navegadores soportan la reproducción en pantalla completa.

Los menús por defecto del reproductor son muy básicos y puede que tengamos que dedicarle algo más de un ratito a darle un retoque para que su aspecto mejore, bien con skins, logos, imagen corporativa o adornos más o menos sofisticados. Para hacerlo aún más complicado, cada navegador sigue implementando el HTML5 y CSS de manera distinta. Añádele esquinas redondeadas, por ejemplo, y tu reproductor de vídeo puede parecer redondo en IE y Firefox y sin embargo seguir siendo cuadrado en Chrome y Safari.

En ningún sitio de la especificación se habla de streaming suave o adaptativo, una funcionalidad fundamental si queremos poner en marcha un sistema serio de reproducción de vídeo.

Y puede que lo más importante para algunos: la especificación no incluye (y evidentemente no lo hará nunca), la Gestión de Derechos Digitales (denominado DRM, de Digital Rights Management). Esto quiere decir que el contenido protegido por copyright nunca se va a poder distribuir mediante HTML5 (por parte de sus propietarios, se entiende).

Y por supuesto, el tema de los códecs. Pero hablaremos de esto dentro de un momento.

Y a cambio de renunciar a todo esto ¿qué tenemos? Pues bastante, sin duda.

Lo primero es que los desarrolladores ocasionales que no se centren especialmente en el tema del vídeo lo van a tener mucho, pero muchísimo más fácil para incorporar vídeo a sus páginas sin tener que depender de lo que se ofrece en otros sitios especializados de vídeo, como YouTube o Vimeo. Hasta ahora, los desarrolladores teníamos básicamente tres opciones a la hora de embeber vídeo directamente en la página:

  • Integrar un archivo directamente (sin streaming) que tendría que descargarse por completo antes de empezar su reproducción
  • Comprar un plug-in de algún fabricante (que puede que funcione en todos los navegadores, o no).
  • Utilizar un servidor de medios dedicado, una solución demasiado cara y/o complicada para muchos sitios.

HTML5 poner remedio a estos males ofreciendo a los desarrolladores una opción para reproducir vídeo en un reproductor personalizable sin necesidad de añadir software de terceros.

En segundo lugar, la especificación HTML5 permite a los desarrolladores disponer de vídeo en plataformas que tradicionalmente habían sido muy problemáticas, como por ejemplo los productos de Apple iOS (iPhone, iPad). Pero también podemos considerar este aspecto desde otro punto de vista: los programadores se quitan de encima la dependencia que tienen hoy día con respecto a las plataformas propietarias, que pueden restringir o controlar la forma en que se distribuye el vídeo en la web. Este es, al fin y al cabo, el objetivo para el cual se definen los estándares abiertos.

Finalmente, HTML5 no es una tecnología extraterrestre, es la última versión de HTML. Esto quiere decir que Javascript y CSS funcionarán bien aquí con el vídeo. Los desarrolladores podrán manipularlo desde el lado del cliente y del servidor, al igual que se hace con el código HTML actual.

Códecs de vídeo

Como dije antes, el problema más agudo con el vídeo en HTML5 consiste en preparar e incorporar el contenido en múltiples códecs. A día de hoy cada navegador tiene su propio formato de vídeo preferente. Y parece que la implementación fragmentada del vídeo en HTML5 va a ir a peor antes de que se resuelva definitivamente.

Ahora mismo tenemos hay tres posibilidades para codificar un vídeo:

  1. H.264 ? un formato muy conocido que aprovecha la aceleración por hardware, soportada por los procesadores de gráficos en los equipos de sobremesa, portátiles y dispositivos. Además es el formato de grabación por defecto de la mayoría de los dispositivos actuales de vídeo y móviles que se venden. Sin embargo es un formato patentado y aunque sigue siendo de libre acceso para uso no comercial, esta situación complica las cosas y puede ser una solución potencialmente muy cara. Puedes leer este documento para informarte en detalle si lo que quieres es publicar contenidos con fines comerciales. Está soportado en IE 9, Safari 3.1 y Chrome (de momento).
  2. Ogg Theora ? un estándar abierto no patentado y libre de derechos. Soportado en Firefox 3.5, Chrome 4, Opera 10.5
  3. VP8 (WebM) ? un estándar muy nuevo, comprado recientemente por Google y publicado como formato de código abierto y libre de derechos (pero patentado al fin y al cabo). Soportado en Firefox 4.0, Chrome 6.0, Opera 10.6.

En esta tabla se resumen todos los formatos soportados:

El caso de Chrome merece una atención especial, puesto que Google va a dejar de soportar uno de los tres formatos de vídeo de HTML5. Tras la compra de On2, un desarrollador y patrocinador del formato WebM, Google anunció que las futuras versiones de Chrome dejarán de soportar H.264. En su lugar han publicado WebM bajo licencia BSD, lo que garantiza de forma universal un uso gratuito, no exclusivo y libre de derechos de la licencia de su patente. Así, aunque Chrome es actualmente en único navegador que soporta los tres formatos, el mercado se tendrá que decidir muy pronto entre los dos navegadores por defecto de los sistemas operativos (Internet Explorer y Safari), que solo soportan H.264 y todos los demás, que soportan todos los formatos excepto H.264.

Nota importante: para simplificar mi explicación en este artículo, no estoy entrando en el tema de las muchas variantes que existen de los tres formatos básicos. Cuando nos metamos a hablar de las distintas posibilidades de perfiles de audio y vídeo y la distinción entre contenedores de audio y de vídeo y códecs, las cosas aún se complican más. Por ejemplo, aunque el iPhone4 graba vídeo en formato H.264, no lo podemos meter directamente en un sitio web de HTML5: tenemos antes que convertirlo a un perfil compatible.

Sería idean poder proclamar ante el mundo que el estándar X de vídeo es el soportado de forma universal y que ese es el formato que tenemos que utilizar con HTML5. Pero por desgracia, como se ve en la tabla anterior, las cosas no son así precisamente. Si incluyes una instalación de extensiones para el navegador para que la haga el usuario, el formato de vídeo con soporte más extendido sería el Ogg Theora. No obstante, no podemos suponer que los usuarios, y sobre todo los que se conectan a la web desde equipos de empresa, tengan los conocimientos o la capacidad necesaria para instalar códecs de vídeo adicionales, o extensiones de navegador solo para poder ver vídeos con HTML5. Si por algún motivo te ves obligado a tener que elegir un códec concreto para tus vídeos ¿cuál elegirías? Pues depende. Veamos qué opciones hay:

H.264

De los tres estándares, H.264 tiene la fama, la calidad y el reconocimiento por parte de los profesionales de los medios. Además tiene el respaldo de un consorcio colosal en el que participan algunos de los gigantes del sector, como Microsoft y Apple, a través de los contratos de licencia de MPEG. Y aquí radica la objeción más fuerte de los críticos: H.264 no es de libre acceso.

Para los consumidores sí que es gratis, y la mayoría de los desarrolladores no deberían preocuparse por las cuestiones de licencia. Pero no obstante, esto puede que no sea así en los sitios de distribución de vídeo. Las idas y venidas de la licencia de la patente de H.264 van más allá de las pretensiones de este artículo (y, la verdad, seguirlas es bastante complicado), pero creo que por ahora bastará con decir que la gente tiene dudas.

Para la mayoría de los desarrolladores, el tema de la patente va a quedar enmascarado, durante bastante tiempo, dentro de una discusión filosófica entre el concepto de estándares abiertos y la calidad de la imagen. H.264 ofrece una calidad de imagen superior y una difusión (streaming) mejor que Ogg (ver más abajo), y VP8 (WebM). Además se beneficia de las ventajas de la aceleración por hardware en muchas plataformas, como los PCs y dispositivos móviles.

Finalmente, debemos tener en cuenta la facilidad de la producción, que no es un tema menor. Todos los principales programas de edición de vídeo, como Final Cut, Adobe Premiere y Avid, exportan a formato H.264. No podemos decir lo mismo en el caso de Ogg Theora y VP8. Si tu empresa produce sus propios vídeos y son muchos, sin duda el empleo de H.264 en exclusiva os servirá para ahorrar un montón de tiempo y trabajo.

Ogg Theora

Ogg es el único estándar que realmente no está protegido de ninguna forma mediante patente. No obstante, también se puede decir que es el que ofrece la menor calidad, aunque también es cierto que la diferencia no es muy grande. Diversas comparaciones cara a cara con H.264 han dado como vencedor a éste último. Aunque Ogg codifica archivos de tamaño ligeramente inferior, produce una calidad de imagen peor que H.264 y aún se nota más cuando comparamos su capacidad para retransmisión por la red.

VP8 (WebM)

Entre ambos extremos de alta calidad pero sometido a patente (H.264) y calidad peor pero libre de derechos (Ogg) tenemos a VP8, probablemente el estándar que más controversia genera de los tres. Hasta ahora las pruebas muestran que H.264 ofrece una calidad de vídeo ligeramente superior comparado con VP8, pero esta diferencia es inapreciable para la mayoría de aplicaciones con fines comerciales.

La principal duda se plantea con respecto a los estándares abiertos. En un lado del debate tenemos a Google, que se aparta de H.264 en favor de su estándar WebM «abierto» hasta el punto de publicar WebM bajo la licencia de Creative Commons. Por el otro lado, tenemos a todo el mundo negando la mayor, ya que dicen que, en este caso, «abierto» puede que no signifique realmente «abierto». Poniendo como ejemplo los litigios pasados al respecto de JPEG, Microsoft avisa de que aunque WebM no esté gravado con una patente por cuenta de Google, sin una cláusula explícita por parte de Google de salvaguarda para el usuario, muchas empresas y particulares podrían verse envueltos en litigios por infracción de la patente, específicamente del contrato de licencia de MPEG, al distribuir vídeos en formato WebM.

En suma, que en la mayoría de situaciones no encontramos una solución que resuelva todas las necesidades de todos los proyectos bajo todas las circunstancias. Pero para la mayor parte de los proyectos y bajo la mayoría de circunstancias, lo más probable es que la mejor opción sea H.264. No solo es el formato de vídeo más extendido, tanto en el mundo de la producción como del consumo, sino que mantiene una clara ventaja gracias a la aceleración por hardware. En los sitios de vídeo comercial los posibles costes derivados del licenciamiento se compensarán por su mayor mercado potencial.

Pero es que todo este debate tiende a caer por su propio peso por una muy buena razón: a corto o medio plazo todos los navegadores soportarán HTML5. De todas formas, no todos ellos van a soportar todos los navegadores. Igual que no prepararíamos una plantilla de estilos que se vea bien en IE pero falle en Firefox, lo lógico es pensar que vamos a querer crear etiquetas de vídeo compatibles también con todos los navegadores.

Conversores de vídeo

Lo que significa esto, en términos prácticos para ti, el desarrollador, es que tus contenidos de vídeo van a tener que codificarse al menos en dos (idealmente en tres) formatos de vídeo para que puedan funcionar con la especificación de HTML5. Por suerte disponemos de varias herramientas que nos pueden ayudar con esta labor.

Miro Video Converter: Es tu herramienta de referencia: este conversor de código abierto, disponible en versiones para Mac y para Windows, convierte prácticamente cualquier formato de video de origen a todos los formatos de HTML5 que quieras utilizar y también a otros formatos específicos de dispositivos y plataformas.

Handbrake: Otro buen conversor de código abierto para Mac y Windows (y Linux también). Handbrake es una buena opción concretamente para convertir a H.264.

MPEG Streamclip (): Aunque no es código abierto, MPEG Streamclip se puede conseguir gratuitamente en versiones para Mac y Windows. Se maneja también con H.264, aunque puede convertir vídeos a otros muchos formatos que nos pueden servir para utilizarlos fuera de la especificación de HTML5.

Firefogg: Es una herramienta más especializada. Firefogg es una extensión de Firefox que convierte videos únicamente a formato Ogg, de ahí el nombre. Para poder utilizarla necesitarás descargar antes Firefox y luego instalar esta extensión.

Hay un excelente artículo que explica este procedimiento con más detalle, de Kroc Camen, llamado «Video for Everybody«. Puedes también encontrar un generador de código que incluye los tres tipos de formato de vídeo y un objeto flash en el blog de Jonathan Neal «Video for Everybody Generator«.

Recursos

Puedes visitar las siguientes páginas para conocer más a fondo las características de vídeo de HTML5, incluyendo los aspectos más intrincados de los códecs:

  • 5 Things You Need to Know about HTML5 Video and Audio ? una revisión altamente valorada por los lectores que explica cómo empezar a utilizarlo rápidamente en tu sitio web.
  • Dive Into HTML5 ? un recurso esencial para aprender HTML5 en general y sobre vídeo en particular.
  • Video Support Demo ? Un sitio web que compara distintos códecs uno contra otro, incluyendo distintos plug-ins disponibles.
  • Wiki Commons: Converting Video ? información abundante sobre Ogg-Theora, con información sobre códecs de audio y vídeo, reproductores y conversores.
  • Google drops support for H.264
  • H.264 and WebM ? Un post interesante sobre los distintos estándares de códecs en competencia y las perspectivas de los distintos fabricantes de navegadores.
referencia: http://www.htmlgoodies.com/
3.317 Comments

Sorry, the comment form is closed at this time.