Javascript 如何确定何时加载youtube嵌入式iframe

我正在尝试将youtube

iframe

嵌入到我的应用程序中，并在youtube视频加载并准备播放时收听；我的想法是让用户按下播放按钮，在视频完全准备好播放之前，不会显示自动播放的嵌入式视频，因此用户不必按下按钮然后等待嵌入式播放器加载

我试着看一看和各种相关的堆栈溢出，但仍然发现我自己被困在如何向iframe播放器添加一个侦听器，以了解视频何时完全加载。

onLoad

全局事件属性似乎也不是我正在寻找的解决方案。我如何知道某个嵌入youtube的iframe视频何时完全加载并准备好播放？我是否错误地实现了iframeapi？你可以在下面看到我的尝试。谢谢

constyoutubeplayer:React=（）=>{
const readyFn=（）=>console.log（'ready'）；
让玩家；
const onYouTubePlayerAPIReady=（）=>{
player=newwindow.YT.player（“youtube iframe id”{
高度：“390”，
宽度：“640”，
videoId，
活动：{
onReady:readyFn，
},
});
};
返回(
);
};
ReactDOM.render（，app）
实际上，
iframe
就像页面中的另一个JavaScript线程。在这种情况下，您只需通过发布
消息
并使用
addEventListener
监听线程之间的连接即可。如下图所示：

document.addEventListener('message', () => { /* Do Something */ }, false);

对于YouTube的加载，您可以使用
onLoad
方法发布视频已加载的消息，并将其传递给另一个线程，另一个线程
执行一些操作

我希望我的回答能帮助你，我的朋友。
在你的html页面上这样做

 <iframe id="ik_player_iframe"
 frameborder="0" height="315" src="https://www.youtube.com/embed/3-vF7ytJxnI"
 width="560"></iframe>

    function onYouTubeIframeAPIReady() {
      //creates the player object
      ik_player = new YT.Player('ik_player_iframe');

      console.log('Video API is loaded');

      //subscribe to events
      ik_player.addEventListener("onReady",       "onYouTubePlayerReady");
      ik_player.addEventListener("onStateChange", "onYouTubePlayerStateChange");
    }

    function onYouTubePlayerReady() {
      console.log('Video is ready to play');
    }

    function onYouTubePlayerStateChange(event) {
      console.log('Video state changed');
    }


函数onyoutubeiframeapiredy（）{
//创建播放器对象
ik_player=新的YT.player（'ik_player_iframe'）；
log（“加载了视频API”）；
//订阅活动
ik_player.addEventListener（“onReady”、“onYouTubePlayerReady”）；
ik_player.addEventListener（“onStateChange”、“onYouTubePlayerStateChange”）；
}
函数onYouTubePlayerReady（）{
log（“视频已准备好播放”）；
}
函数onYouTubePlayerStateChange（事件）{
console.log（“视频状态已更改”）；
}
我在安装组件并添加事件侦听器时注入了脚本，如中所述。
您可以使用文档中所述的
onyoutubeiframeapiredy
onyoutubeiframeapiredy
–当页面下载完播放器API的JavaScript后，API将调用此函数，这样您就可以在页面上使用API了。因此，此函数可能会创建要在页面加载时显示的播放器对象。