DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
18-06-2015

Siguiendo con las entradas que explican las etiquetas HTML que en mi punto de vista considero las más versátiles y complejas, ahora veremos unas etiquetas que permiten mostrar contenido multimedia a nuestra web mediante videos y audios de distintos formatos:

Esto último es lo que realmente las hace especial y esto se debe a que cada navegador soporta algunos de los formatos navegador listados anteriormente.

Una de los grandes características que trae HTML5 consigo es la inclusión de contenido multimedia como audios y vídeos.

Primero hablaremos sobre la etiqueta <video>; como veremos en esta entrada, ambas etiquetas (<video> y <audio>) tienen comportamientos, definiciones y atributos parecidos y de ahí el porqué de escribir una sola entrada para ambas etiquetas.

1.0 La etiqueta <video>

Para poder emplear la etiqueta <video> esta debe estar acompañada de algunos atributos y otras etiquetas hijas como veremos a continuación.

1.1 Atributos para cargar un vídeo

Se emplean los atributos width y height para especificar el ancho y largo que queramos que tenga el vídeo.

Además podemos especificar el atributo controls para indicar que muestre los controles como pausa, reproducción, volumen...:

Control de reproducción en Google Chrome

Y el atributo src para indicar la URL fuente (vídeo).

<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg"> 
Tu navegador no soporta la etiqueta video.
<video>

En el código HTML anterior especificamos el mismo vídeo en dos formatos diferentes para que pueda ser visualizado en los navegadores con soporte de vídeo MP4 y OGG; además se especifica que el vídeo espacio de visualización del vídeo será de 320x240 píxeles y que presente controles.

Lo ideal es agregar el mayor número de formatos para garantizar la reproducción en los navegadores.

En el caso de que sea un navegador anticuado como Internet Explorer 8 se mostraría el siguiente mensaje:

"Tu navegador no soporta la etiqueta video."

En el siguiente enlace verás una tabla con los formatos de video soportados por navegador: HTML <video> Tag.

1.2 Otros atributos de la etiqueta <video>

autoplay Especifica el inicio del vídeo tan pronto se cargue.
loop Especifica que el vídeo se reproducirá nuevamente al terminar su reproducción.
muted Especifica que el vídeo no reproducirá el audio (mudo).

Puedes ver el resto de los atributos en el siguiente enlace: HTML <video> Tag.

2.0 La etiqueta <audio>

Ya entendida el funcionamiento del elemento anterior, ahora vamos con la etiqueta <audio> la cual presenta un especificaciones similar al de la etiqueta <video> (aparte de cargar audios en vez de vídeos); también cuenta con múltiples soportes de audio dependiendo del navegador los cuales puedes ver en el siguiente enlace: HTML

La etiqueta <audio> también cuenta con los mismos atributos vistos anteriormente y se deben de especificar al menos un audio:

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no soporta la etiqueta audio.
</audio>

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Ondas con SVG y CSS

Ondas con SVG y CSS

Sistema de particulas con Canvas

Sistema de particulas con Canvas

Algunos artículos que te pueden interesar

Guía rápida sobre el elemento br en HTML

Guía rápida sobre el elemento br en HTML

El elemento br sirve para dar un salto de línea, se usa la siguiente etiqueta.

Andrés Cruz 21-02-2014

Efectos hovers sobre imágenes con CSS

Efectos hovers sobre imágenes con CSS

En esta entrada veremos cómo crear un simple efecto hover con CSS sobre una imagen; para esto se coloca una imagen como fondo en un contenedor y colocar múltiples cuadros consecutivos (divs) de una fracción del tamaño del fondo.

Andrés Cruz 17-03-2016

El elemento datalist en HTML5

El elemento datalist en HTML5

El elemento datalist provisto en HTML5 permite crear un conjunto de opciones viables para establecer como valor en otros elementos de tipo input.

Andrés Cruz 01-12-2014