Estoy tratando de crear un carrusel de video basado en el evento de desplazamiento, de modo que cuando el usuario pase el mouse sobre el primer video, debería reproducirse y cuando pase el mouse sobre el segundo video, el primer video debería detenerse y el segundo video debe reproducirse.
He logrado reproducir video al pasar el mouse. Necesito ayuda para detener otros videos cuando reproduzco el actual
document.querySelectorAll('.Main--VideoOuter').forEach((video) => { video.addEventListener('mouseover', function (event) { var playPromise = this.querySelector('video').play(); if (playPromise !== undefined) { playPromise.then(_ => { // Automatic playback started! // Show playing UI. // We can now safely pause video... this.pause(); }) .catch(error => { // Auto-play was prevented // Show paused UI. }); } }); }); * { box-sizing: border-box; } body, { padding: 0; margin: 0; } .main { display:flex; } .main video{ max-width:300px; margin:0 25px } <div class="main "> <div class="Main--VideoOuter"> <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video> </div> <div class="Main--VideoOuter"> <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video> </div> <div class="Main--VideoOuter"> <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline > </video> </div> <div class="Main--VideoOuter"> <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video> </div> <div class="Main--VideoOuter"> <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video> </div> </div>Ver violín al final de esta respuesta. Aquí está el código JS que incluye la funcionalidad que necesita:
document.querySelectorAll('.Main--VideoOuter').forEach((video) => { video.addEventListener('mouseover', function (event) { var playPromise = this.querySelector('video').play(); document.querySelectorAll('.Main--VideoOuter').forEach(videoOuter => { if (videoOuter !== event.currentTarget) { videoOuter.querySelector('video').pause(); } }); if (playPromise !== undefined) { playPromise.then(_ => { // Automatic playback started! // Show playing UI. // We can now safely pause video... this.pause(); }) .catch(error => { // Auto-play was prevented // Show paused UI. }); } });});
Al pasar el video, simplemente itera a través de su elemento "Main--VideoOuter" y detiene () cada video que no es el que está pasando actualmente.
document.querySelectorAll('.Main--VideoOuter').forEach((video) => { video.addEventListener('mouseover', function (event) { var playPromise = this.querySelector('video').play(); document.querySelectorAll('.Main--VideoOuter').forEach(videoOuter => { if (videoOuter !== event.currentTarget) { videoOuter.querySelector('video').pause(); } }); if (playPromise !== undefined) { playPromise.then(_ => { // Automatic playback started! // Show playing UI. // We can now safely pause video... this.pause(); }) .catch(error => { // Auto-play was prevented // Show paused UI. }); } }); }); * { box-sizing: border-box; } body, { padding: 0; margin: 0; } .main { display:flex; } .main video{ max-width:300px; margin:0 25px } <div class="main "> <div class="Main--VideoOuter"> <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video> </div> <div class="Main--VideoOuter"> <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video> </div> <div class="Main--VideoOuter"> <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline > </video> </div> <div class="Main--VideoOuter"> <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video> </div> <div class="Main--VideoOuter"> <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video> </div> </div>