youtube API playVideo,pauseVideo和stopVideo无法正常工作

时间:2013-11-27 18:09:29

标签: javascript jquery youtube-api

我正在尝试使用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 -->

我已经尝试从网址中删除原始代码以检查是否导致问题,但它仍然给了我同样的错误。任何帮助将不胜感激,因为我不知道从哪里开始。

提前致谢。

编辑:

我还试图将播放器放在一个非排列的对象中,它也无法正常工作。

1 个答案:

答案 0 :(得分:4)

我看到的一些可能有用的东西。首先,删除origin参数将有助于在开发过程中,因为如果A)它没有完全匹配,它会阻止对API的访问,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/