不能与API调用pauseVideo

Question

访问YouTube的嵌入式的iframe通过自定义按钮，我想暂停以下嵌入的YouTube视频：

<iframe id="video1" width="970" height="546" src="https://youtube.com/embed/9IYRC7g2ICg?enablejsapi=1&autoplay=1&controls=0&loop=1&playlist=9IYRC7g2ICg&showinfo=0&modestbranding=0" frameborder="0" allowfullscreen></iframe> 

现在获得点击自定义暂停按钮时，应暂停视频：

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
    var ytplayer = new YT.Player('video1'); 
    $.getScript("http://www.youtube.com/player_api"); 

    $('#button').click(function() { 
     ytplayer.pauseVideo(); 
    }); 
    }); 
</script> 

我的感觉是，这条线不知何故失败：

var ytplayer = new YT.Player('video1'); 

任何帮助，将不胜感激！ :)

Answer 1

有关您的脚本命令顺序的几个问题。首先，当您创建YT.player对象时，必须在Google的YouTube API库已经加载之后进行。为了确保这一点，当你加载库时，它会调用一个名为'onYouTubeIframeAPIReady的函数，你需要定义一个函数。诀窍是，函数必须在jQuery的document.ready（）函数之外定义（以便在脚本加载并尝试调用时）。就像这样：

var ytplayer; 

jQuery(document).ready(function($) { 
     $.getScript("http://www.youtube.com/player_api"); 
     $('#button').click(function() { 
     ytplayer.pauseVideo(); 
     }); 
}); 

function onYouTubeIframeAPIReady() { 
    ytplayer = new YT.Player('video1', {}); 
} 

此外，在您的iFrame，改变SRC脚本包含www子域（即https://www.youtube.com/embed/..），以避免让你的API调用拒绝如果域不完全匹配的潜力。

这里是一个jsfiddle来演示。