AUDIO y VIDEO en HTML 5

¿Quieres colaborar? click

encuesta

¿Qué lenguaje utilizas del lado del servidor?

Ver resultados

Loading ... Loading ...

ÚLTIMOS COMENTARIOS

» Ricardo en La W3C estandariza el Web Open Font Format (WOFF): Hola, muchas gracias por la información. La verdad no estaba enterado de esto. L ... ver comentario »

» iván en Revistas útiles, impresas y online, para desarrolladores web: Yo recomiendo Web Designer y .net. Ninguna de las dos está disponible en castell ... ver comentario »

» Pablo en ¿Cómo bloquear una IP desde .htaccess?: Hombre, eso esta bien siempre que el usuario tenga IP fija, si es como a mi que ... ver comentario »

» sylarko en PHP: La Manera Correcta: Muy útil información. Gracias! ... ver comentario »

» Ricardo Rodriguez - Posiciona Web en WordAds, el "AdSense" de WordPress.com: Hola David.. Gracias por compartir esta excelente noticia. Pienso que se nos v ... ver comentario »

» NoticiasTecnologia en Plugin para manejar microdatos en WordPress: Interesante, para tomarlo en cuenta en cualquier tipo de sitio montado en Wordpr ... ver comentario »

» TecnoArk en Apple es el mayor fabricante de teléfonos inteligentes en 2011: Interesante artículo, aunque sin lugar a dudas el próximo año será un difícil añ ... ver comentario »

» LordCaos en Candy, un cliente de chat en JavaScript: Precisamente lo que buscaba, gracias... ... ver comentario »

» JUAN CARLOS en Ordenar y filtrar resultados de consultas MySQL con PHP, sin saturar la base de datos: me gustan mucho tus publicaciones, gracias por ayudarnos a resolver nuestras dud ... ver comentario »

» nuglam en Google cierra varios de sus servicios: no van a cerrar igoogle. solo desactivarán sus caráteristicas sociales. igual un ... ver comentario »

AUDIO y VIDEO en HTML 5

Por David | 11/marzo/2010 22:30h | |      

Una de las características más sonadas de HTML 5 es su soporte multimedia, que permite la reproducción de archivos de audio/vídeo, o bien la conexión y reproducción de una fuente de audio/vídeo. Esto se hace en HTML 5 con las etiquetas AUDIO y VIDEO, respectivamente.

Para insertar audio en HTML 5, haríamos lo siguiente:

<audio src=”audio.mp3″ type=”audio/mp3″ controls autoplay />

La etiqueta AUDIO de HTML 5 permite los siguientes atributos:

autobuffer : permite la carga automática del archivo, y los valores posibles son “true” o “false
autoplay : reproduce automáticamente el audio
controls : muestra los controles de reproducción
height : define la altura del reproductor (en píxeles)
loop : ejecuta la reproducción en bucle, cuando finaliza vuelve a empezar
src : URL del archivo o fuente a reproducir
type : tipo de archivo o fuente (audio/mp3, video/ogg, video/mp4, …)
width : define el ancho del reproductor (en píxeles)

Para insertar vídeo en HTML 5, haríamos lo siguiente (es muy similar al caso del audio):

<video src=”video.ogg” controls autoplay />

Para la etiqueta VIDEO utilizamos los mismos atributos y opciones que para la etiqueta AUDIO.

Actualmente existe una controversia por el formato de vídeo que se debería utilizar en HTML 5. El uso de códecs propietarios como H.264, en lugar del recomendado originalmente Ogg Theora (que es libre), puede excluir a algunos navegadores que no cuentan con soporte para estos códecs. Es el caso de YouTube, que actualmente está probando HTML 5 en su portal de vídeos, haciendo uso del códec H.264, con lo que Firefox, que no usa este códec, queda excluido (no se ven los vídeos).

El formato de vídeo, al igual que el de audio, se debe especificar con el atributo “type” dentro de la etiqueta que corresponda, AUDIO o VIDEO, como ya hemos visto.

¿Qué hacer si un navegador no soporta HTML 5? También está previsto, y podemos hacer uso de la siguiente estructura:

<video src=”video.ogg”>
<!– Código a mostrar en navegadores que no soportan HTML 5 –>
</video>

SOBRE EL AUTOR

David

Fundador de vitaminaWEB.com (allá por el 2001), trabaja como desarrollador web y tiene otro sitio web con los mejores fondos de pantalla: todoFONDOS.com

Temas relacionados:

»

También puedes consultar en los diferentes foros de desarrollo web de este sitio web.

Referencias externas a este artículo (pingbacks y trackbacks): 0

Puedes enlazar este artículo, desde tu web o blog, a:

http://vitaminaweb.com/audio-y-video-en-html-5_313

O bien utilizar el siguiente código HTML:

<a href="http://vitaminaweb.com/audio-y-video-en-html-5_313">AUDIO y VIDEO en HTML 5</a>

COMENTARIOS

  • fgfgggg

    dijo, el 10/julio/2010 a las 3:35h :

    para alguien que no conose html le dejas este tutorial

  • Yagami

    dijo, el 04/agosto/2010 a las 17:57h :

    mmm, sorprende la facilidad para insertar multimedia en HTML 5, aunque habrá que esperar a que todos los navegadores utilizen el mismo estandar.

  • Carlos

    dijo, el 05/septiembre/2011 a las 21:11h :

    Gracias por el dato David,lo andaba buscando hace rato, excelente tu sitio Web,
    saludos

  • David

    dijo, el 06/septiembre/2011 a las 1:03h :

    Gracias a ti, Carlos.

  • yahir ramirez

    dijo, el 20/septiembre/2011 a las 17:36h :

    firefox soporta mp4?

Comentarios cerrados

vitaminaWEB.com (2001-2014) Desarrollo web y tecnología

Publicación sobre desarrollo web, tecnología y otros temas relacionados.

portada - datos web - contacto

páginas temáticas: PHP

NUBE DE TEMAS (pincha para ver todos los artículos relacionados con un tema)

Accesibilidad , AJAX , Apache , ASP , bbPress , Bing , CSS , Curiosidades , Diseño gráfico , Dominios , Entrevistas , Eventos organizados , Flash , Fuentes tipográficas , GIMP , Google , HTML , HTML5 , Humor , Iconos , Java , JavaScript , Juegos , Libros , MySQL , Navegadores web , Otros temas , Photoshop , PHP , Posts patrocinados , Programas , Publicidad online , Redes sociales , Ruby on Rails , Seguridad informática , SEO , Servidores web , Silverlight , Usabilidad , WordPress , XHTML , XML