Youtube iframe API 的问题答案

【问题标题】：Trouble with Youtube iframe APIYoutube iframe API 的问题
【发布时间】：2016-09-17 11:36:28
【问题描述】：

我目前有一个博客，当您使用 youtube iframe 加载页面时播放背景音乐：

<iframe id="background-music" width="0" height="0" src="https://www.youtube.com/embed/VOR8reYWvx8?rel=1&autoplay=1&enablejsapi=1" xframeborder="0" allowfullscreen></iframe>

我也手动导入了 youtube iframe api：

<script src="http://url_to_script/iframe_api.js"></script>

我的博客上有其他歌曲，我想在播放其中一首其他歌曲时暂停背景歌曲。根据https://developers.google.com/youtube/iframe_api_reference#Examples 上的说明，我有以下代码，但它根本不起作用。

$(".tumblr_audio_player").contents().find('.play_button').click(function() 
                console.debug(YT);

                player = new YT.player("background-music", {
                    events: {
                      'onReady': function() { console.log("player is ready") },
                      'onStateChange': function() { console.log("player has changed state"); }
                    }
                });
                player.stopVideo();

我不确定我做错了什么。我不知道是否需要 onReady 和 onStateChange（我不需要它们），但是如果没有第二个对象参数，它就无法工作，所以我不确定我应该做什么。

【问题讨论】：

我以前从未见过xframeborder="0"，通常是frameborder="0"，注意：这不是修复，只是观察。请提供minimal reproducible example。
好吧，我发现了一个错误：它应该是“new YT.Player(...)”而不是“new YT.player(...)”。现在它说 player.stopVideo() （或 pauseVideo）不是函数.....
我不知道这是什么：$(".tumblr_audio_player").contents().find('.play_button').click(function() console.debug(YT); 没有minimal reproducible example 我无法测试修复，因此我所做的任何帮助都是猜测。祝你好运。
我正在创建一个 jsFiddle 来向您展示，zer00ne。 jsfiddle.net/w01yyesk我希望当您单击未播放的视频时自动播放的音乐停止。然而，这只是一个示例，正如您所指出的，我的博客使用 iframe 中的 tumblr 音频播放器播放其他不是自动播放歌曲的歌曲。到目前为止，代码的那部分工作正常，不是问题。希望这会有所帮助。

标签： api audio iframe youtube

【解决方案1】：

嗯，我知道发生了什么。代码大部分是正确的，但是初始化 YT.Player 对象需要时间，这正是 onReady 回调的用途。

它确保在您执行任何操作之前初始化 YT 对象。如果将 pauseVideo 放在 onReady 回调中，它将正常工作。所以要回答我原来的问题，onReady 是绝对必要的：

player = new YT.Player("background-music", 
{   events: {
        onReady: function() {
            player.stopVideo();
        }
    }
});

【讨论】：