javascript - Youtube iframe API 无法按预期工作

Question

在我的一个模态中，我想显示一段 YouTube 视频。哪一个(哪个 ID)取决于使用哪个按钮打开模型。

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

在我的 javascript 文件中，我使用 YT 播放器 api 生成 iframe；我关注了Getting started on google developers .

所以在模态中我添加了 <div id='player'></div>这是我包含的 javascript:

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', {
    videoId: '5ulO97zuVF0', //- just a temporary id
  });
}

// on document ready do some jQuery things, 
// like adding an event handler to the button. 
$(document).ready(function (){

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

        player.loadVideoById(videoid);
        $('#yt-player').modal('show');
        player.playVideo();

    });

});

yt-play 上的点击处理程序应通过player.loadVideoById() 加载视频，如所述 here in the documentation 。

但不知怎的，我收到了一个 javascript 错误:TypeError: player.loadVideoById is not a function

如果我将玩家对象转储到控制台中，我会得到一个不错的玩家对象；其中包含 loadVideoById 函数等许多函数。至少看起来是这样的:

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

Answer 1

可能是因为“loadVideoById”尚不可用。

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

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

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

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

https://developers.google.com/youtube/iframe_api_reference#Events