在React-bootstrap旋转木制旋转木马内重播视频
我有一个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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我已经找到了解决方案,尽管我认为有更好的方法来解决这个问题,
无论如何我都会写在这里。
首先,我将视频直接放在滑块内,然后使用普通 JavaScript 选择所有视频,并在幻灯片更改时借助
onSlid
属性重置视频时间有一个问题用这种方法,
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
propertyThere is a problem with this method,
onSlid
property callshandler
function after the fade ends which makes a ~0.5s delay before the functionhandler
executes