Pause video on slide about react-awesome-slider HOT 2 CLOSED

Worked like a charm thank you very much 👍

from react-awesome-slider.

Hi @REEDOOX

try to make use of onTransitionStart property provided by Awesome Slider component. It gets called just after firing slide change event. So before the transition happens, you would ask for the video and stop it if it is still running. We can access object which holds HTML part to refer to video object and pause it.

I've took fragment from CodeSandbox sample provided by @rcaferati and adjusted it to satisfy your problem.

<AwesomeSlider
      className="awesome-slider"

      onTransitionStart={(e) => {
            var video = e.currentSlide.querySelector("video");
            // console.log(video);
            if (video !== null && !video.paused) {
               video.pause();
             }
      }}
>

You can check on yourself in the CodeSandbox here:
https://codesandbox.io/s/awesome-slider-basic-video-m9j9s (overwrite line 10 with above sample)

Happy coding:)

from react-awesome-slider.