Tengo el siguiente código JavaScript que funciona muy bien cuando paso el cursor sobre un video. Me gusta cómo el inicio y la parada se dividen en funciones y me permite personalizar el juego flotante exactamente como quiero. Sin embargo, este código solo funciona en el primer video de la página y tengo varios videos que se cargan dinámicamente en la página.
Me gustaría modificar este código para que funcione en todos los videos de la página. Estoy pensando que tal vez las funciones deban llamarse dentro de un bucle. No estoy seguro porque no conozco bien JavaScript, por lo que cualquier ayuda sobre cómo modificar este código sería muy apreciada.
const video = document.querySelector("video"); function startPreview() { video.muted = true; video.currentTime = 5; video.playbackRate = 2.5; video.play(); } function stopPreview() { video.currentTime = 5; video.playbackRate = 1; video.pause(); } let previewTimeout = null; video.addEventListener("mouseenter", () => { startPreview(); previewTimeout = setTimeout(stopPreview, 3000); }); video.addEventListener("mouseleave", () => { clearTimeout(previewTimeout); previewTimeout = null; stopPreview(); });Puede hacer delegación de eventos para manejar todos los videos. Asi que:
document.body.addEventListener('mouseenter', (event) => { if (event.target.matches('video') { // start playing } }); Más información sobre el método matches() en MDN .
También modificaría los métodos de inicio y detención para tomar el elemento de video como parámetro:
function startPreview(video) { video.muted = true; video.currentTime = 5; video.playbackRate = 2.5; video.play(); } Y pásales el event.target .