Introducción a Audio y Video con HTML5

Por Alexander Guevara Benites
Introducción a Audio y Video con HTML5

En este tutorial aprenderemos a utilizar los elementos audio y video de HTML

Seguiremos explorando las API’s que HTML5 nos trajo para hacer de nuestra vida más fácil como desarrolladores. Hoy hablaremos sobre Media audio y video, elementos con los que cuenta HTML5 y que permiten dar soporte multimedia. Nos referimos a los elementos

Hoy en día se cuenta con una gran variedad de codec para manejar audio y video, dependiendo del codec variará su calidad y compresión, pero de esta amplia variedad solo algunos son relevantes para la web, también cabe mencionar que no todos los navegadores aceptan formatos en sus implementaciones de HTML5.

A continuación mencionaremos algunos de los formatos más populares aceptados en la web:

  • WebM
  • Ogg Theora Vorbis
  • MP4 H.264 (AAC o MP3)
  • WAVE PCM

Pasemos ahora a cómo podemos usar audio y video en nuestro HTML, comenzamos declarando el siguiente elemento:

//para video


//para audio

Tanto audio y video cuentan con una serie de atributos, vamos a mencionar alguno de ellos

autoplay: es un atributo booleano, por defecto su valor es falso y permite que el audio/video se reproduzca automáticamente cuando pueda hacerlo.

*Codigo*

 

control: ofrece controles como play/pause y control de volumen.

*Codigo*


loop: es un booleano que por defecto es falso y permite reproducir nuevamente y de manera automática el audio/video una vez finalizado.

*Codigo*


muted: es booleano que por defecto es falso e indica si el audio/video está silenciado inicialmente.

*Codigo*


A continuación mostramos el soporte básico en navegadores para la etiqueta audio y video:

  • Chrome 3.0
  • Firefox (Gecko) 3.5
  • Internet Explorer 9.0
  • Opera 10.5
  • Safari 3.1

En el siguiente ejemplo probamos los elementos

See the Pen pbqOxd by Wilder Alexander Guevara Benites (@kusillus) on CodePen.


Hasta aquí termina este pequeño tutorial. Aún nos quedan muchas cosas por explorar. Si quieres aprender más sobre audio y video, puedes inscribirte al Curso de API’s de HTML5 que tenemos en la plataforma. Este fue @kusillus, nos vemos en la próxima.

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Alexander Guevara Benites

Alexander Guevara Benites

Nymeria's father | Designer 3D | Pokemon Master | Videogame Lover