Javascript 如何在我的vue项目中使用youtube api？

嗨，实际上我不想在我的项目中使用youtube api，但在那之后，我把我的脚本放在我的索引html中，我把这段代码放在我的组件中

方法：{
onyoutubeiframeapiredy（）{
window.player=新的YT.player（'视频占位符'{
宽度：600，
身高：400，
videoId:'Xa0Q0J5tOP0'，
playerVars：{
颜色：'白色'，
播放列表：“taJ60kskkns，FG0fTKAqZ5g”
},
活动：{
onReady：初始化
} 
});

我有此错误

YT

未定义

no undef

42:22未定义错误“初始化”。

---

欢迎来到StackOverflow

Youtube Player会有一些问题，但只要遵循严格的规则，就可以使用它

错误是将

onyoutubeiframeapiredy（）

附加到非

窗口

对象的任何位置，因此您确实需要在窗口中启动该函数，例如：

window.onYouTubeIframeAPIReady = () => {
  console.log("onYouTubeIframeAPIReady")
};

由于无法在方法中使用此函数，因此可以采用另一种方法…让该函数在Vue对象中调用方法

var vueApp=新的Vue（{
...
方法：{
initYoutube（）{}
}
})
window.onYouTubeIframeAPIReady=（）=>{
console.log（“onyoutubeiframeapiredy”）
vueApp.initYoutube（）
};

通过这个小技巧，您可以像普通人一样使用Youtube API：

var vueApp=新的Vue({
el:“应用程序”，
数据：函数（）{
返回{
玩家：空
};
},
方法：{
initYoutube（）{
常数=这个；
console.log（“initYoutube”）；
this.player=新的YT.player（“player”{
宽度：600，
身高：400，
videoId:“Xa0Q0J5tOP0”，
活动：{
onReady:uu.onPlayerReady，
onStateChange:u0.onPlayerStateChange
}
});
},
onPlayerReady（evt）{
控制台日志（“播放器就绪”）；
evt.target.playVideo（）；
},
onPlayerStateChange（evt）{
日志（“玩家状态改变”，evt）；
}
}
});
onYouTubeIframeAPIReady=（）=>{
log（“onyoutubeiframeapiredy”）；
vueApp.initYoutube（）；
};

这里有一个

---

（对于Veutify很抱歉，但是我的VueJs代码笔模板集已经自动设置好了，只需在没有

vuetify:new vuetify（），

行的情况下使用即可）：

您在哪里导入

YT

并定义

初始化

，您何时调用

onYouTubeIframeAPIReady

？我在导入youtube api时导入了YT（在我的索引html中）和Inalizalitze处于相同的模式，但我使用vue cli抱歉，但我对一个组件感到困惑，例如：@balexandre这应该是公认的答案。根据您的帖子/小提琴，让YT播放器在我的vue组件中工作。非常感谢！