Incluir en mis sitios favoritos
Ingresar Salir Inscribirme
Buscar Ayuda Contactar Ingresar Directorio Ultimos
Búsqueda avanzada
Preguntas frecuentes
BUSCAR EN: BLOGS FOTOS
 

Hola, Invitado
Ingresar  Inscribirme
En línea: 3111 visitantes

Alemania (2)
Argentina (52)
Belice (2)
Bolivia (11)
Brasil (7)
Canadá (1)
Chile (18)
Colombia (18)
Costa Rica (26)
Cuba (20)
Dominicana, República (17)
Ecuador (5)
El Salvador (18)
España (179)
Estados Unidos (12)
Francia (2)
Guatemala (12)
Honduras (3)
Israel (0)
Italia (2)
Jamaica (0)
México (46)
Nicaragua (3)
Países Bajos (0)
Panamá (14)
Paraguay (6)
Perú (21)
Puerto Rico (6)
Reino Unido (1)
Uruguay (9)
Venezuela (38)





Búsquedas recientes

Lo más popular

Lo más buscado este mes

Archivo Weblogs


DIRECTORIO WEBLOGS :: México > Tecnología Incluir BlogMéxico >  Tecnología Weblogs de Yaaqui.com DIRECTORIO WEBLOGS
Cgnauta Blog
creado con Blogger  en Mexico DF
ENVIAR A UN AMIGO
Para subscribirse a  requiere identificarte
Usuario: Ingresar

Blog de diseño gráfico, informática, tecnología y cultura política.
VisitarCGnauta Blog
Dirección URLhttp://cgnauta.blogspot.com/    Registrado:03-Feb-2008
Compartir:

Compartir en Facebook Compartir en Twitter Stumble It More...


Enviar a email
Visitar Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5 Etiquetas
Por matius
el 31-Dec-1969


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>
  1. controls hace que aparezcan los controles.
  2. src es la dirección del video.
  3. poster es la imagen que será la vista previa.
  4. height y width determinan el tamaño del video (Sin soporte de ajuste).
  5. preload="metadata" evita que el video se cargue con la página, solamente los controles, hasta que se pulsa el botón play.
  6. 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>.
  7. 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:
<video width="320" height="240" controls="controls" poster="imagenprevia.jpg" preload="metadata" >
<source src="video.ogg" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
Su navegador no soporta HTML5
</video>
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)

Tipos en video:
type="video/ogg"
type="video/webm"
type="video/mp4"
Tipos en audio:
type="audio/ogg"
type="audio/mpeg"
type="video/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.
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
  • Ver Web de HTML5Media.
Ventajas:
  • 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.

Recursos
  • Convertidor de video a HTML5
  • Música de French Zone - Volumen 7
  • Video de Wikipedia commons


Leído 1 veces

Para Subscribirse a  requiere identificarse antes
Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5 en  Weblogs de Yaaqui.com  Mexico DF Blog de diseño gráfi

Fotologs
Valve podría estar presentando una nueva consola en el GDC

Foto 0 en  - Valve podría estar presentando una nueva consola en el GDC
Más fotos Valve podría estar presentando una nueva consola en el GDC + fotos




06-Mar-2012
Tatuajes con propósito

Foto 0 en  - Tatuajes con propósito
Más fotos Tatuajes con propósito + fotos




06-Mar-2012
Vimos parte de Z-Baw ?Mejores Amigos? en 3D

Foto 0 en  - Vimos parte de Z-Baw ?Mejores Amigos? en 3D
Más fotos Vimos parte de Z-Baw ?Mejores Amigos? en 3D + fotos




06-Mar-2012

Cgnauta Blog Mexico DF

Blog de diseño gráfico, informática, tecnología y cultura política. CGnauta blog

Etiquetas
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
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
Publicado 31-Dec-1969 por matius en General
Leído 1 veces. Más resultados en Más artículos Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5 Fotos acerca Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5 Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5 en Yaaqui
Cgnauta Blog Mexico DF

Blog de diseño gráfico, informática, tecnología y cultura política. CGnauta blog

Convertidores de video y audio a HTML5 gratuitos
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
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
Publicado 31-Dec-1969 por matius en General
Leído 1 veces. Más resultados en Más artículos Convertidores de video y audio a HTML5 gratuitos Fotos acerca Convertidores de video y audio a HTML5 gratuitos Convertidores de video y audio a HTML5 gratuitos en Yaaqui
La Buseta De Papel Blogueros

Weblog de arte, literario originado en el Ecuador Grupo Buseta de Papel

Yo decido... el audio y video
De [..] Leer nota completa
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
Publicado 31-Dec-1969 por Buseta de Papel en General
Leído 1 veces. Más resultados en Más artículos Yo decido... el audio y video Fotos acerca Yo decido... el audio y video Yo decido... el audio y video en Yaaqui
Sr. Byte Santa Ana, El Salvador

