使用react播放器播放1分钟视频时如何显示按钮

Question

在项目中，我需要在视频播放1分钟时显示按钮，任何人都可以帮助我，使用react播放器

这是我的代码，谢谢

const Page = () => {
const [play, setPlay] = useState(false)
const [showButton, setShowButton] = useState(false)


function playVideo() {
setPlay(true);
}
return(
<div>
<div className="relative">
<div className="embed-responsive aspect-ratio-16/9">
<ReactPlayer 
className="embed-responsive-item"
url="https://vimeo.com/126060304"
width="100%"
height="100%"
onProgress={(played=1.00) => setShowButton(true)}
controls={true}
playing={play}
></ReactPlayer>
<div className={`cursor-pointer absolute inset-0 ${play === true ? 'hidden' : ''}`} onClick={playVideo} onKeyDown={playVideo} aria-hidden="true">
<StaticImage src="../../images/play-overlay.png" alt="overlay" />
</div>
</div>
</div>
{showButton && (
<button>next</button>
)}
</div>
)
}
export default Page

Answer 1

您可以根据单据使用onProgress回调。

<ReactPlayer
url="https://vimeo.com/226260195"
className="react-player"
playing={false}
width="100%"
height="100%"
onProgress={(e) => handleProgress(e.playedSeconds)}
/>

它以分数形式返回播放和加载的进度，以秒为单位返回playedSeconds和loadedSeconds。然后可以将playedSeconds存储在状态：

const [seconds, setSeconds] = useState(0);
const handleProgress = (secs) => {
setSeconds(secs);
};

之后，为按钮设置条件呈现，以便在playedSeconds超过10秒时使其可见，例如：

<button style={parseFloat(seconds) < 10 ? { display: "none" } : {}}>

沙箱中的工作示例

Answer 2

onProgress道具中的回调获取一个对象作为参数。其中包含经过的秒数和诸如此类的内容。

<ReactPlayer 
className="embed-responsive-item"
url="https://vimeo.com/126060304"
width="100%"
height="100%"
onProgress={(prog) => {
if(prog.playedSeconds >= 60){
setShowButton(true)
} } }
controls={true}
playing={play}
></ReactPlayer>