Question

我想在 React 项目中的 youtube iframe 上实现自定义播放/暂停按钮，但是无法实现！它返回所有类型的错误，例如：当我按下我的自定义静音按钮时，它给出：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 引用保存到 player 变量并使用它。

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

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

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

1 个答案:

根本原因

带有变通方法的原始答案