Putting Video in slides causes same videos to play

[StokedOnIt]

Putting video or other video components, causes the same videos to repeat. The first video plays on the 3rd and that repeats,

[p4w31 !d21k0w541]

Did you check closed issue #102? There is example with adding videos to slider from repo owner. If you view it, launch video on first slide and go to the next one. You will see that it needs 1 more step to stop it by itself (tl;dr on slide with number 8 you will still hear video playing).

Now if you overwrite example with code from snippet 1
(I've added some samples and put the same video from the first slide to third one)

snippet 1

import React from "react";
import AwesomeSlider from "react-awesome-slider";
import "react-awesome-slider/dist/styles.css";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h2>React Awesome Slider</h2>
      <AwesomeSlider className="awesome-slider">
        <div>
          <video
            style={{
              width: "100%",
              height: "100%",
              position: "absolute",
              top: 0,
              left: 0,
              objectFit: "cover"
            }}
            controls
            src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4"
          />
        </div>
        <div>8</div>
        <div>
          <video
            style={{
              width: "100%",
              height: "100%",
              position: "absolute",
              top: 0,
              left: 0,
              objectFit: "cover"
            }}
            controls
            src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4"
          />
        </div>
        <div>
          <video
            style={{
              width: "100%",
              height: "100%",
              position: "absolute",
              top: 0,
              left: 0,
              objectFit: "cover"
            }}
            controls
            src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
          />
        </div>
        <div>
          <video
            style={{
              width: "100%",
              height: "100%",
              position: "absolute",
              top: 0,
              left: 0,
              objectFit: "cover"
            }}
            controls
            src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
          />
        </div>
        <div>42</div>
      </AwesomeSlider>
    </div>
  );
}

it works as expected if you consider the same videos. It needs 1 more step to pause the video from the first slide but third one contains the same video. Therefore it will still play when moving to it. And if you continue on changing slides, you will note the same rule. If you move from slide(3) to slide(5) video will stop playing since on fifth slide there isnt the same video and one step was made, slide(4).

ps: the same rule applies to moving with bullets

---

ps2: Update 10.06.2021 - #186 might help