在React-bootstrap旋转木制旋转木马内重播视频

发布于 2025-01-17 16:10:40 字数 1905 浏览 0 评论 0原文

我有一个React-bootstrap旋转木制,每张幻灯片都包含组件,并且每个组件中都有一个视频,视频是自动播放和循环的, 我试图使视频从开始时从开始时播放,而不是在滑块中显示,而不是继续其最初启动的位置。 根据 react-bootstrap文档 > OnSlid :幻灯片过渡结束时触发回调。 我想通过回调函数启动视频,但我不知道如何编写此功能。 这是代码:

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;

 

具有这样的视频的组件:

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;

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;

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

夜声 2025-01-24 16:10:40

我已经找到了解决方案,尽管我认为有更好的方法来解决这个问题,
无论如何我都会写在这里。
首先,我将视频直接放在滑块内,然后使用普通 JavaScript 选择所有视频,并在幻灯片更改时借助 onSlid 属性重置视频时间

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;

有一个问题用这种方法,
onSlid 属性在淡入淡出结束后调用 handler 函数,这会在函数 handler 执行之前产生大约 0.5 秒的延迟

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文