Incrustar y personalizar video en HTML

Introducción

En este laboratorio (lab), los participantes aprenderán cómo incrustar y personalizar elementos de video en HTML utilizando la potente etiqueta <video>. El laboratorio cubre técnicas esenciales para crear reproductores de video interactivos, incluyendo la adición de controles, la configuración de fuentes de video, la implementación de miniaturas personalizadas y la exploración de varios atributos de la etiqueta de video para mejorar la experiencia de reproducción.

A través de un enfoque paso a paso, los aprendices adquirirán habilidades prácticas en la incrustación de video HTML5, comenzando desde la creación básica del elemento de video hasta configuraciones avanzadas. Los participantes descubrirán cómo agregar múltiples fuentes de video, controlar la configuración de reproducción, establecer miniaturas personalizadas y crear experiencias de video más atractivas y amigables para el usuario directamente dentro de las páginas web.

Crear un elemento de video básico con controles

En este paso, aprenderás cómo crear un elemento de video básico en HTML con controles esenciales. HTML5 proporciona una etiqueta <video> simple y potente que te permite incrustar videos directamente en las páginas web.

Primero, creemos un archivo HTML para demostrar la incrustación de video. Abre el WebIDE y crea un nuevo archivo 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>

Desglosemos los componentes clave del elemento de video:

Etiqueta <video>: El contenedor principal para incrustar contenido de video.
Atributo controls: Agrega los controles predeterminados del reproductor de video (reproducir, pausar, volumen).
Atributos width y height: Establecen las dimensiones del reproductor de video.
Texto dentro de la etiqueta: Mensaje de respaldo para navegadores que no admiten video HTML5.

El atributo controls es crucial, ya que proporciona a los usuarios controles de reproducción estándar, como reproducir, pausar, ajustar el volumen y modo de pantalla completa.

Notas: Aprende más sobre Cómo previsualizar archivos HTML en el WebIDE.

Agregar fuente de video y silenciar la reproducción

En este paso, aprenderás cómo agregar fuentes de video a tu elemento de video HTML y controlar su estado inicial de reproducción. Modificaremos el archivo video-demo.html anterior para incluir fuentes de video y demostraremos cómo silenciar el video por defecto.

Abre el archivo ~/project/video-demo.html en el WebIDE y actualiza 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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Desglosemos las nuevas adiciones:

Etiquetas <source>: Te permiten especificar múltiples formatos de video para la compatibilidad entre navegadores.
- La primera fuente es un archivo MP4.
- La segunda fuente es un archivo WebM (formato alternativo).
- Los navegadores utilizarán el primer formato compatible.
Atributo muted: Silencia automáticamente el video cuando se carga.
- Útil para evitar la reproducción de audio inesperada.
- Puede eliminarse si deseas el sonido por defecto.
Atributo type: Especifica el tipo MIME de la fuente de video.
- Ayuda a los navegadores a determinar si pueden reproducir el video.

Las URLs de los videos de muestra son videos de muestra de dominio público que demuestran múltiples formatos de fuente. En un escenario del mundo real, reemplazarías estos con las rutas de tus propios archivos de video.

Elemento de video HTML con múltiples fuentes

Implementar un póster de video para una miniatura personalizada

En este paso, aprenderás cómo utilizar el atributo poster para agregar una imagen de miniatura personalizada a tu elemento de video antes de que comience la reproducción. Primero, descarguemos una imagen de muestra para usar como póster.

Utiliza el siguiente comando para descargar una imagen de muestra:

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

Ahora, actualiza 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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Puntos clave sobre el atributo poster:

Muestra una imagen personalizada antes de que comience la reproducción del video.
Reemplaza el primer fotograma del video 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 proporciona una vista previa del contenido del video y puede mejorar la experiencia del usuario al dar contexto antes de que comience la reproducción.

Explorar atributos y configuraciones de la etiqueta de video

En este paso, profundizarás en los diversos atributos y configuraciones disponibles para el elemento de video HTML5. Actualiza el archivo ~/project/video-demo.html para explorar estas configuraciones 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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

Exploremos los nuevos atributos:

preload="metadata":
- Controla cómo se carga el video antes de la reproducción.
- Opciones: auto (cargar todo el video), metadata (cargar solo los metadatos), none (no precargar).
loop:
- Hace que el video se reproduzca automáticamente cuando termina.
- Útil para fondos o contenido repetitivo.
playsinline:
- Permite que el video se reproduzca en línea en dispositivos móviles.
- Evita el modo de pantalla completa automático en dispositivos iOS.

Atributos adicionales útiles con los que puedes experimentar:

autoplay: Inicia la reproducción del video automáticamente.
crossorigin: Maneja fuentes de video de origen cruzado.
disablepictureinpicture: Evita el modo de imagen en imagen.

Consejos profesionales:

No todos los navegadores admiten todos los atributos.
Siempre prueba en diferentes dispositivos y navegadores.
Considera la experiencia del usuario al usar autoplay o loop.

Mejorar la experiencia de reproducción de video

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

<!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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.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 te preocupes si eres nuevo en CSS y JavaScript. Este ejemplo proporciona una forma sencilla de crear controles de video personalizados y dar estilo a la interfaz del reproductor de video.

Mejoras clave en este ejemplo:

Controles de video personalizados:
- Crea un panel de control personalizado con botones de reproducción/pausa y silencio.
- Agrega un control deslizante de volumen para un control preciso del volumen.
Estilos CSS:
- Da estilo al contenedor de video y a los controles.
- Utiliza flexbox para el diseño.
- Agrega un fondo semitransparente a los controles.
Interacciones JavaScript:
- togglePlay(): Controla manualmente la reproducción/pausa del video.
- muteToggle(): Alterna el estado de silencio del video.
- changeVolume(): Ajusta el volumen del video mediante programación.

Este enfoque te da más flexibilidad en el diseño de interfaces de reproductores de video en comparación con los controles predeterminados del navegador.

Ejemplo de interfaz de reproductor de video personalizado

Resumen

En este laboratorio, los participantes aprendieron cómo incrustar y personalizar elementos de video en HTML utilizando la etiqueta <video>. El laboratorio cubrió técnicas esenciales para crear reproductores de video interactivos, incluyendo la adición de controles básicos, la especificación de múltiples fuentes de video y la configuración de ajustes de reproducción. Las habilidades clave desarrolladas incluyen la configuración de dimensiones de video, la implementación de contenido de respaldo, la adición de controles predeterminados del reproductor y la gestión del silenciamiento del video y la selección de fuentes.

Los participantes exploraron técnicas prácticas de incrustación de video HTML5 al crear un elemento de video de demostración con características estándar como controles de reproducción/pausa, configuración de ancho y alto y soporte para diferentes formatos de video. El laboratorio proporcionó experiencia práctica en la comprensión de los atributos de la etiqueta de video y en la mejora de la interacción del usuario con el contenido de video incrustado a través de diversas opciones de configuración.