HTML: Vídeos

La etiqueta <video>

La etiqueta <video> es una etiqueta que permite insertar un video en una página web. Al igual que la etiqueta de imagen, la etiqueta de video también es una etiqueta de auto-cierre. Podemos especificar la fuente del video con el atributo src. Este puede ser un video local o un video de internet.

Mira este ejemplo:

<video
  src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
/>

miarchivo.html

Controls

Como puedes ver, el vídeo no se reproduce automáticamente. Para que el usuario pueda controlar el vídeo, puedes añadir el atributo controls a la etiqueta <video>. Esto añadirá controles de reproducción, pausa, volumen, etc.

<video
  src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
  controls
/>
👉

Como ves, algunos atributos cuyos posibles valores son verdadero o falso como el de controls, no necesitan un valor. La presencia del atributo ya indica que es verdadero.

miarchivo.html

Autoplay

Si quieres que el vídeo se reproduzca automáticamente cuando la página se cargue, puedes añadir el atributo autoplay.

Pero hay algo a tener en cuenta:

⚠️

Por motivos de experiencia de usuario, los navegadores te obligan a que el vídeo se reproduzca con el sonido desactivado por defecto cuando utilizas autoplay.

Para solucionar esto puedes añadir el atributo muted para que el vídeo se reproduzca con el sonido desactivado.

<video
  src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
  autoplay="autoplay"
  muted
/>

miarchivo.html

Probablemente, cuando hayas llegado aquí, el vídeo esta parado, ya que se ha empezado a reproducir cuando la página se ha cargado y cuando llegas a leer esto ya ha terminado de reproducirse. Puedes recargar la página para verlo en acción.

Loop

Si quieres que el vídeo se reproduzca en bucle, puedes añadir el atributo loop.

<video
  src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
  autoplay="autoplay"
  muted
  loop
/>

miarchivo.html

Ahora cuando el vídeo termine, se volverá a reproducir automáticamente.

En el siguiente capítulo

En el siguiente capítulo, veremos las imágenes en vectores

AnteriorSiguiente