Aunque todavía Internet no está totalmente lista para ellas, todos los navegadores punteros ya las soportan, además de nuevas plataformas como Ipad y Iphone, las etiquetas de HTML5 <audio> y <video> son una gran manera de ahorrar trabajo y evitar el uso de flash, pero debido a la falta de acuerdos entre los desarrolladores de los navegadores, son dos propiedades que nacen con una desventaja con respecto a Flash y que hace obligatorio tener hasta versiones de un mismo contenido debido a que unos navegadores no dan soporte a codecs que otros navegadores de la competencia algo evidente entre la implementacion de los estándares H.264 de Microsoft-Apple y WebM de Google.
Agregar video mediante < video>
El planteamiento básico para una etiqueta de video sería:
<video width="360" height="280" controls="controls" src="video.mp4" poster="imagenprevia.jpg" preload="metadata" >
Su navegador no soporta HTML5
</video>
controls hace que aparezcan los controles.
src es la dirección del video.
poster es la imagen que será la vista previa.
height y width determinan el tamaño del video (Sin soporte de ajuste).
preload="metadata" evita que el video se cargue con la página, solamente los controles, hasta que se pulsa el botón play.
Entre <video> y </video> se puede poner un mensaje o un código alternativo (para Flash o Silverlight) cuando no se ejecute el contenido como pasa con la etiqueta <noscript>.
Pueden ver más atributos aquí.
El resultado será que solamente en Internet Explorer o Chrome funcionará, en Firefox aparecerá un espacio vacio en el reproductor.
Etiqueta <source>
Para solventar esto podemos podemos usar dentro de video la etiqueta <source> para cargar alternativas, mediante el atributo src="video.formato", esto significa que dependiendo del navegador, este elegirá uno u otro archivo:
Generalmente con mp4, mp3, ogv y ogg, daremos soporte a la mayoría de los navegadores, pero no a todos, algunos podrían requerir de WebM que tendríamos que agregar una tercera etiqueta source <source src="video.webm" type="video/mp4" /> -especialmente en los dispositivos móviles con android-, sin embargo, aquellos que han aceptado implementar WebM, también tiene soporte para Theore/Vorbis (ogg/ogv)
*Nota: múltiples etiquetas <source> no son soportadas en Iphone y Ipad, salvo la primera, por tanto es recomendable poner en primer lugar los archivos de mpeg-4 y mpeg-3 de H.264
<source> y tipos MIME
En source además del la dirección del archivo debemos especificar el tipo MIME de formato con el atributo type="video/formato" para los videos y type="audio/formato" para los audios.
Como ya se dijo existen tres estándares y cada uno soporta un formato diferente H.264 (mp4, mp3 y acc), THEORA/Vorbis (ogg y ogv) y WEBM (WebM)
El resultado será que tanto en Firefox 4, IE 9 y Chrome 12 veremos el siguiente video, aunque los controles varían de uno a otro:
Agregar video mediante <Audio>
El planteamiento básico para una etiqueta de audio es mucho más sencilla [Más atributos aquí]:
<audio controls="controls" src="audio.mp3" preload="metadata" >
Su navegador no soporta HTML5
</audio>
Sin embargo, nuevamente los mp3 no se podrán escuchar en Firefox por lo que tendremos que poner un archivo de audio en formato ogg.
<audio controls="controls" preload="metadata">
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
Su navegador no soporta HTML5
</audio>
El resultado será que tanto en Firefox 4, IE 9, Opera, Safari y Chrome 12 reproduciremos el siguiente audio:
Su navegador no soporta HTML5
Otros navegadores sin soporte HTML5
Para los navegadores antiguos o sin soporte para html5 podemos usar html5media, solamente se agrega entre <head> y </head> que usa Flowplayer para cargar en flash el video o audio.
Cualquiera puede implementar de forma fácil y práctica videos y audios.
Se puede modificar el comportamiento del video mediante Javascript.
Podemos crear nuestros propios controles mediante Javascript.
Podemos aumentar el soporte de <video> y <audio> mezclándolo con Flash.
Soportes gratuitos de conversión a WEB-M, H.254 y THEORA
Desventajas:
Soporte dividido
Diferentes navegadores soportan diferentes Codecs estandar de H.264 (mp4, mp3 y acc), THEORA/Vorbis (ogg y ogv) y WEBM (webm)
Diseño
El diseño del navegador no es estandarizado y si se quieren acciones avanzadas en los controles como pantalla completa y ajuste de relación de aspecto, se debe tener un javascript que provea estas funciones, no hay atributos que las provean.
Para rematarla, algunos navegadores no implementan correctamente la carga del reproductor, por lo que algunos botones son poco "usables" o interactivos en especial en Chrome.
Tamaño
Si tienes un sitio web convencional con hosting propio, resulta una locura almacenar dos o tres archivos en formatos distintos de un mismo audio o video, que de todas formas requerirá flash para dar todo su potencial, muchas veces es mejor usar un reproductor flash, debido a que no es una etiqueta madura, Sin embargo si el destino es para dispositivos portátiles como Ipad, Iphone, Android quizás sea la única forma de ofrecer video y audio.
Atributos parcialmente implementados
Por ejemplo, Chrome no maneja correctamente preload="metadata" y cargará todo el contenido con los metadatos en vez de solo los metadatos (controles e imagen pre), Internet Explorer al usar preload="none" ocultará los controles de reproducción, siendo necesario dar clic derecho y en Reproducir, cada vez que recarguemos la página en Chrome pasaremos por el mismo proceso de carga de los datos una y otra vez si no implementamos javascript con la funcion autoplay().
Streaming pobremente implementado
El streaming tiene el inconveniente de usar todo el ancho de banda de tu conexión, mientras un streaming normal solamente lo requerido por la cache. En HTML5 se tiene que cargar una y otra vez un video para escucharlo nuevamente, a menos que este sea almacenado en el mismo dominio o mediante Javascript.
Conclusiones
< video> y <audio>, no son una panacea para incluir material audiovisual, diversos problemas quizás no se resuelvan nunca, especialmente sus defectos en el soporte de codecs debido a intereses de sus desarrolladores y los costos de las licencias que genera el empleo de los mismos en navegadores web.
También su uso con flash presenta diversos problemas de compatibilidad y que en muchos casos obligan al empleo de Javascript para solventarlos, convirtiendo estas características nodales en HTML5 en secundarias y por regla general poco recomendables.
*Este artículo es una evaluación parcial e incompleta, contiene o puede contener diversos errores en el manejo e interpretación de las etiquetas < video> y <audio>, es susceptible de ser ampliado y/o mejorado.
Aunque todavía Internet no está totalmente lista para ellas, todos los navegadores punteros ya las soportan, además de nuevas plataformas como Ipad y Iph [..] Leer nota completa
Publicado 31-Dec-1969 por matius en General Leído 1 veces. Más resultados en
Esta es una lista de las aplicaciones que podrías usar para convertir a formato HTML5 tus video y audios que corresponden a los formatos mp4, mp3, ogg, ogv y webm. [..] Leer nota completa
Publicado 31-Dec-1969 por matius en General Leído 1 veces. Más resultados en
Google actualizo hace poco su pagina "What's new" para Gmail, con información acerca de una nueva característica muy esperada: "Voice and Video Chat". Lo particular es que todo se hace desde la misma pagina de Gmail, un poco incomodo para mi gusto, pero no deja de ser interesante... [..] Leer nota completa
Publicado 12-Nov-2008 por Sr. Byte en NoticiasPCPlayStation 3Video JuegosXbox 360#tgs2010assassin's creed brotherhoodavancetokyo game Leído 24 veces. Más resultados en
Blogs de Guatemala | Directorio de Blogs, donde los guatemaltecos escriben.
Noticias, información, clima, deportes, poesía, opinión, información Blogs de Guatemala Así se escribe en Guatemala. Directorio de Blogs Guatemaltecos
Gmail estará integrando servicio de audio y video en su chat.
Ahora podemos ver que Google sigue creando nuevos servicios, tomando en cuenta que este servicio que va a integrar, va a ser de mucha utilidad a todos los usuarios ya que la mensajería instantánea es un medio de comunicación muy necesario hoy en día.
Para utilizar [...]
[..] Leer nota completa
Publicado 11-Nov-2008 por Blogs de en artistas Leído 15 veces. Más resultados en
Clases de Ingles gratis. Curso gratuito de ingles Clases de ingles por internet Clase nueva ingresada Visite http://estudiaingles.blogspot.com para ver la clase completa. Gracias por su preferencia.
Sozo exchange es un lugar en donde pueden aprender inglés e intercambiar conocimiento gratisAquí en el intercambio de Sozo, trabajan diligentemente hacia la democratización de la educación por el que cualquier persona en el mundo tenga igualdad de acceso a los recursos educativos excelentes.Ofrecen lecciones de ingles gratis para personas como usted, quien tiene un horario complicado pero que quiere mejorar su habilidad en el idioma inglés. ¡Cualquier persona pued [..] Leer nota completa
Publicado 11-Nov-2008 por noreply@blogger.com (Carlos) en tablahtml5 Leído 20 veces. Más resultados en
Análisis de productos, noticias e información sobre iPod, iPhone, Apple TV, iTunes y reproductores mp3 iPodTotal - todo sobre iPod, iTunes, iPhone, Apple TV y reproductores mp3 todo sobre iPod, iTunes, iPhone, Apple TV y reproductores mp3
Clases de Ingles gratis. Curso gratuito de ingles Clases de ingles por internet Clase nueva ingresada Visite http://estudiaingles.blogspot.com para ver la clase completa. Gracias por su preferencia.
Sozo exchange es un lugar en donde pueden aprender inglés e intercambiar conocimiento gratis
Aquí en el intercambio de Sozo, trabajan diligentemente hacia...
[Este es un resumen de la entrada. Ir a la página principal para obtener toda la informació / Visit my website for full links, other content, and more! ]
Este es un resumen de la entrada. Para ver la entrada completa visitar la página principal] Leer nota completa
Publicado 27-Mar-2009 por noreply@blogger.com (Carlos) en Videos para aprender inglesListening / Audio Leído 10 veces. Más resultados en
Por si no lo sabías, SONY también mercadea una línea de productos de audio marino. Así que si tienes un bote y quieres reproducir tus CDs, MP3, WMA, AAC y ATRAC. Además de conectar tu iPod y llevar toda tu música al mar, puede interesarte el CDX-HP905IP.
Es todo lo que tiene el reproductor del auto, [...] [..] Leer nota completa
Publicado 25-Aug-2008 por Antes del Shopping en Tópicos aleatoriosagriculturaarancelesBananoChiquita Brands InternationalDel Monte FoodsDole Food Leído 13 veces. Más resultados en
Toda la información que buscas actualizada , nacional, internacional sobre politica, economía, insolitas, variedades, tecnologia, salud y belleza, cocina, mistico y divino, astrologia . Además este portal , cuenta con un Place un chat 2D único Venezolano, y postales para enviar . A traves de Venezuela A travs de Venezuela
Runrunes ( audio ) y Regao de Chvez a camarografos de VTV ( Video )
Runrunes del da de 28 de Julio con Nelson Bocaranda, donde toca los tips informativos del da como la noticia de la familia kirshner y la investigacin por corrupcin, y los encontronazos de Chvez con sus aliados, adems el video de Chvez regaa [..] Leer nota completa
Publicado 28-Jul-2008 por A traves en artistas Leído 21 veces. Más resultados en
Análisis de productos, noticias e información sobre iPod, iPhone, Apple TV, iTunes y reproductores mp3 iPodTotal - todo sobre iPod, iTunes, iPhone, Apple TV y reproductores mp3 todo sobre iPod, iTunes, iPhone, Apple TV y reproductores mp3
Análisis de productos, noticias e información sobre iPod, iPhone, Apple TV, iTunes y reproductores mp3 iPodTotal - todo sobre iPod, iTunes, iPhone, Apple TV y reproductores mp3 todo sobre iPod, iTunes, iPhone, Apple TV y reproductores mp3
Pioneer anunció el lanzamiento de una nueva línea de docks a/v que incluye a [..] Leer nota completa
Publicado 03-May-2010 por Ágata en AltavocesDocks Leído 8 veces. Más resultados en
Advertencia YAAQUI.COM no verifica la veracidad de la información publicada y no se responsabiliza
por el uso que se le de a la infomación del contenido publicado en los feeds y weblogs independientes.
Las opiniones vertidas en este sitio no necesariamente son nuestras. Nos reservamos el derecho de
remover cualqueir material que consideremos inconveniente.