En este artículo, aprendemos cómo reproducir un video cuando el mouse se desplaza sobre él y cómo detenerlo cuando se quita el mouse del elemento de video. A veces, existe la necesidad de que el video en los sitios web comience a reproducirse automáticamente cuando el usuario mantiene el mouse sobre él porque reduce la cantidad de clics del usuario en el sitio web y le brinda una gran experiencia. Entonces, para lograr ese propósito, usamos javascript para que sea jugable cuando el mouse pasa sobre él y cuando el mouse sale, deja de reproducirse automáticamente.
Enfoque: Primero, adjuntaremos un archivo de video a nuestro HTML DOM y luego aplicaremos el detector de eventos mouseover y mouseout usando javascript. A continuación se muestra la implementación del código completo:
Ejemplo: En este ejemplo, usaremos javascript puro para reproducir el video.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Video element -->
<video src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210810214359/2.mp4"
type="video/mp4" muted class="vid"
loop style="border: solid; width: 800px;">
</video>
<script>
// Targeting video element
let clip = document.querySelector(".vid")
/* Applying mouseover event on video clip
and then we call play() function to play
the video when the mouse is over the video */
clip.addEventListener("mouseover", function (e) {
clip.play();
})
/* Applying mouseout event on video clip
and then we call pause() function to stop
the video when the mouse is out the video */
clip.addEventListener("mouseout", function (e) {
clip.pause();
})
</script>
</body>
</html>
Producción:
salida del navegador
Publicación traducida automáticamente
Artículo escrito por namankumar2592 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA