[HTML5] Trabajando con Audio y Video – Parte I

Posted on Actualizado enn


Hola a todos, en este post quiero mostrar otra de las nuevas características de HTML5 y es el trabajo con archivos multimedia para el audio y/o el video.

Anteriormente para poder visualizar videos es alguna página Web debíamos hacer uso de plugins como Silverlight o Flash, sin embargo con la venida de HTML5 la idea es reducir a 0 el uso de plugins. Por lo anterior HTML5 ahora define dos nuevos elementos multimedia audio y video, el primero para la reproducción de audio y el segundo para el video.

Las características de audio y video son casi iguales, por lo tanto en este post me enfocare en trabajar con el video, mostraré las características y al final dejaré un muy sencillo reproductor de videos para que lo descarguen y puedan ver la implementación de lo tratado.

Lo primero para conocer el manejo del audio y el video es conocer la etiqueta que se debe utilizar, para el audio usamos <audio id=”audio1”></audio> y para el video <video id=”video1”></video>, y claro allí podemos darle un id para poder trabajar con este elemento desde JavaScript.

Para la etiqueta video adicionalmente podemos especificar las propiedades height y width para dar un tamaño fijo al cuadro que mostrará el video.

Los atributos principales para trabajar con audio y video son:

· src: específica la fuente del media

· controls: define si se deben mostrar los controles de usuario para manipulación del media

· muted: sin volumen

· autoplay: indica si el media debe iniciar su reproducción tan pronto está lo suficientemente cargado.

· loop: vuelve a reproducir el media cuando se termine de reproducir.

· poster [solo para video]: permite definir una imagen que será mostrada cuando el video no ha iniciado su reproducción.

· type: permite especificar el tipo del archivo multimedia.

Entonces un elemento video más completo sería:

   1:  <video id=”video1controls autoplay src=”media/video.mp4type=”video/mp4width=”500pxheight=”500pxposter=”media/poster.jpg>
   2:  </video>

Y en este punto surge un nuevo problema, no todos los exploradores soportan los mismos tipos de archives; afortunadamente tanto para el elemento audio como para el video es posible especificar múltiples tipos de archivos, lo único negativo es que se debe tener el mismo video en diferentes tipos.

Para especificar múltiples fuentes de archivos utilizamos el elemento source, y definimos tantos elementos source como tipos de archivo, continuando con el ejemplo anterior:

   1:  <video id=”video1controls autoplay type=”video/mp4width=”500pxheight=”500pxposter=”media/poster.jpg>
   2:      <source src=”media/video.mp4type=”video/mp4/>
   3:      <source src=”media/video.webmtype=”video/webm/>
   4:  </video>

Y ahora ya tenemos el elemento video funcionando en nuestra Web, en el siguiente post vamos a ver cómo podemos trabajar con estos elementos desde código JavaScript.

Como siempre les dejo el código del ejemplo:

Descarga el ejemplo!

About these ads

7 comentarios en “[HTML5] Trabajando con Audio y Video – Parte I

    Alberto Palencia escribió:
    03/29/2012 en 14:44

    Html 5 ayuda mucho y es muy poderoso te ahorra mucho codigo, se pueden hacer muchas cosas buenas.

    [...] [HTML5] Trabajando con Audio y Video – Parte I [...]

    Pablo Alejandro Pérez Acosta escribió:
    04/02/2012 en 22:53

    Gracias por compartir Julio. Se nos volvio obligatorio en la empresa el aprendizaje de HTML 5 dado que tenemos un producto basado en web con clientes de mas de 5 años de antiguedad y con necesidades de actualización.

      Julio Avellaneda respondido:
      04/03/2012 en 00:00

      Es un gusto, y la verdad creo q si e suna obligación aprender HTML5, es algo q todo Web Developer debe conocer!

    devteam escribió:
    05/29/2012 en 17:42

    Reblogged this on Dev Team.

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:04

    [...] [HTML5] Trabajando con Audio y Video – Parte I [...]

Deja un comentario

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