Reactjs 自定义播放暂停按钮-Youtube Iframe

我想在React项目中在youtube iframe上实现自定义播放/暂停按钮，但未能实现！它返回所有类型的错误，例如：当我按下自定义静音按钮时，它给出：

player.mute不是一个函数

等等
以下是我正在使用的代码：

var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
  tag.setAttribute("onload", "onYouTubeIframeReady()");
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;

  window.onYouTubeIframeReady = function () {
    player = new YT.Player("player", {
      videoId: "sGPrx9bjgC8",
      autoplay: true,

      events: {
        onReady: onPlayerReady
      }
    });
  };

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  const playVid = () => {
    player.playVideo();
  };

  const unMuteVid = () => {
    player.unMute();
  };

  const muteVid = () => {
    player.mute();
  };

这是一本书
非常感谢您的帮助

根本原因 您的代码正在应用程序组件渲染中运行

当执行需要修改DOM或依赖DOM中组件呈现的元素的操作时，应该使用

useffect

hook

在这种情况下，您可以将设置代码移动到

useffect

中，并使用

useState

挂钩设置播放器

通过这种方式，您可以确保iframe已安装且引用正确

看到它在这里工作：

带变通方法的原始答案 虽然我仍然不确定根本原因，但新的YT.Player似乎没有返回与onReady事件中引用的对象相同的对象

一种解决方法是将playerReady事件上的event.target引用保存到player变量中，然后使用该变量

function onPlayerReady(event) {
    player = event.target;

这就是它的工作原理：

---

就这样！成功了！谢谢

function onPlayerReady(event) {
    player = event.target;