I have a simple slider using react slick slider one of my slides is a video using react player, Now I want if the user changes the slide to pause the playing video here is what I have so far.
Here is a live demo on code sandbox: pause video demo.
Player.js.
import React, { useState } from "react"
import ReactPlayer from "react-player"
function Player({ isPlaying, setIsPlaying }) {
const handleisPlaying = () => {
console.log("before playing?", isPlaying);
setIsPlaying(false);
console.log("after playing?", isPlaying);
};
return (
<div>
<ReactPlayer
url="https://www.youtube.com/watch?v=5DjF0C3dybg"
playing={isPlaying}
volume={1}
width="50vw"
height="50vh"
/>
<button
type="button"
className="btn btn-success"
onClick={handleisPlaying}
>
pause
</button>
</div>
);
}
export default Player;
And here is the slider code.
import React, { useRef, useState, useEffect } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Player from "./Player";
export default function APP() {
const [isPlaying, setIsPlaying] = useState(false);
const settings = {
dots: true,
beforeChange: () => {
console.log("after change");
setIsPlaying(false);
}
};
return (
<div className="container">
<Slider {...settings}>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
<Player setIsPlaying={setIsPlaying} isPlaying={isPlaying} />
</Slider>
</div>
);
}
react slick slider docs react slick docs.
What do I need to do to get this working?
You are not setting the
isPlaying
totrue
when video starts.Here is how you can do it.
You can check it here as well. https://codesandbox.io/s/pause-de-video-forked-9788g?file=/src/Player.js