Hola estoy haciendo un carousel
con imágenes y videos con react responsive carousel
pero al momento de ver el video y seguir con el slide
a otra imágenes o videos, este se sigue reproduciendo, no pausa.
Intente ponerle a mi etiqueta video un href
y hacer una función con onchange
para que lo pause mediante video.pause()
, pero no lo logre con ello, intente ponerlo en el atributo onSwipeMove
pero tampoco funciono.
Adjunto el código de mi carousel
export const Carousel2 = () => {
const { id } = useParams();
const property = housesData.find((house) => {
return house.id === parseInt(id);
});
const list = property.images;
return (
<div className="card">
<ReactCarousel
showArrows={true}
showStatus={false}
swipeable={true}
showIndicators={false}
infiniteLoop={true}
emulateTouch={true}
useKeyboardArrows
>
{list.map((prop, id) => (
<div className="image-wrapper" key={id}>
{prop.type === "video" ? (
<video muted controls autoPlay >
<source src={prop.src} type="video/mp4" />
</video>
) : (
<img src={prop.src} alt="media" />
)}
</div>
))}
</ReactCarousel>
</div>
);
};
href
y no con unaref
de react? Creo que estaba bien encaminada tu idea.ref={video} onChange={handlePause}
luego mi funcionhandlePause
teniavideo.pause()
pero igualmente el video seguia reproduciendose, a lo mejor me hace falta algo para que funcione pero no logro saber que esnombreReferencia.current
, entonces creo que la funcion seriavideo.current.pause()
en lugar devideo.pause()
handlePause
para ver en que momento estas disparando esa funcion. No entiendo porque hacer click para cambiar el slide deberia ejecutar unonChange
en el video (si funciona y ejecuta el console, perfecto, tu idea sirve). A lo que me refiero con esto, es que creo que el onChange deberia ir en el slider y no en el video. Y siempre que se haga un click para cambiar de slide, ahi pausar los videos.