Javascript Youtube iframe API未按预期工作

在我的一个情态动词中，我想显示一个youtube视频。哪一个（哪个ID）取决于用于打开模型的按钮

<button class='yt-play' data-yt='xxxxxx'>Play video</button>

yt play上的单击处理程序应通过player.loadVideoById（）加载视频，如前所述

但不知怎的，我得到了一个javascript错误：

TypeError:player.loadVideoById不是一个函数

如果我在控制台中转储player对象，我会得到一个不错的player对象；其中包含loadVideoById函数。至少看起来是这样的：

没有加载新视频的原因是什么？

可能是因为“loadVideoById”还不可用

必须使用事件对象构造YT.Player对象，并包含“onReady”事件回调

然后在“onReady”回调函数中绑定按钮单击事件

function onPlayerReady() {
    $('.yt-play').click(function(ev){
        ev.preventDefault();
        var videoid = $(this).data('yt');

        // player.loadVideoByID is now available as a function
        player.loadVideoById(videoid);

        $('#yt-player').modal('show');
        player.playVideo();
    });
}
player = new YT.Player('player', {
    videoId: '5ulO97zuVF0', //- just a temporary id,
    events:{
        “onReady”: onPlayerReady   
    }
});

有关更多信息，请参阅文档中的“事件”部分：

在html文档中添加div元素

onYouTubeIframeAPIReady函数中全局对象的初始YT

在函数中调用YT对象

守则：

<script>
    // load API
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // define player
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '360',
            width: '640'
        });
    }

    $(function () {

       // load video and add event listeners
       function loadVideo(id, start, end) {
          // check if player is defined
          if ((typeof player !== "undefined")) {
            // listener for player state change
            player.addEventListener('onStateChange', function (event) {
                if (event.data == YT.PlayerState.ENDED) {
                    // do something
                }
            });
            // listener if player is ready (including methods, like loadVideoById
            player.addEventListener('onReady', function(event){
                event.target.loadVideoById({
                    videoId: id,
                    startSeconds: start,
                    endSeconds: end
                });
                // pause player (my specific needs)
                event.target.pauseVideo();
            });
        }
        // if player is not defined, wait and try again
        else {
            setTimeout(loadVideo, 100, id, start, end);
        }
      }

      // somewhere in the code
      loadVideo('xxxxxxxx', 0, 3);
      player.playVideo();
   });
</script>

//加载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'{
高度：'360'，
宽度：“640”
});
}
$（函数（）{
//加载视频并添加事件侦听器
功能加载视频（id、开始、结束）{
//检查是否定义了播放器
如果（（玩家类型！=“未定义”））{
//播放器状态更改的侦听器
player.addEventListener（'onStateChange'，函数（事件）{
如果（event.data==YT.PlayerState.end）{
//做点什么
}
});
//如果播放机准备就绪，则侦听器（包括loadVideoById等方法）
player.addEventListener（'onReady'，函数（事件）{
event.target.loadVideoById({
视频id:id，
开始秒：开始，
结束秒：结束
});
//暂停播放（我的特殊需要）
event.target.pauseVideo（）；
});
}
//如果未定义播放机，请等待并重试
否则{
设置超时（loadVideo，100，id，开始，结束）；
}
}
//代码中的某个地方
加载视频（'xxxxxxxx'，0,3）；
player.playVideo（）；
});

其他答案没有澄清问题

YouTube api确实令人困惑！这是因为YT.Player构造函数返回对YouTube播放器的iframe的dom引用，而不是对YT Player对象的dom引用

为了获得YT球员的参考资料，我们需要收听onReady事件

var ytPlayer;
var videoIframe = new YT.Player('player', {
                        videoId: 'xxxxxxx',  // youtube video id
                        playerVars: {
                                'autoplay': 0,
                                'rel': 0,
                                'showinfo': 0
                        },
                        events: {
                           'onStateChange': onPlayerStateChange,
                           'onReady': function (ev) {
                                ytPlayer = ev.target;
                            }
                        }
});

---

我的测试告诉我player实例与ev.target相同

var ytPlayer;
var videoIframe = new YT.Player('player', {
                        videoId: 'xxxxxxx',  // youtube video id
                        playerVars: {
                                'autoplay': 0,
                                'rel': 0,
                                'showinfo': 0
                        },
                        events: {
                           'onStateChange': onPlayerStateChange,
                           'onReady': function (ev) {
                                ytPlayer = ev.target;
                            }
                        }
});