replay a video inside a React-bootstrap Carousel

user_11170736 0
Viewed 509

I have a React-bootstrap Carousels, each slide contains component and there is a video in each of these components, the video is auto played and looped, I'm trying to make the video play from start when it gets shown in the slider and not continue where it originally started from. according to React-bootstrap documentation there is a property called onSlid : Callback fired when a slide transition ends. I want to start the video over via a callback function but I don't know how to write this function. This is the code :

import Carousel from "react-bootstrap/Carousel";
import { useState } from "react";
import componant1 from "../SliderComponents/component1 ";
import componant2 from "../SliderComponents/component2 ";
import componant3 from "../SliderComponents/component3 ";

const Hero = () => {
  const handler = () => {
    // here is where I'm trying to start the video from second 0
  };
  return (
    <div className="Hero">
      <div>
        <Carousel
          controls={false}
          fade={true}
          interval={5500}
          pause={false}
          className="hero-slider"
          onSlid={handler} //a callback fired when a slide transition ends.
        >
          <Carousel.Item>
            <component1 />
          </Carousel.Item>
          <Carousel.Item>
            <component2 />
          </Carousel.Item>
          <Carousel.Item>
            <component3 />
          </Carousel.Item>
        </Carousel>
      </div>
    </div>
  );
};
export default Hero;

The components that has the videos looks like this :

import videos from "../../../assets/videos/index";

    const component1= () => {
      return (
        <div className="wrapper">
          <video
            className="slider-video"
            src={videos.video1}
            loop
            autoPlay
            muted
            loading="lazy"
          ></video>
        </div>
      );
    };
    export default component1;
carousel reactstrap react-bootstrap reactjs
1 Answers

I have found a solution although I think there is a better way to solve this, I will write it here anyway. first of all, I have put the videos directly inside the slider and then I have used vanilla JavaScript to select all the videos and reset their time when the slide changes with the help of onSlid property

import Carousel from "react-bootstrap/Carousel";
import videos from "../../assets/videos/index";

const Hero = () => {
  const sliderVideos = document.querySelectorAll(".slider-video");
  const handler = () => {
    sliderVideos.forEach((video,key) => {
    video.pause();
    video.currentTime = 0;
    video.load();
});
  };
  return (
    <div className="Hero">
      <div>
        <Carousel
          controls={false}
          fade={true}
          interval={5500}
          pause={false}
          className="hero-slider"
          onSlid={handler}
        >
          <Carousel.Item>
             <video
            className="slider-video"
            src={videos.video1}
            loop
            autoPlay
            muted
            loading="lazy"
          ></video>
          </Carousel.Item>
          <Carousel.Item>
            <video
            className="slider-video"
            src={videos.video2}
            loop
            autoPlay
            muted
            loading="lazy"
          ></video>
          </Carousel.Item>
          <Carousel.Item>
            <video
            className="slider-video"
            src={videos.video3}
            loop
            autoPlay
            muted
            loading="lazy"
          ></video>
          </Carousel.Item>
        </Carousel>
      </div>
    </div>
  );
};
export default Hero;

There is a problem with this method, onSlid property calls handler function after the fade ends which makes a ~0.5s delay before the function handler executes

user_111707360
Related