reactjs - 按钮禁用，直到 youtube 视频结束 - 反应打字稿

Question

我对打字稿做出反应还很陌生。我希望我的视频完成，然后才能使用继续按钮。我找到了如何在 javascript 中执行此操作，但由于某种原因，它不适用于 react typescript。到目前为止，这是我的代码：

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>

  );
}

标签： reactjstypescriptbuttonyoutubedisable

Answer 1

你试过这个吗？ https://www.npmjs.com/package/react-player

特别是“onBufferEnd”回调。

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

和“继续”按钮：

const [canContinue,setCanContinue] = useState(false)

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