Youtube iFrame API - React，播放器未定义

Question

我目前正在使用iFrame API从我的项目，我试图有自定义的音量控制，以便用户能够改变iFrame视频之外的音量。我已经设置了播放器，但是当它在eventandler之外被调用时，它总是未定义的。

const { youtubeDetails, volume } = useContext(GlobalContext);
useYoutube(loadVideo);
let player: any;
function loadVideo() {
(window as any).YT.ready(function () {
player = new window.YT.Player("player", {
events: {
onStateChange: onStateChange
}
});
});
}
useEffect(() => {
console.log(player)  // never defined
changeVolume()     
}, [volume]);
function onStateChange() {
console.log(player)  // always defined
}
function changeVolume() {
player.setVolume(volume * 100);
}

这是因为loadVideo()在第一次渲染之后就不会再被调用了。是否存在围绕该结构的工作以实现目标功能?

自定义useYoutube钩子如下:

import React from "react";
export const useYoutube = (callback: any) => {
React.useEffect(() => {
if (!(window as any).YT) {
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag?.parentNode?.insertBefore(tag, firstScriptTag);
tag.onload = callback;
} else {
callback();
}
}, []);
};

Answer 1

我知道这是一个老帖子，但我遇到了同样的问题，问题似乎是YT首先加载，然后延迟属性'ready'和'Player'加载。所以我不得不在setTimeout中包装我的回调，大约有200ms的延迟，以便能够调用方法'ready'和'Player'。