如何解决使用react-player时如何在视频播放1分钟时显示按钮?
在项目中,我需要在视频播放 1 分钟时显示按钮,任何人都可以帮助我,使用 react-player
这是我的代码,谢谢
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
解决方法
您可以根据the doc使用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" } : {}}>
,
onProgress prop 中的回调获取一个对象作为参数。其中包含经过的秒数之类的东西。
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。