javascript - Youtube - YT 对象没有方法 PauseVideo()

Question

我已将 iFrame Youtube 视频嵌入到我的页面中，我希望视频在用户单击“下一步”按钮以循环浏览视频轮播时暂停。在循环到下一个视频之前，我为事件视频创建了一个 YT 对象并尝试运行 pauseVideo()功能。控制台报错:Uncaught TypeError: Object #<S> has no method 'pauseVideo' .

令人费解的是我有console.log在调用 pauseVideo() 之前播放器功能，我确实看到了 pauseVideo()对象中可用的方法。有谁知道为什么我能够在 YT 对象中看到该方法，但控制台一直报告该方法不存在？

JS-Fiddle:http://jsfiddle.net/7WPe9/

// Load the IFrame Player API code asynchronously on DOM load
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Triggered when user clicks 'next slide'
pauseActiveYoutubeVideos : function() {                 
    var player = new YT.Player( $('#media .item.active iframe.ytplayer')[0] );
    console.log( player );   //pauseVideo() is defined in this player object
    player.pauseVideo();     //console reports 'Uncaught TypeError: Object #<S> has no method 'pauseVideo''
}

Answer 1

这里有很多小事情加起来会导致您的问题。首先，您必须发送一个 ID 作为参数而不是一个 jquery 对象(正如其中一条评论所指出的)。更重要的是，当您将 iFrame 绑定(bind)到播放器对象然后将其删除时，YT iframe API 会出现问题……您无法再重新绑定(bind)到同一个 iFrame。所以你的嵌套循环需要被替换。一种通常有效的策略是设置一个单独的跟踪对象，您在开始时为每个视频创建一个 YT.Player 对象，然后只跟踪哪个应该是事件的(这样您就知道要暂停哪个).尝试这样的事情(它应该只是在 <script> 标记中，而不是在 jQuery“就绪”函数中，以避免 iFrame API 的异步加载出现问题):

// Load the IFrame Player API code asynchronously on DOM load
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Sets up player tracker, and init the carousel
  var players={}, activePlayerId;
  function onYouTubeIframeAPIReady() {
        $('iframe.ytplayer').each(function() {
                players[$(this).attr('id')]=new YT.Player($(this).attr('id'));
        });
        activePlayerId=$('iframe.ytplayer').first().attr('id');
        $("#"+activePlayerId).addClass('active');

 // Click on carousel next button
        $('#next').on('click', function() {
                players[activePlayerId].pauseVideo();
                $("#"+activePlayerId).removeClass('active');
                if ($("#"+activePlayerId).next().is('iframe')) {
                        activePlayerId=$("#"+activePlayerId).next().attr('id');
                }
                else {
                        activePlayerId=$('iframe.ytplayer').first().attr('id');
                }
                $("#"+activePlayerId).addClass('active');
        });
   }