CODEWITHSUNDEEP
reactjsreact-player
fjie
fjie

Reputation: 13

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

in the project, I need the button to show up when the video played 1 minute, anyone can help me with this, using with react-player

here is my code, thanks

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

Upvotes: 1

Views: 1842

Answers (2)

İlker
İlker

Reputation: 2090

The callback in onProgress prop gets an object as a parameter. which contains seconds passed and stuff like that.

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

Upvotes: 0

alisasani
alisasani

Reputation: 2968

you can use onProgress callback according to the doc.

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

It returns played and loaded progress as a fraction, and playedSeconds and loadedSeconds in seconds. Then you can store playedSeconds in the state:

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

After that, set a conditional rendering for the button in order to make it visible when playedSeconds exceeds 10 seconds e.g., as below:

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

working example in sandbox

Upvotes: 1

Related Questions