CursosEmpresasBlogLiveConfPrecios

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Clase 16 de 56 • Curso Definitivo de HTML y CSS

Contenido del curso

CSS

Tomar examen
Resumen

La inserción adecuada de vídeos en una página web puede enriquecer en gran medida la experiencia del usuario. En esta ocasión, nos zambulliremos en cómo utilizar la etiqueta de vídeo en HTML, permitiéndonos integrar contenidos audiovisuales directamente desde nuestras carpetas de proyecto. Exploraremos el proceso paso a paso, desde preparar nuestro entorno de trabajo hasta manipular los controles de reproducción para una experiencia de usuario óptima.

¿Cómo iniciar con la etiqueta de vídeo?

Para comenzar, necesitamos establecer una estructura básica en nuestro archivo index.html. Suponiendo que ya tenemos una carpeta para nuestra clase de vídeo, copiamos el vídeo deseado dentro de la misma. Después de ello, implementamos las siguientes líneas de código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clase de Vídeo</title>
</head>
<body>
    <main>
        <section>
            <!-- Aquí irá nuestra etiqueta de vídeo -->
        </section>
    </main>
</body>
</html>

¿Cuál es el formato correcto de la etiqueta vídeo?

Dentro de nuestra sección main, introducimos la etiqueta <video>. Así es como quedaría incorporado nuestro vídeo:

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

Asegúrate de reemplazar nombre_del_video.mp4 con el nombre y extensión correctos de tu archivo de vídeo.

¿Cómo agregar controles al vídeo?

Uno de los aspectos cruciales para la interacción con el vídeo es la capacidad del usuario de controlarlo. Para ello, necesitamos agregar el atributo controls a la etiqueta de vídeo:

<video src="nombre_del_video.mp4" controls></video>

Con esto, los controles aparecen automáticamente, permitiendo al usuario reproducir, pausar, y navegar por el vídeo.

¿Qué es el atributo preload y cómo usarlo?

El atributo preload se utiliza para especificar si un vídeo debe cargarse antes de la interacción del usuario. Aquí está la forma de aplicarlo:

<video src="nombre_del_video.mp4" controls preload="auto"></video>

Hay que tener en cuenta que preload no inicia la reproducción automática del vídeo, simplemente acelera la carga inicial para evitar retrasos al comenzar la reproducción.

¿Cómo iniciar la reproducción de vídeo en un tiempo específico?

Si deseamos que el vídeo comience a reproducirse en un momento determinado, podemos usar una extensión de la URL en el atributo src:

<video src="nombre_del_video.mp4#t=10,60" controls></video>

En este ejemplo, el vídeo empezará en el segundo 10 y se detendrá en el minuto 1 (segundo 60). Ajusta los tiempos según sea necesario para tu vídeo.

¿Qué hacer con múltiples formatos de vídeo?

Para asegurar la compatibilidad entre navegadores, podemos ofrecer diferentes formatos de vídeo utilizando la etiqueta <source> dentro de <video>. Esto permite que el navegador elija el formato compatible:

<video controls preload="auto">
    <source src="nombre_del_video.webm" type="video/webm">
    <source src="nombre_del_video.mp4" type="video/mp4">
</video>

En el código ejemplo anterior, hemos incluido los formatos WebM y MP4. El navegador optará por el formato que mejor entienda, priorizando el que aparece primero en el código.

La correcta utilización de vídeos no solo mejora la experiencia del usuario sino que, al aplicar estas prácticas de SEO, también favorece la accesibilidad y el rendimiento de tu web. Recuerda experimentar, probar y adaptar estos conocimientos a tus proyectos. ¡Sigue adelante y que tu aprendizaje sea tan dinámico e interactivo como los vídeos que integrarás en tus páginas web!