Vídeo en bucle

Un vídeo en bucle es aquel que cuando llega al final del vídeo vuelve al principio y se continua reproduciendo de forma infinita, o hasta que el usuario lo pare o se salga de la página web

Vamos a utilizar código HTML5 para poder incrustar un vídeo dentro de nuestra página web y que este vídeo en bucle se reproduzca de forma infinita.

Incluir un vídeo HTML5.

Lo primero que tenemos que hacer es insertar un vídeo HTML5, para ello vamos a utilizar el elemento video que nos permite insertar los vídeos dentro de las páginas web

<video>
  <!-- Aquí va un vídeo -->
</video>

Para indicar dónde se encuentra el vídeo y el formato que tiene podríamos utilizar, junto con el elemento video, el elemento source. Además, el elemento source, nos permite indicar diferentes formatos de vídeos para conseguir el navegador web reproduzca uno u otro.

Pero, en este caso, vamos a utilizar una forma más sencilla y nos apoyaremos en el atributo src para indicar la URL que contenga que contenga el vídeo.

<video src="url-con-el-video">
  <!-- Aquí va un vídeo -->
</video>

Atributo loop para bucles.

La parte más importante de este ejemplo para poder poner un vídeo en bucle es el manejo del atributo loop, ya que el manejo de este atributo es el que nos va a proporcionar la capacidad de poder ver el vídeo en bucle.

El atributo loop es un atributo booleano, del elemento video, dentro de HTML5 por lo que si el atributo no está presente se le asignaría un valor de false y si está presente sería un valor de true.

Por lo que si queremos reproducir un vídeo en bucle simplemente tendremos que añadir el atributo loop en el elemento video.

<video src="url-con-el-video" loop>
  <!-- Aquí va un vídeo -->
</video>

Código HTML5 para poner un vídeo en bucle.

Así que simplemente tendremos que poner la URL de un vídeo, en este caso en formato mp4. El código en HTML para poder poner un vídeo en bucle sería el siguiente:

<video id="video" src="tecla.mp4" controls loop>
  <!-- El atributo loop hace que el vídeo se repita en bucle -->
  Tu navegador no soporta el elemento <code>video</code>.
</video>

En este caso hemos añadido un atributo adicional que es controls para poder ver los controles del vídeo.