reactJS中通过ID动态改变YouTube视频答案

【问题标题】：Dynamically change YouTube video through ID in reactJSreactJS中通过ID动态改变YouTube视频
【发布时间】：2022-08-15 11:13:30
【问题描述】：

我是 React 的新手。目前，我正在尝试构建一个具有 iframe 和文本字段以及按钮的应用程序。文本字段将允许用户使用 Youtube 视频 ID 更改视频。这里我使用了两个依赖项，react-youtube 和 get-youtube-id。我已按照 react-youtube npm 的使用说明进行操作，但控制台抛出错误。我试过删除

onReady={this._onReady} 这个特定的代码，只是现在 iframe 闪烁并消失。

enter image description here

import React, { useState } from \"react\";
import YouTube from \"react-youtube\";
var getYouTubeID = require(\"get-youtube-id\");

function App() {
  const [id, setId] = useState(\"\");

  function handleChange(e) {
    console.log(e.target.value);

    setId(getYouTubeID(e.target.value));
  }

  const opts = {
    height: \"390\",
    width: \"640\",
    playerVars: {
      autoplay: 0
    }
  };

  return (
    <div className=\"App bg-navy\">
      <div className=\"container py-5\">
        <div className=\"row\">
          {/*--- iFrame Column ---*/}
          <div className=\"border-5 border-info\">
            <YouTube videoId={id} opts={opts} />
          </div>
          {/*--- Buttons and Search Input Column ---*/}
          <form>
            <div className=\"form-group\">
              <input
                type=\"text\"
                onChange={handleChange}
                required
                placeholder=\"Enter Video URL\"
              />
            </div>
            <button type=\"submit\" className=\"btn btn-info\">
              Change
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

export default App;

codesandbox link

标签： reactjs youtube-api youtube-iframe-api

【解决方案1】：

我不知道为什么会这样，但是我遇到了完全相同的问题，并且在 onReady 函数（我从 YouTube 组件中调用）中，我调用了 event.target.currentTime() 并且它停止消失。

【讨论】：