Skip to main content
HTML5

Los nuevos elementos audio y video de HTML5

Por 28 diciembre, 2016Sin comentarios
Conoce todas las mejores que traen los elementos audio y vídeo de HTML5

Para los desarrolladores web más antiguos les será más fácil entender el avance y la mejora que supone los elementos <video> y <audio> en HTML5 respecto a la tecnología Flash

. Con Flash utilizábamos elementos como <object> o <iframe> como marcos para reproductores externos como YouTube que soportan tecnología Flash. El problema venía cuando esto requiere que el navegador tenga instalado un plugin o extensión de Flash para poder reproducirlo, y teniendo que esperar a que el navegador ejecute primero el plugin para poder reproducir el vídeo.

<object width="640" height="300">
    <param name="movie" value="url_video"></param>
    <param name="allowfullscreen" value="true"></param>
    <param name="allowScriptAccess" value="always"></param>
    <embed src="url_video" type="application/x-shockwave-flash" allowscriptaccess="always" width="300" height="640"></embed>
</object>

Con los nuevos elementos video y audio conseguimos que estén totalmente integrados en nuestra web, sin requerir de ningún recurso externo. Podremos manipularlo con CSS y con Javascript a nuestro antojo, y con nuevos atributos HTML que nos abren un abanico de posibilidades. Además, simplificamos el código.

VIDEO

Primero os hablaré del elemento vídeo. Aunque la sintaxis, los atributos, y la API de JavaScript es la misma al elemento audio, tiene algunas características propias. Un ejemplo básico sería este:

<video src="miVideo.mp4"></video>

Pero esto sería en un mundo ideal que por desgracia de momento no existe. Y es que no todos los navegadores leen el mismo formato de vídeo. Yo recomiendo utilizar los dos más generalizados y que nos garantizan que se verán en la mayoría de navegadores. El formato libre webm y mp4. Cuando queremos utilizar varios recursos dentro del elemento video, utilizamos la etiqueta <source> y el atributo src. Otro problema que se plantea aparte de los formatos, es la guerra de los codecs. Ya que en su día tanto Apple como Nokia decidieron utilizar el H.264 o AVC1, lejos del VP8 o Vorbis de Google. Esto nos exige declarar también los codecs dentro del atributo type. Así quedaría un ejemplo con los formatos y codecs que hemos visto:

<video>
<source src="/videos/mi-video.mp4" type="video/mp4; codecs='avc1, mp4a'"/>
<source src="/videos/mi-video.webm" type="video/webm; codecs='vp8, vorbis'"/>
</video>

Tenemos muchas herramientas gratuitas como Video to video converter para convertir el vídeo en el formato que queramos, con los codecs correspondientes. Ahora os dejaré algunos de los atributos más utilizados:

AUTOPLAY: Como su nombre indica, conseguimos que el vídeo comience de forma automática. El valor es booleano (true o false). Si no indicamos nada el valor por defecto es false. No es muy recomendable ya que no suele gustar al usuario que se inicie un vídeo sin haberlo solicitado. Aunque en algunas ocasiones puede ser necesario.

CONTROLS: Para mí, muchísimo mejor opción que autoplay. Al usuario le aparecerá una barra de controles debajo del vídeo. Play, pause, barra de progreso y volumen. Aunque los botones son siempre los mismos, la apariencia puede variar dependiendo del navegador.

PRELOAD: Le sugerimos al navegador que descargue el vídeo nada más cargar la página para que esté listo cuando lo reproduzca el usuario. Los valores posibles son auto | none | metadata.

MUTED: Le indicamos al navegador que empiece el vídeo con el sonido quitado.

POSTER: Con este atributo podemos indicar una imagen que sirva como portada mientras no se halla reproducido el video. Cuando no lo indicamos coge el primer fotograma del video que normalmente no corresponde con la temática del video ni nos dice nada.

LOOP: Indicamos que el video no deje de reproducirse en bucle.

WIDTH y HEIGHT: Indicamos el ancho y el alto del vídeo. Cuando no lo indicamos coge el ancho y alto de la imagen de poster. Sino hay, el tamaño original del vídeo. Cuando indicamos un tamaño de diferente proporción al original del video no se distorsiona como pasaría con una imagen. Se pone en modo letterbox que son las dos franjas negras encima y debajo del video, que permite ajustarlo al tamaño indicado sin que pierda la proporción del vídeo.

MEDIA: Este atributo funciona igual que los media queries de CSS3. Lo ponemos en cada etiqueta source para indicar que vídeo utilizar dependiendo del tamaño o tipo de pantalla. Por ejemplo, nos permite utilizar el mismo vídeo en alta definición para pantallas grandes y otro de baja resolución para dispositivos móviles. Conseguimos no malgastar recursos innecesarios. Un ejemplo:

<video controls>
<source src="alta-definicion.mp4" media="screen and (min-width: 640px)"/>
<source src="baja-definicion.mp4" media="screen and (max-width: 640px)"/>
</video>

AUDIO

Con el elemento audio la sintaxis y los atributos son practicamente los mismos. Además, ocurre algo similar con los formatos. No hay ninguno que sea 100% compatible con todos los navegadores. Yo recomiendo los formatos mp3 y ogg.
Cabe destacar que si no indicamos el atributo controls en audio no aparecerá como elemento visible de la página aunque siga siendo parte del HTML. Para finalizar os dejo un ejemplo más o menos completo y utilizado de ambos elementos:

<!-- Audio -->
<audio controls autoplay="true" loop>
<source src="sonidos/mi-audio.mp3" type="audio/mp3"/>
<source src="sonidos/mi-audio.ogg" type="audio/ogg"/>
</audio>

<!-- Video -->
<video controls width="300" height="150" preload="auto" poster="img/poster.jpg">
<source src="videos/mi-video.mp4" type="video/mp4; codecs='avc1, mp4a'"/>
<source src="videos/mi-video.webm" type="video/webm; codecs='vp8, vorbis'"/>
</video>
Jairo Calero

Jairo Calero

Desarrollador web frontend y backend, especialista en webs app desarrolladas en PHP y Javascript. Experto en HTML, CSS3, PHP y Javascript con frameworks y librerías como jQuery, Angular y Bootstrap. Gestor de herramientas SEO como Google Analytics, Search Console, SEMrush o Hotjar. Email marketing y Big data.

Deja tu respuesta