Estoy diseñando una página en la que quiero que se reproduzca el video de cada publicación cuando el usuario pase el mouse sobre la publicación. Lo he configurado así:
<div class="project-link-block"> <div class="video-cover"> <video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover"> <source src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" type="video/mp4"> Your browser doesn't support HTML5 video tag. </video> </div> </div> <script> $(document).ready(function() { $(".playonhover").on("mouseover", function(event) { this.play(); }).on('mouseout', function(event) { this.pause(); }); }) </script>Esto funciona, pero en realidad quiero que el video se reproduzca cuando se desplaza el div superior (clase .project-link-block), no el video en sí. ¿Hay alguna manera de hacer esto? Cambiar la clase en el JS no funcionó. Usando Webflow para esto, en caso de que sea relevante.
¿También cambiaste this cuando cambiaste de clase? Una vez que cambias de clase, el elemento de video ya no es this .
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <div class="project-link-block"> <div class="video-cover"> <video class="playonhover" height="100%" width="100%" muted playsinline loop data-object-fit="cover"> <source src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" type="video/mp4"> Your browser doesn't support HTML5 video tag. </video> </div> </div> <script> $(document).ready(function () { $(".video-cover").on("mouseover", function (event) { $(".playonhover").get(0).play(); }).on('mouseout', function (event) { $(".playonhover").get(0).pause(); }); }) </script>Vea si este código a continuación logra el resultado esperado. Luego convierta a JQuery (si es necesario).
<!DOCTYPE html> <html> <body> <div class="project-link-block"> <div class="video-cover"> <video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover"> <!-- <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> --> <source type="video/mp4" src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" > Your browser doesn't support HTML5 video tag. </video> </div> </div> <script> window.addEventListener( "load", on_documentReady ); function on_documentReady() { //const myTargets = document.getElementsByClassName("playonhover"); const myTargets = document.getElementsByClassName("project-link-block"); for (var i = 0; i < myTargets.length; i++) { myTargets[i].onmouseover = handle_mouseOver; myTargets[i].onmouseout = handle_mouseOut; } } function handle_mouseOver( evt ) { //alert( "## was rolled over" ); evt.target.play(); } function handle_mouseOut( evt ) { //alert( "## was rolled out" ); evt.target.pause(); } </script> </body> </html>