[Help]: “How can I add an autoplay feature to a sliding video and speed would reduce when the mouse hovers？

[JoeJoeyMa]

Summary

“How can I add an autoplay feature to a sliding video? I know that useCallback can be used to call functions like emblaApi.scrollPrev(), and currently, I am using useEffect to implement this. However, it only allows video playback through a button. Is there a way to initiate playback by sliding? Also, I’ve tried to add a feature in AutoScroll where the speed would reduce when the mouse hovers over it, but it failed. I don’t understand why reducing the speed requires resetting the component. Does anyone know how to solve these two issues? Below is part of the code.”

   <div className="embla4 w-screen h-[80vh] relative">
            <div className="embla__viewport4" ref={emblaRef}>
                <div className="embla__container4">
                    {videoUrls.map((url, index) => (
                        <div className="embla__slide1 w-screen relative group" key={index} >
                            <div className="embla__parallax">
                                <div className="embla__parallax__layer">
                                    <video
                                        className="w-full h-[80vh] object-cover embla__slide__img embla__parallax__img"
                                        ref={videoRefs.current[index]} autoPlay={index === activeIndex} loop muted>
                                        <source src={url} type="video/mp4" />
                                        Your browser does not support the video tag.
                                    </video>


                                </div>
                            </div>

useEffect(() => {
        // Pause all videos except the active one
        videoRefs.current.forEach((videoRef, index) => {
            if (index === activeIndex) {
                videoRef.current.play();
            } else {
                videoRef.current.pause();
            }
        });
    }, [activeIndex]);

 const [emblaRef, emblaApi] = useEmblaCarousel(mergedOptions, [AutoScroll({ playOnInit: true, speed: 0.8, stopOnInteraction: false, stopOnMouseEnter: true })]);

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response