youtube API playVideo、pauseVideo 和 stopVideo 不起作用

Question

我正在尝试使用 YouTube API 来控制幻灯片中的一组播放器。我希望能够根据幻灯片所在的帧停止和播放视频。所以我根据框架的 id 将玩家推入一个数组。当名声发生变化时，我会在当前名声上停止并从新名声开始。但是，即使在最基本的情况下，我也会收到此错误：

Uncaught TypeError: Object #<S> has no method 'playVideo'

这里是简单测试的代码

<!-- WIDGET YOUTUBE VIDEO -->
<div class="widget_youtube_video" id="wyv_1-5">
    <iframe id="ytplayer_1-5" width="560" height="315" src="//www.youtube.com/embed/CxW8TLtUMfM?autoplay=0&enablejsapi=1&origin=http://mmgi.localhost/" frameborder="0" allowfullscreen></iframe>
    <script type="text/javascript">
        var tag = document.createElement('script');
        tag.src = "//www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        var yt_players = {};

        function onYouTubeIframeAPIReady() {
            yt_players['1-5'] = new YT.Player('ytplayer_1-5');
            yt_players['1-5'].playVideo();
        }
    </script>
</div><!-- end widget_youtube_video -->

我已经尝试从 url 中删除 origin 标记以检查是否是导致问题的原因，但它仍然给了我同样的错误。任何帮助将不胜感激，因为我不知道从这里去哪里。

提前致谢。

编辑：

我也尝试将播放器放在非数组对象中，但也没有用。

Answer 1

我看到的一些可能有用的事情。首先，删除 origin 参数将在开发过程中有所帮助，因为它通常会阻止对 API 的访问，如果 A）它不完全匹配，并且 B）有时在 localhost 上时无缘无故。

不过，正如您所注意到的，即使在您的情况下将其删除，API 也没有响应。这是因为创建 YT.player 对象会消耗一些时间，因此您会尝试在对象完全初始化之前触发 playVideo 方法。相反，您应该使用 YT.Player 对象的 onReady 回调参数，如下所示：

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var yt_players = {};

    function onYouTubeIframeAPIReady() {
        yt_players['1-5'] = new YT.Player('ytplayer_1-5', {
          events: {'onReady': onPlayerReady} // bind to callback for when object is ready
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo(); // this is kept generic so the same callback can be used with any player object
    }

这是一个工作代码： http://jsfiddle.net/jlmcdonald/dEjXL/