JavaScript - Reproducir pre-visualización empleando hover sobre una imagen como en Youtube

 
Vista:
sin imagen de perfil

Reproducir pre-visualización empleando hover sobre una imagen como en Youtube

Publicado por Mc (2 intervenciones) el 21/09/2022 23:19:28
Captura-de-pantalla-2022-09-21-161324
Necesito que el video se reproduzca automáticamente cuando el cursor o puntero este encima de una imagen que haga referencia al video , así como funciona en Youtube o Netflix.
¿Alguna idea de como hacerlo?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Reproducir pre-visualización empleando hover sobre una imagen como en Youtube

Publicado por Ivan (118 intervenciones) el 22/09/2022 19:18:59
Hola,

en realidad es tan fácil como esto:

1
2
3
<video width="100%" controls onmouseover="this.play()">
  <source src="mi_video.mp4" type="video/mp4">
</video>

Pero hay un inconveniente ...
En las últimas modificaciones de seguridad los navegadores han eliminado las reproducciones automáticas de sonido/video excepto si el usuario ha interactuado con la página (un simple clic).

Observa que el código que he puesto funciona si haces un clic previo en la página. Entonces, debes conseguir que el usuario interactue con la página o cumplir con los requisitos para la reproducción automática.

Te pongo un par de enlaces donde los explican:

https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement/play
https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Reproducir pre-visualización empleando hover sobre una imagen como en Youtube

Publicado por Mc (2 intervenciones) el 17/10/2022 05:50:58
Muchas gracias por la ayuda, enserio gracias .
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar