【问题标题】：YouTube IFrame API play/stop not workingYouTube IFrame API 播放/停止不起作用
【发布时间】：2013-01-04 23:53:54
【问题描述】：

我是 Jquery 的新手。我正在尝试使用两个按钮嵌入单个视频：播放和停止。我注意到，如果我将带有由真实视频 ID（例如 CkPv2jP9KeY）替换的 videoid 变量的代码直接放在 html 内容上，播放和停止按钮就会起作用。到目前为止，我有这个：

<!DOCTYPE html>
<html lang="es">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>   
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {player = new YT.Player('player');}
if(window.opera){
    addEventListener('load', onYouTubeIframeAPIReady, false);
}
</script>
 </head>
<body>
<script>
$(document).ready(function(){
    $.getJSON("https://gdata.youtube.com/feeds/api/users/diasporaduo/uploads?v=2&alt=jsonc",function(json){
        videoid = json.data.items[0].id;
        $("#video").append('<iframe id="player" width="560" height="349" frameborder="0" src="http://www.youtube.com/embed/'+ videoid +'?rel=0&wmode=Opaque&enablejsapi=1"></iframe>');
    });
 });
</script>
<div id="video"></div>
<a href="javascript: void(0)" onclick="player.playVideo(); return false">play</a><br>
<a href="javascript: void(0)" onclick="player.stopVideo(); return false">stop</a>
</body>
</html>

【问题讨论】：

标签： jquery html youtube-api

【解决方案1】：

你可以像这样重新排列你的代码：

包括https://www.youtube.com/player_api
创建一个空的 div 元素，最好与视频大小相同
实现onYouTubeIframeAPIReady，它执行以下操作：
- 创建一个空白的 YouTube iframe 播放器
- 在onReady事件中加载视频

注意事项：

您不需要 jQuery 来从 GData 检索 JSON 数据。您可以简单地使用 src = 创建一个<script> https://gdata...&alt=jsonc&callback=functionThatCallsCueVideo
可以重新排列代码。例如。您可以先加载 JSON，然后调用 player = new YT.Player({videoId: 'u1zgFlCw8Aw'})

HTML：

<!-- this could could inside head -->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://www.youtube.com/player_api"></script>

<!-- this goes in body -->
<div id="video"></div>
<a href="javascript: void(0)" onclick="player.playVideo(); return false">play</a><br>
<a href="javascript: void(0)" onclick="player.stopVideo(); return false">stop</a>

JavaScript：

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video', {
        width: '560',
        height: '349',
        events: {
            'onReady': function () {
                $.getJSON("https://gdata.youtube.com/feeds/api/users/diasporaduo/uploads?v=2&alt=jsonc", function (json) {
                    videoid = json.data.items[0].id;
                    player.cueVideoById(videoid);
                });
            }
        }
    });
}

Demo

【讨论】：

感谢您的回答！你拯救了我的一天。
就像一个一般性问题。我非常喜欢 jquery（但很新），我想将您的代码转换为 jquery。如果我用 $(document).ready(function(){... }) 标签包围它，为什么这个脚本会停止工作？
代码可以使用或不使用 jQuery。至于不工作，var player 和 onYouTubeIframeAPIReady 应该是全局的。当您将它们包装在 $(function(){}) 中时，它会被包装在一个闭包中，而不再是一个全局变量。内部关闭你可以做一个window.onYouTubeIframeAPIReady = function(){};

【解决方案2】：

感谢 Salman A。这是他回复的 Jquery 工作版本：

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
     <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="css5/reset.css" rel="stylesheet" />
    <link href="css5/main.css" rel="stylesheet" />

     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>   
     <script type="text/javascript" src="http://www.youtube.com/player_api"></script>

</head>
<body>
<script>
var player;

$(document).ready(function(){
    window.onYouTubeIframeAPIReady = function() {
        player = new YT.Player('video', {
          events: {
            'onReady': function () {
                $.getJSON("http://gdata.youtube.com/feeds/api/users/diasporaduo/uploads?v=2&alt=jsonc", function (json) {
                    videoid = json.data.items[0].id;
                    player.cueVideoById(videoid);
                });
            }
        }
    });
}
});

</script>

<div id="video"></div>


<a href="javascript: void(0)" onclick="player.playVideo(); return false">play</a><br>
<a href="javascript: void(0)" onclick="player.stopVideo(); return false">stop</a>


</body>
</html>

【讨论】：