Javascript 加载YouTube视频并收听onPlayerStateChange

点击一个链接，我试图播放一段YouTube视频，播放完后用一张图片替换

上半场很轻松。但是下半场我遇到了麻烦。 最初我只是添加了一个

iframe

embed。然而，为了收听

结束的
事件，我尝试遵循YouTube开发文档。现在，我似乎什么都做不了。
请复习。
这就是我到目前为止所做的

 var t1 = '<div id="tubewrapper"><div id="player"></div></div>'


$("#link").click( function()
           {
             
             $(".trailers-band").append(t1);


    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 player;
               function onYouTubeIframeAPIReady(){
                   player = new YT.Player('player',{
                       height:'100%',
                       width:'100%',
                       videoId:tubeID,
                       events:{
                           'onReady': onPlayerReady,
                           'onStateChange': onPlayerStateChange
                       }
                   });
               }
            function onPlayerReady(event){
                alert("ready");
                event.target.playVideo();
            }

             var done = false;

             function onPlayerStateChange(event){
                 if (event.data == YT.PlayerState.ENDED && !done){
                     done = true;
                     alert("done");

                 }

             }

           }
        );

var t1=''
$（“#链接”）。单击（函数（）
{
$（“.band”）。追加（t1）；
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：'100%'，
宽度：'100%'，
videoId:tubeID，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerReady（事件）{
警惕（“准备就绪”）；
event.target.playVideo（）；
}
var done=false；
函数onPlayerStateChange（事件）{
如果（event.data==YT.PlayerState.end&&！done）{
完成=正确；
警惕（“完成”）；
}
}
}
);
以下是一个示例，演示如何播放视频，检测视频何时结束，然后在其位置显示图像

例如：


//异步加载API。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'9vHFsXOdTt0'，
事件：{'onStateChange'：onPlayerStateChange}
})；//创建（和YouTube播放器）
}
函数onPlayerStateChange（事件）{
如果（event.data==0）{
hideVideo（）；
}
}
函数hideVideo（）{
var img_url=https://www.google.com/images/srpr/logo4w.png';
$（“#玩家”）。替换为（“”）；
}
$（“#链接”）。单击（函数（）{
$（'#player'）.show（）；//show player
player.playVideo（）；//开始播放
});
这很好。我也记下了这个。然而，让这两个部分一起工作是一个问题。我似乎无法在
单击
时初始化播放器。我想要
$（“#link”）。单击（function（）{xyz}）
加载播放器。。。就这样
<div id="player" style="display:none;"></div>
<a href="#" id="link">play</a>
<script>
// Load API asynchronously.
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 player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: '9vHFsXOdTt0',
        events: {'onStateChange': onPlayerStateChange}
    }); // create the <iframe> (and YouTube player)
}

function onPlayerStateChange(event) {    
    if(event.data === 0) {          
        hideVideo();
    }
}

function hideVideo() {
    var img_url = 'https://www.google.com/images/srpr/logo4w.png';
    $('#player').replaceWith('<img src="'+img_url+'">');
}

$("#link").click(function(){
    $('#player').show(); // show player
    player.playVideo(); // begin playback
});
</script>