Javascript 播放YouTube播放列表时启动新视频时触发事件

我有一个YouTube播放列表；一切都很顺利。代码如下：

<div id="player"></div>
<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var done = false;
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            width: '100%',
            height: window.innerHeight-120+'px',
            vq: 'hd720',
            videoId: 'ZnToyoZus74',
            playerVars: {
                'autoplay': 1,
                'loop': 1,
                'showinfo': 0,
                'controls': 0,
                'playlist': [
                    'Glr36uh7Uls,Mx-cOLPqieg,C9uA-LFJS3Q,mKB4j3Lqa3w,tLmLXEShHT8'
                ]
            }
        });
    }
</script>

var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var done=false；
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
宽度：“100%”，
高度：window.innerHeight-120+'px'，
vq:‘hd720’，
videoId:'zntyozus74'，
playerVars：{
“自动播放”：1，
“循环”：1，
“showinfo”：0，
“控件”：0，
“播放列表”：[
‘Glr36uh7Uls、Mx cOLPqieg、C9uA-LFJS3Q、mKB4j3Lqa3w、tLmLXEShHT8’
]
}
});
}

但是，我想在其下方显示与当前播放视频相关的自定义信息（在单独的

中，但不覆盖视频）。视频开始后，将显示包含第一个视频信息的

，视频结束后，此div将消失。一旦第二个视频开始播放，则会显示另一个包含第二个视频信息的

元素将包含一个HTML文件，使用视频的

id

作为文件名：

zntyozus74.HTML

在本例中，我使用以下ID：

• zntyozus74

• Glr36uh7Uls

• Mx cOLPqieg

• C9uA-LFJS3Q

• mKB4j3Lqa3w

• tLmLXEShHT8

解决了
这是最后的代码，以防有人在寻找相同的答案：

<div id="player" style="float:right;"></div>
<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player;
    function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
    width: '100%',
    height: window.innerHeight-110+'px',
    vq: 'hd720',
    videoId: 'K7XbJ0XLXPY',
    playerVars: { 'autoplay': 1, 'loop': 1, 'showinfo': 0, 'controls': 0, 'playlist':['UiUZOo1b6m0,w0Sm9tRJDDA']},
    events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(evt) {
        evt.target.playVideo();
    }
    function onPlayerStateChange(evt) {
        if (evt.data == YT.PlayerState.PLAYING) {
            var url = evt.target.getVideoUrl();
            var match = url.match(/[?&]v=([^&]+)/);
            var videoId = match[1];

            document.getElementById("myiframe").src='videosinfo/'+videoId+'.html';
        }
    }
</script>
<iframe  name="myiframe" id="myiframe" width="100%" height="200px" allowtransparency=true frameborder="0" ></iframe>

var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var done=false；
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
宽度：“100%”，
高度：window.innerHeight-110+'px'，
vq:‘hd720’，
videoId:'K7XbJ0XLXPY'，
PlayerBars:{'autoplay'：1，'loop'：1，'showinfo'：0，'controls'：0，'playlist'：['UiUZOo1b6m0，w0Sm9tRJDDA']}，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerReady（evt）{
evt.target.playVideo（）；
}
函数onPlayerStateChange（evt）{
if（evt.data==YT.PlayerState.PLAYING）{
var url=evt.target.getVideoUrl（）；
var match=url.match（/[？&]v=（[^&]+）/）；
var videoId=匹配[1]；
document.getElementById（“myiframe”）.src='videosinfo/'+videoId+'.html'；
}
}

您建议如何获取下一个视频的信息？您是如何尝试显示的？每个视频的信息都在一个html文件（视频id）中：zntyozus74.html、Glr36uh7Uls.html、Mx-cOLPqieg.html、C9uA-LFJS3Q.html、mKB4j3Lqa3w.html、tLmLXEShHT8.htmlt请查看已解决的问题！我必须等5个小时才能发布完整的代码。这是一个新手要付出的代价。