¿Cómo incrusto un vídeo en mi página usando la etiqueta «video» de HTML5?

Incrustar un vídeo en tu página con la etiqueta <video> de HTML5 es bastante sencillo y te da mucho control sobre la reproducción.

1. La etiqueta <video> básica:
   En su forma más simple, puedes usar el atributo src directamente en la etiqueta <video> para enlazar a tu archivo de vídeo.
   <video src="mi_video.mp4"></video>
   Sin embargo, para una mejor compatibilidad entre navegadores, se recomienda usar la etiqueta <source>.
2. Uso de la etiqueta <source> (recomendado):
   Puedes proporcionar múltiples formatos de vídeo, y el navegador elegirá el primero que pueda reproducir.
   Los formatos más comunes son MP4, WebM y Ogg.
   <video>
<source src="mi_video.mp4" type="video/mp4">
<source src="mi_video.webm" type="video/webm">
Tu navegador no soporta la etiqueta de vídeo. </video>
   El texto entre <video> y </video> (después de las etiquetas <source>) se mostrará si el navegador no admite la reproducción de vídeo HTML5.
3. Atributos esenciales y útiles para <video>:
   • controls: Imprescindible. Añade los controles de reproducción predeterminados del navegador (play/pausa, volumen, pantalla completa, barra de progreso).
     <video controls>
<source src="mi_video.mp4" type="video/mp4">
</video>
   • width y height: Especifican las dimensiones del reproductor de vídeo en píxeles.
     <video width="640" height="360" controls>
<source src="mi_video.mp4" type="video/mp4">
</video>
   • autoplay: Hace que el vídeo comience a reproducirse automáticamente tan pronto como sea posible.
     Precaución: muchos navegadores bloquean el autoplay con sonido o solo lo permiten si el vídeo está silenciado (muted). Úsalo con consideración hacia la experiencia del usuario.
   • muted: Silencia el audio del vídeo por defecto. A menudo necesario para que autoplay funcione.
   • loop: Hace que el vídeo se reproduzca en bucle continuamente.
   • poster="imagen.jpg": Muestra una imagen (la URL especificada) mientras el vídeo se está cargando o hasta que el usuario pulse «play».
   • preload: Indica al navegador cómo debe cargar el vídeo. Valores:
     • auto (el navegador carga lo que considera necesario, incluso el vídeo completo).
     • metadata (carga solo los metadatos del vídeo: dimensiones, duración, etc.).
     • none (no precarga nada hasta que el usuario lo inicie).
4. Pistas de texto (<track>) para accesibilidad:
   Para hacer tus vídeos accesibles, puedes añadir subtítulos, leyendas, descripciones, etc., usando la etiqueta <track>.
   <video controls>
<source src="mi_video.mp4" type="video/mp4">
<track src="subtitulos_es.vtt" kind="subtitles" srclang="es" label="Español">
<track src="subtitulos_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

Ejemplo completo:

<video width="720" height="480" controls poster="poster_del_video.jpg" preload="metadata">
  <source src="mi_video_genial.mp4" type="video/mp4">
  <source src="mi_video_genial.webm" type="video/webm">
  <track src="subtitulos_es.vtt" kind="subtitles" srclang="es" label="Español" default>
  <track src="capitulos_video.vtt" kind="chapters" srclang="es">
  Lo sentimos, tu navegador no soporta vídeos HTML5. Puedes <a href="mi_video_genial.mp4">descargarlo aquí</a>.
</video>
Lenguaje del código: PHP (php)

Con estos elementos y atributos, puedes incrustar vídeos de manera efectiva y accesible en tus páginas web.