Dado un video en el sitio web y la tarea es reproducirlo mientras pasa el cursor sobre el video y detener la reproducción del video al quitar el cursor del div de video usando eventos jQuery.
Ejemplo: suponga que tiene prisa y no tiene tiempo para ver el video completo del artículo, entonces puede pasar el cursor sobre el video para ver su contenido sin abrir el video completo. Este método es muy eficiente y se puede utilizar para ahorrar datos y tiempo del usuario. Este enfoque se usa más comúnmente en YouTube y otros sitios web populares de transmisión de video que permiten que el video se reproduzca al pasar el cursor.
Enfoque: se puede reproducir el video al pasar el mouse usando jQuery. Para esto, necesitan tener la función mouseenter que permitirá que el video se reproduzca al pasar el cursor del mouse sobre el video. De manera similar, uno puede pausar el video reproduciendo la función mouseleave de jQuery.
Usando el método jQuery mouseenter() :
Usando el método jQuery mouseleave() :
Implementación de código:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width", initial-scale=1>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="jquery.hoverplay.js"></script>
</head>
<body>
<div id="video-wrapper">
<video id="video" width="320" height="240"
controls data-play="hover" muted="muted">
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200107020629/sample_video.mp4"
type="video/mp4">
Your browser does not
support the video tag.
</video>
</div>
<script>
// Getting video element using jQuery
var video = $("#video");
// Check if video is ready to play
$(video).on('canplay', function () {
$(video).mouseenter(function () {
$(this).get(0).play();
}).mouseleave(function () {
$(this).get(0).pause();
})
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por neeraj kumar 13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA