Inserción de video: <video>

4.1 Conceptos básicos de la etiqueta <video>

Insertar un video en una página web usando el elemento <video> permite reproducir contenido de video directamente en el navegador. Este elemento ofrece amplias posibilidades para la configuración de la reproducción, incluyendo soporte para diferentes formatos, gestión a través de atributos y métodos JavaScript. Vamos a ver este elemento en detalle.

Ejemplo más simple

La etiqueta <video> se utiliza con el atributo src, que indica la ruta al archivo de video. También se pueden agregar atributos como controls para mostrar elementos de control estándar, tales como botones de reproducción, pausa y control de volumen.

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

Ejemplo con múltiples fuentes

Para asegurar el soporte en diferentes navegadores, se puede especificar múltiples fuentes de video usando la etiqueta <source>. Esto permite al navegador elegir el formato de video soportado.

    
      <video controls>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>
    
  

Atributos de la etiqueta <video>

• src: indica la ruta al archivo de video
• controls: muestra los controles de reproducción
• autoplay: reproduce automáticamente el video al cargar la página
• loop: repite la reproducción del video al finalizar
• muted: silencia el audio al cargar
• preload: indica cómo debe cargar el navegador el video. Valores posibles: none, metadata, auto
• width y height: establecen la anchura y altura del reproductor de video
• poster: indica una imagen de marcador que se muestra antes de comenzar la reproducción del video

4.2 Atributos principales

1. Reproducción automática

El atributo autoplay hace que el archivo de video comience a reproducirse automáticamente justo después de cargar la página. Como con el audio, este atributo debe usarse con cautela para no molestar a los usuarios.

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. Repetición del video

El atributo loop indica que el archivo de video debe reproducirse en un bucle infinito. Esto es útil para videos de fondo o animaciones.

    
      <video src="videofile.mp4" loop></video>
    
  

3. Silenciar

El atributo muted silencia el audio del archivo de video al cargar. Esto puede ser útil si quieres que el video se reproduzca sin sonido por defecto, y el usuario pueda activar el sonido si lo desea.

    
      <video src="videofile.mp4" muted></video>
    
  

4. Precarga

El atributo preload le dice al navegador cómo debe cargar el archivo de video al cargar la página. Puede tomar uno de tres valores:

• none: el navegador no debe precargar el video
• metadata: el navegador debe cargar solo los metadatos (duración, dimensiones, etc.)
• auto: el navegador debe cargar completamente el video cuando la página carga

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. Póster

El atributo poster indica una imagen de marcador que se muestra antes de empezar la reproducción del video. Esto puede ser útil para proporcionar al usuario información visual sobre el contenido del video.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 Formatos de video compatibles

Para asegurar la compatibilidad entre navegadores, se recomienda usar múltiples formatos de video. Los formatos más comunes incluyen MP4, WebM y OGG.

Formato MP4

MP4 (MPEG-4 Part 14) es uno de los formatos de video más populares. Es compatible con la mayoría de los navegadores y dispositivos. MP4 utiliza compresión con pérdida y ofrece buena calidad de video con un tamaño de archivo relativamente pequeño.

Ejemplo:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

Formato WebM

WebM es un formato de compresión de video abierto, diseñado para su uso en internet. Es compatible con la mayoría de los navegadores modernos y ofrece buena calidad de video.

Ejemplo:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

Formato OGG

OGG (Ogg Theora) es un formato de video abierto, compatible con muchos navegadores. Este formato ofrece buena calidad de video y es frecuentemente usado como una alternativa a MP4 y WebM.

Ejemplo:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

Ejemplo de uso de múltiples formatos para asegurar compatibilidad

Para asegurar la compatibilidad entre navegadores, se recomienda especificar múltiples fuentes de video en diferentes formatos. El navegador elegirá el primer formato compatible.

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>