Estoy tratando de tener varios videos para desplazarme y comenzar un video de vista previa como youtube. Funciona hasta ahora, pero solo para un video, el primero. ¿Cómo hago que se reproduzca al pasar el mouse por cada video? (Los videos son los mismos para probar)
HTML:
<div class="videos" onclick="location.href='video1.html'" style="cursor:pointer; position: relative;"> <video> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" /> </video> <b>Video Title</b> <p>Video Description</p> </div> <div class="videos" onclick="location.href='video2.html'" style="cursor:pointer; position: relative;"> <video> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" /> </video> <b>Video Title 2</b> <p>Video Description 2</p> </div>JS:
function delay(milliseconds){ return new Promise(resolve => { setTimeout(resolve, milliseconds); }); } const video = document.querySelector("video"); async function startPreview() { await delay(300); video.muted = true; video.currentTime = 1; video.playbackRate = 0.5; video.play(); } function stopPreview() { video.currentTime = 0; video.playbackRate = 1; video.pause(); } let previewTimeout = 1000; video.addEventListener("mouseenter", () => { startPreview(); previewTimeout = setTimeout(stopPreview, 4000); }); video.addEventListener("mouseleave", () => { clearTimeout(previewTimeout); previewTimeout = null; stopPreview(); });Cuando cambio "document.querySelector" a "document.querySelectorAll" , no sucederá nada y el primer video ya no se reproducirá al pasar el mouse sobre él.
