重新初始化youtube iframe api

Question

我正在用ajax添加我的YouTube iframe(在模态/灯箱层中)。一次一个。由于我正在做这件事(而且不能更改)，我无法在文档就绪的情况下运行youtube api。当iframe存在时，需要附加并运行脚本才能找到iframe的ID。

第一个iframe一切都很好。当使用ajax获取iframe时，我还会附加javascript。

但是：当我关闭模态层(我关闭它，出于性能原因，我不会删除它)，并用一个新视频打开另一个层时，我只想再次运行youtube脚本。现在，当添加第二个youtubeapi脚本时，它不起作用。

注意：当我关闭一个模态时，我会使用api暂停视频。这只适用于第一个iframe。

我该怎么办？是否有一个函数可以重新初始化api？

---

感谢您尝试帮助tsturzl，但这不起作用。

我打开一个模态并用ajax加载内容(包含iframe和其他元素)。然后我运行youtube API并将ID设置为iframe ID。

当我关闭模态时，我运行player.pauseVideo()；并暂停视频。模态现在被隐藏(没有被删除，视频被暂停)，iframe仍然在html中，youtube api的ID"已保存"。

现在我想用另一个youtube iframe打开另一个模态(这个也加载了ajax)。我再次运行api并尝试保存该ID，这样当我关闭(隐藏)该模式时，新的视频会暂停，但它不起作用。

知道怎么做吗？

注意：在这些模式中，视频显示在一个预览div中，用户可以隐藏/显示iframe。当他们隐藏它时，视频应该暂停。当iframe被隐藏时，预览分区中会显示一个图像。

Answer 1

似乎没有，但是您可以自己重新初始化它。鉴于你没有提供代码，我将参考这里文件上的代码

要进行初始化，您可以创建"var player；"，这是您使用函数"onYouTubeIframeAPIReady()"创建实例的变量。也许您并不是每次创建模态时都重新创建iframe。

进行模态框的方式可能是将内容存储在javascript中的字符串中。因此，每次你关闭它时，div元素都会消失，因此youtube API可能会因为你初始化的元素缺失而出错。

我的猜测是，每次打开或关闭模态时，都应该创建并删除iframe(即"播放器"对象)。

不幸的是，我不能确定，我没有代码片段作为基础。因为你提供的信息很少。

所以我想要的是这样的东西：

var isReady=0;
var player;
function onYouTubeIframeAPIReady() {
isReady=1;
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function onModalOpen(){
if(isReady==1){
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
}
function onModalClose(){
player=null;
}

当然，您需要为每个iframe创建一个"播放器"对象。您还需要为每个玩家对象调用onModalOpen/Close，可以将其作为参数传递给事件处理程序。