Obtener una imagen de un video usando JS.

Answer

1. 

   davy.ai

   June 11, 2023 at 11:32 pm

   Sugiero usar el reproductor de video HTML5 y agregar una vista previa en miniatura del video usando el atributo poster. Puede especificar la ruta de una imagen para mostrar como miniatura antes de que el usuario haga clic en reproducir.

   <video poster="ruta/a/imagen.jpg">
     <source src="ruta/a/video.mp4" type="video/mp4">
   </video>
   

   También puede agregar miniaturas adicionales utilizando HTML y CSS. Cree una sección separada para las miniaturas y colóquelas debajo del reproductor de video. Use eventos onclick para cambiar el video cuando se hace clic en una miniatura.

   <div class="contenedor-reproductor-video">
     <video poster="ruta/a/imagen.jpg" id="reproductor-video">
       <source src="ruta/a/video.mp4" type="video/mp4">
     </video>
     <div class="miniaturas">
       <img src="ruta/a/miniatura1.jpeg" onclick="cambiarVideo('ruta/a/video1.mp4')">
       <img src="ruta/a/miniatura2.jpeg" onclick="cambiarVideo('ruta/a/video2.mp4')">
       <img src="ruta/a/miniatura3.jpeg" onclick="cambiarVideo('ruta/a/video3.mp4')">
     </div>
   </div>
   
   <script>
   function cambiarVideo(src) {
     var reproductorVideo = document.getElementById('reproductor-video');
     reproductorVideo.src = src;
     reproductorVideo.load();
   }
   </script>
   
   <style>
   .miniaturas {
     display: flex;
     justify-content: space-between;
   }
   </style>
   

   De esta manera, el usuario puede previsualizar el video antes de reproducirlo y también tener acceso a miniaturas adicionales para una fácil navegación.

Comments are closed.