Insertar y personalizar vídeos en HTML

Introducción

En este laboratorio aprenderá a insertar y personalizar elementos de vídeo en HTML mediante la potente etiqueta <video>. El laboratorio cubre técnicas esenciales para crear reproductores de vídeo interactivos, como añadir controles, configurar fuentes de vídeo, implementar miniaturas personalizadas y explorar distintos atributos de la etiqueta de vídeo para mejorar la experiencia de reproducción.

Mediante un enfoque paso a paso, adquirirá habilidades prácticas para insertar vídeos con HTML5, desde la creación básica de un elemento de vídeo hasta configuraciones avanzadas. Aprenderá a añadir varias fuentes de vídeo, controlar la configuración de reproducción, establecer miniaturas personalizadas y crear experiencias de vídeo más atractivas y fáciles de usar directamente en páginas web.

Crear un elemento de vídeo básico con controles

En este paso aprenderá a crear en HTML un elemento de vídeo básico con los controles esenciales. HTML5 proporciona la etiqueta <video>, sencilla y potente, que permite insertar vídeos directamente en páginas web.

Primero, cree un archivo HTML para mostrar cómo se inserta un vídeo. Abra WebIDE y cree un archivo nuevo llamado video-demo.html en el directorio ~/project.

touch ~/project/video-demo.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Video Element</title>
  </head>
  <body>
    <h1>My First Video Element</h1>

    <video controls width="640" height="360">
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Estos son los componentes principales del elemento de vídeo:

Etiqueta <video>: contenedor principal para insertar contenido de vídeo.
Atributo controls: añade los controles predeterminados del reproductor de vídeo, como reproducir, pausar y ajustar el volumen.
Atributos width y height: establecen las dimensiones del reproductor de vídeo.
Texto dentro de la etiqueta: mensaje alternativo para los navegadores que no admiten vídeo HTML5.

El atributo controls es fundamental porque proporciona controles de reproducción estándar, como reproducir, pausar, ajustar el volumen y activar el modo de pantalla completa.

Nota: Consulte Cómo previsualizar archivos HTML en WebIDE para obtener más información.

Elemento de vídeo HTML con controles

Añadir una fuente de vídeo y silenciar la reproducción

En este paso aprenderá a añadir fuentes de vídeo al elemento de vídeo HTML y a controlar su estado inicial de reproducción. Modificará el archivo anterior video-demo.html para incluir fuentes de vídeo y mostrar cómo silenciar el vídeo de forma predeterminada.

Abra el archivo ~/project/video-demo.html en WebIDE y actualice su contenido:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video Source and Mute</title>
  </head>
  <body>
    <h1>Video with Multiple Sources</h1>

    <video controls width="640" height="360" muted>
      <source
        src="sample-video.mp4"
        type="video/mp4"
      />
      <source
        src="sample-video.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Estas son las nuevas incorporaciones:

Etiquetas <source>: permiten especificar varios formatos de vídeo para garantizar la compatibilidad entre navegadores.
- La primera fuente es un archivo MP4.
- La segunda fuente es un archivo WebM, un formato alternativo.
- El navegador utilizará el primer formato compatible.
Atributo muted: silencia automáticamente el vídeo cuando se carga.
- Resulta útil para evitar una reproducción de audio inesperada.
- Puede quitarlo si desea que el vídeo tenga sonido de forma predeterminada.
Atributo type: especifica el tipo MIME de la fuente de vídeo.
- Ayuda al navegador a determinar si puede reproducir el vídeo.

El script de configuración crea localmente los dos archivos de vídeo de ejemplo, por lo que el ejemplo funciona sin depender de un host de vídeo externo. En un caso real, sustituiría estas rutas por las de sus propios archivos de vídeo.

Elemento de vídeo HTML con varias fuentes

Implementar un póster de vídeo como miniatura personalizada

En este paso aprenderá a utilizar el atributo poster para añadir una imagen en miniatura personalizada al elemento de vídeo antes de que comience la reproducción. Primero, descargue una imagen de ejemplo para utilizarla como póster.

Ejecute el siguiente comando para descargar una imagen de ejemplo:

wget https://placehold.co/640x360.png?text=Video+Thumbnail -O ~/project/video-thumbnail.png

Ahora, actualice el archivo ~/project/video-demo.html con el atributo poster:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video with Custom Poster</title>
  </head>
  <body>
    <h1>Video with Custom Thumbnail</h1>

    <video controls width="640" height="360" muted poster="video-thumbnail.png">
      <source
        src="sample-video.mp4"
        type="video/mp4"
      />
      <source
        src="sample-video.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Estos son los aspectos principales del atributo poster:

Muestra una imagen personalizada antes de que comience la reproducción.
Sustituye el primer fotograma del vídeo como vista previa.
Ayuda a crear una interfaz de usuario más atractiva.
Funciona con archivos de imagen locales o remotos.

La imagen del póster ofrece una vista previa del contenido del vídeo y puede mejorar la experiencia del usuario al proporcionar contexto antes de iniciar la reproducción.

