Video HTML 5

06/02/20230 comentarios

Hola a todos, hoy os voy a explicar como podemos usar la etiqueta video de HTML 5.

Esta etiqueta permite reproducir un video en HTML 5.

Veamos como funciona de forma sencilla. Se suele poner un texto dentro de la misma para que se muestre si tu navegador no lo puede usar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video</title>
</head>
<body>
    <video src="video.mp4" controls width="400px" height="200px">
        Tu navegador no soporta la etiqueta video
    </video>
</body>
</html>

El atributo src indica la ruta del fichero a reproducir, en mi caso lo tendría junto a mi index.html.

Los atributos width y height, indican el ancho y la altura del elemento.

Para que se muestre, es necesario que tenga el atributo controls. Se puede mostrar sin controls y que se reproduzca automáticamente.

Podemos hacer que se reproduzca automáticamente con el atributo autoplay.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video</title>
</head>
<body>
    <video src="video.mp4" controls width="400px" height="200px" autoplay>
        Tu navegador no soporta la etiqueta video
    </video>
</body>
</html>

Si queremos que se reproduzca en bucle, lo podemos hacer con el atributo loop.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video</title>
</head>
<body>
    <video src="video.mp4" controls width="400px" height="200px" loop>
        Tu navegador no soporta la etiqueta video
    </video>
</body>
</html>

Para mutearlo, lo podemos hacer con el atributo muted.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video</title>
</head>
<body>
    <video src="video.mp4" controls width="400px" height="200px" muted>
        Tu navegador no soporta la etiqueta video
    </video>
</body>
</html>

También podemos poner una imagen que actúa de miniatura. Lo podemos hacer con el atributo poster, debes indicar la ruta de la imagen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video</title>
</head>
<body>
    <video src="video.mp4" poster="poster.jpg" controls loop width="400px" height="200px">
        Tu navegador no soporta la etiqueta video
    </video>
</body>
</html>

Os dejo todos los ejemplos en nuestro github aquí.