bits y bytes de tecnología, humor, cine y rebeldía para todos Sr. Byte

Gmail + Video + Audio
Foto 0 en  - Gmail + Video + Audio 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
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
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 Más artículos Gmail + Video + Audio Fotos acerca Gmail + Video + Audio Gmail + Video + Audio en Yaaqui
Blogs De Guatemala Guatemala

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

Chat de audio y video en Gmail
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
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
Publicado 11-Nov-2008 por Blogs de en artistas
Leído 15 veces. Más resultados en Más artículos Chat de audio y video en Gmail Fotos acerca Chat de audio y video en Gmail Chat de audio y video en Gmail en Yaaqui
Estudiar, Aprender Y Practicar Ingles Gratis Lima, Peru

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.

Lecciones de ingles en video y audio (Soho X)
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
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
Publicado 11-Nov-2008 por noreply@blogger.com (Carlos) en tablahtml5
Leído 20 veces. Más resultados en Más artículos Lecciones de ingles en video y audio (Soho X) Fotos acerca Lecciones de ingles en video y audio (Soho X) Lecciones de ingles en video y audio (Soho X) en Yaaqui
Ipod Total Buenos Aires

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

iZon transmite video y audio a dispositivos iOS
Foto 0 en  - iZon transmite video y audio a dispositivos iOS Stem Innovation, LLC anunci [..] Leer nota completa
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
Publicado 31-Aug-2011 por Ágata en Accesorios
Leído 2 veces. Más resultados en Más artículos iZon transmite video y audio a dispositivos iOS Fotos acerca iZon transmite video y audio a dispositivos iOS iZon transmite video y audio a dispositivos iOS en Yaaqui
Estudiar, Aprender Y Practicar Ingles Gratis Lima, Peru

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.

Lecciones de ingles en video y audio (Sozo X)
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
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
Publicado 27-Mar-2009 por noreply@blogger.com (Carlos) en Videos para aprender inglesListening / Audio
Leído 10 veces. Más resultados en Más artículos Lecciones de ingles en video y audio (Sozo X) Fotos acerca Lecciones de ingles en video y audio (Sozo X) Lecciones de ingles en video y audio (Sozo X) en Yaaqui
Antes Del Shopping Panama

Tu guía de compras y servicios en Ciudad de Panamá Antes del Shopping Guia de compras en Panamá

Reproductor de audio de la línea marina de Sony
CDX-H905IP - Reproductor de audio de la línea marina de Sony 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
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
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 Más artículos Reproductor de audio de la línea marina de Sony Fotos acerca Reproductor de audio de la línea marina de Sony Reproductor de audio de la línea marina de Sony en Yaaqui
Noticias A Traves De Venezuela Caracas

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 ( 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
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
Publicado 28-Jul-2008 por A traves en artistas
Leído 21 veces. Más resultados en Más artículos Runrunes ( audio ) y  Regao de Chvez a camarografos de VTV ( Video ) Fotos acerca Runrunes ( audio ) y  Regao de Chvez a camarografos de VTV ( Video ) Runrunes ( audio ) y  Regao de Chvez a camarografos de VTV ( Video ) en Yaaqui
Ipod Total Buenos Aires

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

iBooks ahora soporta libros con audio y video
Foto 0 en  - iBooks ahora soporta libros con audio y video Apple lanzo una actualización para su [..] Leer nota completa
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
Publicado 20-Jul-2010 por Matias Vessuri en Software iPhone e iPod touch
Leído 13 veces. Más resultados en Más artículos iBooks ahora soporta libros con audio y video Fotos acerca iBooks ahora soporta libros con audio y video iBooks ahora soporta libros con audio y video en Yaaqui
Ipod Total Buenos Aires

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

Nueva linea de docks de audio y video de Pioneer
Foto 0 en  - Nueva linea de docks de audio y video de Pioneer Pioneer anunció el lanzamiento de una nueva línea de docks a/v que incluye a [..] Leer nota completa
Subscribirse a Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5
Publicado 03-May-2010 por Ágata en AltavocesDocks
Leído 8 veces. Más resultados en Más artículos Nueva linea de docks de audio y video de Pioneer Fotos acerca Nueva linea de docks de audio y video de Pioneer Nueva linea de docks de audio y video de Pioneer  en Yaaqui

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.



Imagen de un arco iris al atardecer.

Arco Iris al atardecer
Batey adornado con Jeroglifos.
Foto del Parque indígena Utuado: Centro Ceremonial de Caguana

Jeroglifos en Parque indígena
Imagen de un carro de colores

Carro arcoiris
Clasificados Costa Rica Clasificados Argentina Clasificados de España Clasificados Puerto Rico Envía una Postal