javascript - 在更改 iframe 父容器后,YouTube iframe 播放器不触发事件
在我的应用程序中,我需要更改 YouTube iframe 所在的容器。更改容器后,状态更改事件(onStateChange)没有触发。然而,每次更改父元素时,ready 事件(onReady)都会被调用。我尝试在 onReady 事件处理程序中添加“addEventListener”,但它不起作用,事件没有触发。例如:
export class YouTubePlayer
{
private player: YT.Player;
private ready: boolean = false;
public Init(): void
{
(<any>window).onYouTubeIframeAPIReady = () =>
{
console.log("VideoPlayer onYouTubeIframeAPIReady");
this.player = new YT.Player('player', {
height: '800px',
width: '600px',
playerVars: { 'modestbranding': 1, 'disablekb': 1, 'showinfo': 0, 'autoplay': 0 },
events: {
'onReady': (ev: YT.PlayerEvent) =>
{
if (this.ready)
{
//It's not working for me. Events not firing after change parent container
ev.target.addEventListener("onStateChange", (evTwice: YT.PlayerEvent) =>
{
console.log("VideoPlayer: I'm alive!!!");
});
this.player.addEventListener("onStateChange", (evTwice: YT.PlayerEvent) =>
{
console.log("VideoPlayer: I'm alive too!!!");
});
return;
}
this.ready = true;
setInterval(() => { this.player.loadVideoById("lArqtUE2w3o"); }, 5000);
},
'onStateChange': (ev: YT.PlayerEvent) =>
{
//Events not firing after change parent container
console.log("VideoPlayer change state: " + ev['data']);
}
}
});
};
console.log("VideoPlayer init");
let script = window.document.createElement("script");
script.type = "text/javascript";
script.src = "https://www.youtube.com/iframe_api";
window.document.body.appendChild(script);
}
}
我不明白为什么事件停止被调用以及如何把它们找回