1

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>
  );
};
7
  • y porque intentaste con href y no con una ref de react? Creo que estaba bien encaminada tu idea.
    – Agustin G.
    Commented el 16 ene. 2023 a las 17:45
  • Tal vez no lo hice bien, en mi etiqueta video puse lo siguiente ref={video} onChange={handlePause} luego mi funcion handlePause tenia video.pause() pero igualmente el video seguia reproduciendose, a lo mejor me hace falta algo para que funcione pero no logro saber que es Commented el 17 ene. 2023 a las 4:26
  • si haces un console de video que te sale? Porque normalmente para acceder a una referencia tenes que acceder a nombreReferencia.current, entonces creo que la funcion seria video.current.pause() en lugar de video.pause()
    – Agustin G.
    Commented el 17 ene. 2023 a las 11:42
  • por otro lado, tendrias que tener un console.log en la funcion handlePause para ver en que momento estas disparando esa funcion. No entiendo porque hacer click para cambiar el slide deberia ejecutar un onChange 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.
    – Agustin G.
    Commented el 17 ene. 2023 a las 11:45
  • 1
    Muchas gracias ya lo hice funcionar, ya publique la solución Commented el 17 ene. 2023 a las 13:16

1 respuesta 1

1

Para solucionar dicho problema use un ref para mi etiqueta video

const videoRef = useRef(null)
<video  ref={videoRef}  muted controls autoPlay >
    <source src={prop.src} type="video/mp4" />
</video>

Y en mi carousel agregar un onChange pasandole la función para pausar dicho video

onChange={handlePause}

  <ReactCarousel
   onChange={handlePause}>

  const handlePause = ()=> {
    videoRef.current.pause();
  }

Y ya funciono de manera correcta adjunto el código completo

export const Carousel2 = () => {
const videoRef = useRef(null)
  const { id } = useParams();
  const property = housesData.find((house) => {
    return house.id === parseInt(id);
  });
  const list = property.images;

  const handlePause = ()=> {
    videoRef.current.pause();
  }
  
  return (
    <div className="card">
      <ReactCarousel
        showArrows={true}
        showStatus={false}
        swipeable={true}
        showIndicators={false}
        infiniteLoop={true}
        emulateTouch={true}
        useKeyboardArrows
       onChange={handlePause}
      >
        {list.map((prop, id) => (
          <div className="image-wrapper" key={id}>
            {prop.type === "video" ? (
              <video  ref={videoRef}  muted controls autoPlay >
                <source src={prop.src} type="video/mp4" />
              </video>
            ) : (
              <img src={prop.src} alt="media" />
            )}
          </div>
        ))}

      </ReactCarousel>
    </div>
  );
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.