HTML5 Vídeo en sitios web

26 septiembre, 2014 Diseño y Desarrollo web No hay comentarios
0 Shares Twitter 0 Facebook 0 LinkedIn 0 Google+ 0 Pin It Share 0 StumbleUpon 0 0 Shares ×

html5videoEn estos días la incorporación de vídeo en una página web es muy fácil, la etiqueta <video> en HTML5 es compatible con casi todas las versiones actuales del navegador, algo que nos ahorra muchos problemas que antes teníamos.

&amp;lt;video width=&amp;quot;300&amp;quot; height=&amp;quot;150&amp;quot; src=&amp;quot;tuvideo.mov&amp;quot;&amp;gt;&amp;lt;/video&amp;gt;

Ahora podemos  personalizar el vídeo sin software de terceros. <video> es muy simple: la complicación está en el soporte de los navegadores, especialmente en las versiones antiguas y móvil.Captura de pantalla 2014-09-25 a la(s) 17.32.53Una de las innovaciones que trajo la especificación HTML5 videos era la capacidad de compensar la falta de codecs navegador que ofrece el archivo de diferentes fuentes con el atributo src, para que el navegador pueda elegir el primero que es capaz de reproducir.Ahora mismo tenemos hay tres posibilidades para codificar un vídeo: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. Está soportado en IE 9, Safari 3.1 y Chrome (de momento).Ogg Theora –un estándar abierto no patentado y libre de derechos. Soportado en Firefox 3.5, Chrome 4, Opera 10.5VP8 (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.

&amp;lt;video id=&amp;quot;the-video&amp;quot; width=&amp;quot;640&amp;quot; height=&amp;quot;360&amp;quot; preload=&amp;quot;&amp;quot; controls=&amp;quot;controls&amp;quot; src=&amp;quot;tuvideo.mov&amp;quot;&amp;gt;&amp;lt;source src=&amp;quot;tuvideo.ogv&amp;quot; /&amp;gt;&amp;lt;source src=&amp;quot;tuvideo.webm&amp;quot; /&amp;gt;&amp;lt;/video&amp;gt;

Estos son los atributos de la etiqueta con los que podemos personalizar nuestro vídeo en la web:src: Nos enlaza el archivo de vídeo que queremos reproducir.width: Nos define el ancho del vídeo en píxeles.height: Nos define la altura del vídeo en píxeles.controls: Nos permite implementar los controles del reproductor por defecto del navegador como, botón play-pause, seek y volumen.preload: Nos carga un poco el archivo de vídeo antes de iniciar la reproducción en el buffer para que no se trabe por reproducir más de lo que carga.autoplay: Nos permite reproducir el archivo de vídeo desde que se carga la pagina.

0 Shares Twitter 0 Facebook 0 LinkedIn 0 Google+ 0 Pin It Share 0 StumbleUpon 0 0 Shares ×
Agencia Diseño Web 360 Okisam - Marketing online Valencia

Deja un comentario

El email es obligatorio pero no será visible para el público.

¿podemos ayudarte en algo?

Contacta con nosotros

¿Crees que podemos ayudarte con tu próximo proyecto?





Valencia