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.