网站搜索

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);
    }
}

我不明白为什么事件停止被调用以及如何把它们找回