YouTube API 在视频更改后停止监听事件

Question

假设我需要通过单击按钮并从数组中获取新的 link 来更改视频。但是，每次 src 获得不同的视频 link onYouTubeIframeAPIReady 停止收听对于 onStateChange 事件，我的视频不再循环播放。问题不在于循环，但总的来说，如何在更改播放器的 src 时保留事件侦听器？

var videoz = [
        {youTube: 'https://www.youtube.com/embed/HcGG0tXv_U4?showinfo=0&controls=0&rel=0&modestbranding=1&start=20&end=23&autoplay=1&enablejsapi=1'},
        {youTube: 'https://www.youtube.com/embed/UVwJimrX3tg?showinfo=0&controls=0&modestbranding=1&rel=0&start=23&end=25&autoplay=1&enablejsapi=1'}],
    player;

function onYouTubeIframeAPIReady() { 
    document.getElementById('vidVid').src = videoz[0].youTube;
    player = new YT.Player('vidVid', {events:{onStateChange: playerVidEnd}}); 
}

function changeVid() {
    document.getElementById('vidVid').src = videoz[1].youTube;
}

function playerVidEnd(event) {
    if (event.data == 0) {
           player.seekTo(20);
           player.playVideo();
    }
}

<iframe id="vidVid" style="width: 500px; height: 400px" src=""></iframe>
    <button onclick="changeVid()" type="button" id="nxt">NEXT</button>

Answer 1

看看这个

选项 1

尝试更改视频源以重新初始化播放器。

选项 2（文档推荐）

将其放入您的更改函数中

player.loadVideoByUrl({
    videoz[1].youTube,
    23 /* start */,
    25 /* end */,
    "highres"
})

YouTube API 在视频更改后停止监听事件

YouTube API stops listening for events after video change

javascript

youtube-iframe-api

选项 1

选项 2（文档推荐）