Ejemplo de miniatura como póster de vídeo

Explorar los atributos y las configuraciones de la etiqueta de vídeo

En este paso profundizará en los distintos atributos y configuraciones disponibles para el elemento de vídeo HTML5. Actualice el archivo ~/project/video-demo.html para explorar estas opciones avanzadas:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced Video Configurations</title>
  </head>
  <body>
    <h1>Exploring Video Tag Attributes</h1>

    <video
      controls
      width="640"
      height="360"
      muted
      poster="video-thumbnail.png"
      preload="metadata"
      loop
      playsinline
    >
      <source
        src="sample-video.mp4"
        type="video/mp4"
      />
      <source
        src="sample-video.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Estas son las nuevas opciones:

preload="metadata":
- Controla cómo se carga el vídeo antes de la reproducción.
- Opciones: auto (carga el vídeo completo), metadata (carga solo los metadatos) y none (no precarga el vídeo).
loop:
- Hace que el vídeo vuelva a reproducirse automáticamente cuando termina.
- Resulta útil para contenido de fondo o que debe repetirse.
playsinline:
- Permite reproducir el vídeo dentro de la página en dispositivos móviles.
- Evita que se active automáticamente el modo de pantalla completa en dispositivos iOS.

También puede experimentar con estos atributos útiles:

autoplay: inicia automáticamente la reproducción del vídeo.
crossorigin: gestiona fuentes de vídeo de distintos orígenes.
disablepictureinpicture: impide el modo de imagen en imagen.

Consejos prácticos:

No todos los navegadores admiten todos los atributos.
Pruebe siempre el resultado en distintos dispositivos y navegadores.
Tenga en cuenta la experiencia del usuario al utilizar autoplay o loop.

Mejorar la experiencia de reproducción de vídeo

En este paso aprenderá a mejorar la experiencia de reproducción mediante controles personalizados y estilos. Cree un archivo nuevo, ~/project/video-enhanced.html, con el contenido siguiente:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Enhanced Video Player</title>
    <style>
      .video-container {
        max-width: 640px;
        margin: 0 auto;
        position: relative;
      }
      .custom-controls {
        display: flex;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px;
      }
      .custom-controls button {
        background: none;
        border: none;
        color: white;
        margin-right: 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="video-container">
      <video id="myVideo" width="640" height="360" poster="video-thumbnail.png">
        <source
          src="sample-video.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>

      <div class="custom-controls">
        <button onclick="togglePlay()">Play/Pause</button>
        <button onclick="muteToggle()">Mute/Unmute</button>
        <input
          type="range"
          min="0"
          max="100"
          value="50"
          onchange="changeVolume(this.value)"
        />
      </div>
    </div>

    <script>
      const video = document.getElementById("myVideo");

      function togglePlay() {
        if (video.paused) {
          video.play();
        } else {
          video.pause();
        }
      }

      function muteToggle() {
        video.muted = !video.muted;
      }

      function changeVolume(value) {
        video.volume = value / 100;
      }
    </script>
  </body>
</html>

No se preocupe si todavía no conoce CSS ni JavaScript. Este ejemplo ofrece una forma sencilla de crear controles de vídeo personalizados y aplicar estilos a la interfaz del reproductor.

Estas son las principales mejoras del ejemplo:

Controles de vídeo personalizados:
- Cree un panel de controles personalizado con botones para reproducir, pausar y silenciar.
- Añada un control deslizante para ajustar el volumen con precisión.
Estilos CSS:
- Aplique estilos al contenedor del vídeo y a los controles.
- Utilice flexbox para organizar los elementos.
- Añada un fondo semitransparente a los controles.
Interacciones con JavaScript:
- togglePlay(): controla manualmente la reproducción y la pausa del vídeo.
- muteToggle(): alterna el estado de silencio del vídeo.
- changeVolume(): ajusta el volumen del vídeo mediante programación.

Este enfoque ofrece más flexibilidad para diseñar interfaces de reproductores de vídeo que los controles predeterminados del navegador.

Ejemplo de interfaz de reproductor de vídeo personalizado

Resumen

En este laboratorio aprendió a insertar y personalizar elementos de vídeo en HTML mediante la etiqueta <video>. El laboratorio cubrió técnicas esenciales para crear reproductores de vídeo interactivos, como añadir controles básicos, especificar varias fuentes de vídeo y configurar los ajustes de reproducción. Entre las habilidades desarrolladas se incluyen establecer las dimensiones del vídeo, implementar contenido alternativo, añadir controles predeterminados del reproductor y gestionar el silenciamiento del vídeo y la selección de fuentes.

También exploró técnicas prácticas para insertar vídeos con HTML5 al crear un elemento de vídeo de demostración con funciones estándar, como controles para reproducir y pausar, configuración del ancho y la altura, y compatibilidad con distintos formatos de vídeo. El laboratorio le proporcionó experiencia práctica para comprender los atributos de la etiqueta de vídeo y mejorar la interacción del usuario con contenido de vídeo insertado mediante distintas opciones de configuración.