reactjs - 使用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

您可以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);
  };

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

<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>