[HTML5] Trabajando con Audio y Video – Parte I

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!

7 comments

Leave a Reply

Your email address will not be published. Required fields are marked *