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

Question

在项目中，我需要在视频播放 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

Answer 1

可以根据the doc使用onProgress回调。

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

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

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

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

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

working example in sandbox

Answer 2

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>

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

how to display a button when video played 1 minute when using react-player?

reactjs

react-player