0

I'm fairly new to react typescript. I want my video to finish and only then will the continue button be abled. I found how to do this in javascript but for some reason it doesn't work for react typescript. This is my code so far:

import { Link } from "react-router-dom";
import Container from 'react-bootstrap/Container';

function timeout(delay: number) {
    return new Promise(res => setTimeout(res, delay));
}

export function Video() {
    return (
        <Container className="p-3">
    <div className="alert alert-info" role="alert">
      <h4 className="alert-heading"></h4>
      <p style={{ textAlign: "center" }}>
              <big> <b>  Please watch the video </b> </big>
        <br />
      </p>
      <iframe
        title={"video"}
        width={"560"}
        height={"315"}
        style={{
          marginLeft: "auto",
          marginRight: "auto",
          marginBottom: "40px",
          display: "block",
        }}
              src="https://www.youtube.com/embed/iw5lP63fUxY?autoplay=1&controls=0"
        frameBorder={"0"}
        allow={
          "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        }
        allowFullScreen
          />
          <p style={{ textAlign: "center" }}>
              <Link to="/A">
                  <button type="button" className="btn btn-info">
               Continue
      </button>
      </Link>
        </p>
            </div>
        </Container>

  );
}
Lyrie Harel
  • 1

1 Answers1

0

Did you try this? https://www.npmjs.com/package/react-player

Expecially the "onBufferEnd" callback.

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' onBufferEnd={()=>setCanContinue(true)} />

and the "Continue" button:

const [canContinue,setCanContinue] = useState(false)

<button type="button" {canContinue ? "" : "disabled"} className="btn btn-info">

AlbertoZ
  • 154
  • 8
  • Hi! thanks so much for your quick answer- it did disable the button, but does not enable it when the video finishes. we wrote the following: export function Video() { const [CanContinue, setCanContinue] = useState(false); and then: – Lyrie Harel Mar 27 '21 at 10:56
  • Did you use ReactPlayer with onBufferEnd? – AlbertoZ Mar 27 '21 at 12:22
  • Yes we did, exactly like you suggested. It did disable the button once the video started playing, but when the video finished it stayed disabled, not allowing us to continue. – Lyrie Harel Mar 27 '21 at 13:32