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

【问题标题】：how to display a button when video played 1 minute when using react-player?使用react-player时如何在视频播放1分钟时显示一个按钮？
【发布时间】：2021-08-07 01:14:52
【问题描述】：

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

【问题讨论】：

标签： reactjs react-player

【解决方案1】：

你可以根据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" } : {}}>

working example in sandbox

【讨论】：

太棒了！所以你能把它标记为你问题的正确答案吗？ :)

【解决方案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>

【讨论】：