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绑定到播放器对象然后将其删除时，YT iframe API会出现问题...您无法再次重新绑定到同一个iFrame。所以你的嵌套循环需要被替换。一种通常有效的策略是设置一个单独的跟踪对象，您可以在开始时为每个视频创建一个YT.Player对象，然后只跟踪哪一个应该是活动的（因此您知道要暂停哪一个））。尝试这样的事情（它应该只是在<script>标签中，而不是在jQuery'ready'函数中，以避免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');
        });
   }

Answer 2

创建播放器对象时，请确保在调用'pauseVideo'方法之前发生'onReady'事件。

例如，您可以这样停止视频：

        var player = new window.YT.Player(yourIframeElement, {
            events: {
                'onReady': function(event) {
                    event.target.pauseVideo();
                }
            }
        });

注意：如果您尝试再次使用相同的视频元素创建对象，则“onReady”事件将不再发生。

Youtube - YT对象没有方法PauseVideo（）

2 个答案: