Etiqueta de Audio y Videos HTML5


Etiqueta audio

Con esta etiqueta puedes añadir audio a tu sitio sin necesidad de plugins. Esta etiqueta permite los códec de audio ogg (ogg, oga), mp3, wav y AAC, aunque cada navegador soporta diferentes códec.

<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>
Etiqueta video

Esta etiqueta es similar a

<video width="320" height="240" controls autobuffer autoplay preload="none" poster="videoframe.jpg">
<source src="demo-video.mp4" type="video/mp4" />
<source src="demo-video.ogv" type="video/ogg" />
</video>

Funciones: controls, autobuffer, autoplay

Si el video no tiene los controles como play o pause, el atributo CONTROLS hará que aparezcan los controles por defecto del navegador, claro, eso depende de si por ejemplo fuera Opera o Safari.

Autobuffer hace que se comience a cargar el video en cuanto carga la página

Autplay comienza a reproducir el video en cuanto se carga un poco del buffer

Soporte de Códecs

¿Qué son los códec? Bueno, en realidad no vamos a entrar en detalles porque sería demasiado extenso todo, pero para dejárselas fácil; es una “herramienta” (por así decirlo) que nos permite decodificar el video o contenido multimedia en sí, de manera que el navegador pueda mostrarlo visual y correctamente al usuario.

He aquí los códec que usa y soporta cada navegador:

  • Chrome – H.264 y Theora (comúnmente llamado como OGG Vorbis)
  • Safari – H.264 y todo lo que use QuickTime
  • Firefox – Sólo Theora

Hay algo que muchos se preguntan; ¿Por qué Firefox solo soporta Theora y Safari sólo H.264? Es algo todavía complicado, pero resumiendo todo, es por que H.264 no es software libre, tienes que pagar por su uso, y digamos que los de Safari (Apple) son “de dinero”. En cambio Theora, como es libre y como Firefox es creada por una fundación que apoya el Software Libre, ya se imaginarán.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s