HTML5 proporciona soporte nativo para incrustar y reproducir vídeos directamente en páginas web, lo que facilita la integración de contenido multimedia sin depender de complementos de terceros como Flash. A continuación se muestran algunas formas de utilizar vídeos en HTML5:

1. Usando el elemento <video> : El elemento <video> es la característica principal de HTML5 para incrustar videos.

    HTML
    <video width="640" height="360" controls>
       <source src="example.mp4" type="video/mp4">
       Your browser does not support the video tag.
   </video>
   

   • width y height : establece el ancho y alto del reproductor de video.
   • controls : Agrega controles de reproducción como reproducción, pausa y volumen.
   • <source> : Especifique múltiples elementos de origen para proporcionar diferentes formatos de video para una mejor compatibilidad del navegador.

2. Múltiples formatos de video: es una buena práctica incluir múltiples formatos de video para garantizar la compatibilidad entre diferentes navegadores. Los formatos comunes incluyen MP4, WebM y Ogg.

    HTML
    <video width="640" height="360" controls>
       <source src="example.mp4" type="video/mp4">
       <source src="example.webm" type="video/webm">
       <source src="example.ogv" type="video/ogg">
       Your browser does not support the video tag.
   </video>
   

3. Contenido alternativo: incluya contenido alternativo para navegadores que no admiten el elemento <video> .

    HTML
    <video width="640" height="360" controls>
       <source src="example.mp4" type="video/mp4">
       <source src="example.webm" type="video/webm">
       <source src="example.ogv" type="video/ogg">
       Your browser does not support the video tag.
   </video>
   

4. Reproducción automática y bucle: puede utilizar los atributos autoplay y loop para iniciar automáticamente la reproducción del vídeo y reproducirlo en bucle.

    HTML
    <video width="640" height="360" controls autoplay loop>
       <source src="example.mp4" type="video/mp4">
       Your browser does not support the video tag.
   </video>
   

5. Imagen de póster: agregue una imagen de póster que se muestra antes de que comience a reproducirse el video.

    HTML
    <video width="640" height="360" controls poster="poster.jpg">
       <source src="example.mp4" type="video/mp4">
       Your browser does not support the video tag.
   </video>
   

6. Vídeos responsivos: haga que sus vídeos sean responsivos utilizando un ancho basado en porcentaje.

    HTML
    <div style="position: relative; padding-bottom: 56.25%; height: 0;">
       <video style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" controls>
           <source src="example.mp4" type="video/mp4">
           Your browser does not support the video tag.
       </video>
   </div>
   

7. Control de JavaScript: utilice JavaScript para controlar la reproducción de vídeo mediante programación.

    HTML
    <video id="myVideo" width="640" height="360" controls>
       <source src="example.mp4" type="video/mp4">
       Your browser does not support the video tag.
   </video>
   
   <script>
       var video = document.getElementById("myVideo");
   
       function playPause() {
           if (video.paused)
               video.play();
           else
               video.pause();
       }
   </script>
   

Recuerde verificar la compatibilidad del navegador para las funciones que desea utilizar y considere proporcionar contenido alternativo o utilizar técnicas de detección de funciones y mejora progresiva para una mejor experiencia de usuario.