youtube API playVideo，pauseVideo和stopVideo无法正常工作 [英] youtube API playVideo, pauseVideo and stopVideo not working

问题描述

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

I'm attempting to use the YouTube API to control a set of players in a slideshow. I want to be able to stop and play videos depending on which frame the slideshow is on. So I'm pushing the players into an array based on the id of the frame. When a fame changes I call stop on the current one and start on the new one. However even in the most basic case I'm getting this error:

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 -->

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

I've already tried removing the origin tag from the url to check if that was causing the issues, but it still gave me the same error. Any help would be greatly appreciated as I have no idea where to go from here.

提前致谢。

编辑：

我还尝试将播放器放在一个非排列的对象中，它也无效。

I also tried to put the player in a non-arrayed object and it also did not work.

推荐答案

我看到的一些可能有用的东西。首先，删除origin参数将有助于在开发过程中，因为如果A）它不完全匹配，它会阻止对API的访问，B）有时在localhost上没有任何理由。

A couple of things I see going on that may be of use. First of all, removing the origin parameter will help during development, as it prevents access to the API in general if A) it doesn't match exactly, and B) sometimes for no reason when on localhost.

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

As you note, though, even when removing it in your case the API isn't responding. This is because creating a YT.player object consumes a bit of time, and so you then are trying to trigger a playVideo method before the object is fully initialized. Instead you should utilize the onReady callback parameter of the YT.Player object, like this:

    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/

Here's a fiddle with the working code: http://jsfiddle.net/jlmcdonald/dEjXL/

这篇关于youtube API playVideo，pauseVideo和stopVideo无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！