YouTube 播放器 iframe API：playVideo 在 Firefox 9.0.1 上不起作用

Question

我有一些 YouTube 嵌入代码（我将只粘贴给我带来麻烦的代码并删除不公开的内容）：

console.log(ytplayer);
ytplayer.playVideo();

Chrome 和 FF 上的 Console.log 向我展示了具有正确方法的好对象，并且其中存在方法 playVideo()。它适用于我检查过的所有其他浏览器，但它不适用于 FF！？更有趣的是，当我使用普通的 YouTube 播放按钮播放视频时，我可以使用 pauseVideo() 方法（以及所有其他方法：搜索、控制音量），但我不能使用 playVideo() 方法...

我使用嵌入视频的新方式：

ytplayer = new YT.Player(player, {
        height: height,
        width: width,
        videoId: videoid,
        allowfullscreen: 'true',
        playerVars: {
            controls: 0,
            showinfo: 0,
            wmode: 'opaque',
            autoplay: (autoplay ? 1 : 0)
        },
        events: {
            'onReady': function () {
                console.log('I am ready');
            }
        }
    });

当然，“我准备好了”在控制台输出中。我不知道我做错了什么以及为什么只有 FF 不起作用...没有 JS 错误，也没有任何线索...希望有人以前遇到过这个问题并得到解决！:)

Answer 1

我个人在预设的 IFrame 上发现，如果您不使用 https://www.youtube.com 作为域，API 将无法正常工作。所以要小心不要错过“www”。否则 API 将创建播放器对象但无法执行方法。

Answer 2

我偶然发现了这篇文章，正在寻找类似的东西。我在这里找到了答案，作者：relic180：

YouTube API - Firefox/IE return error "X is not a function" for any 'player.' request

基本上，即使 div 被隐藏（即display:none），Chrome 也可以初始化 youtube 嵌入，但 FF 和 IE 不能。我的解决方案是 relic180 的变体：

我将我的播放器移动到 left:200% 或任何我希望它不可见但正在初始化（并可用于对 player 的其他调用）的位置，然后在需要时将其移回屏幕上。

Answer 3

一种更可靠的方法是检查播放器是否准备就绪。如果播放器未准备好，则将 player.playVideo() 排队并在准备好时使用 onReady 事件执行它。 Gist

var playerConfig = {},                 // Define the player config here
    queue = {                          // To queue a function and invoke when player is ready
      content: null,
      push: function(fn) {
        this.content = fn;
      },
      pop: function() {
        this.content.call();
        this.content = null;
      }
    },
    player;

window.onYouTubeIframeAPIReady = function() {
  player = new YT.Player('player', {
    videoId: 'player',
    playerVars: playerConfig,
    events: {
      onReady: onPlayerReady
    }
  });
};

// API event: when the player is ready, call the function in the queue
function onPlayerReady() {
  if (queue.content) queue.pop();
}

// Helper function to check if the player is ready
function isPlayerReady(player) {
  return player && typeof player.playVideo === 'function';
}

// Instead of calling player.playVideo() directly, 
// using this function to play the video. 
// If the player is not ready, queue player.playVideo() and invoke it when the player is ready
function playVideo(player) {
  isPlayerReady(player) ? player.playVideo() : queue.push(function() {
                                               player.playVideo();
                                             });
} 

Answer 4

我遇到了一个非常相似的问题，并且正在努力寻找答案。我对 playVideo() 的调用似乎不起作用。

原文：

$('#play_movie').click(function(){
    $('#video').show();
    if(player)
    {
        if(typeof player.playVideo == 'function')
        {
            player.playVideo();
        }
    }

问题是播放器还不可用 - 如果我给它一点时间出现，那么调用就可以了

$('#play_movie').click(function(){
    $('#video').show();
    if(player)
    {
        var fn = function(){ player.playVideo(); }
        setTimeout(fn, 1000);
    }

不知道这是否是您的确切问题，但我希望它可以帮助某人