我有一个使用 react slick 滑块的简单滑块我的一张幻灯片是使用 react 播放器的视频,现在我想如果用户更改幻灯片以暂停播放视频,这就是我目前所拥有的。
这是代码沙箱的现场演示:暂停视频演示。
播放器.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;
这是滑块代码。
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>
);
}
反应光滑的滑块文档反应光滑的文档。
我需要做什么才能使它正常工作?