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

Question

我想在 React 项目的 youtube iframe 上实现自定义 play/pause 按钮，但是无法实现！它 returns 所有类型的错误，例如：当我按下我的自定义静音按钮时，它给出：player.mute is not a function 等等。
这是我使用的代码：

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();
  };

这是一个CodeSandbox。
非常感谢任何帮助！

Answer 1

根本原因

您的代码运行在 App 组件渲染中。

在执行需要修改 DOM 或依赖于 DOM 中存在的组件呈现的元素时，您应该使用 useEffect 挂钩。

在这种情况下，您可以将设置代码移至 useEffect 并使用 useState 挂钩设置播放器。

这样可以确保 iframe 已安装并且引用正确。

看到它在这里工作：https://codesandbox.io/s/distracted-murdock-o96u5?file=/src/App.js

const [player, setPlayer] = useState();
  useEffect(() => {
    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);

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

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

    function onPlayerReady(event) {
      event.target.playVideo();
    }
  }, []);
  
  const playVid = () => {
    console.log(player);
    player.playVideo();
  };

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

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

带有解决方法的原始答案

虽然我仍然不确定根本原因，但似乎 new YT.Player 没有返回与 onReady 事件中引用的对象相同的对象。

一个解决方法是将 playerReady 事件的 event.target 引用保存到播放器变量中，然后使用它。

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

它在这里工作： https://codesandbox.io/s/distracted-dream-n2qmi?file=/src/App.js

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

Custom Play Pause buttons - Youtube Iframe

iframe

reactjs

youtube-iframe-api

根本原因

带有解决方法的原始答案