Vimeo froogaloop 无法在 Firefox 6 中播放答案

【问题标题】：Vimeo froogaloop not playing in firefox 6Vimeo froogaloop 无法在 Firefox 6 中播放
【发布时间】：2011-11-10 12:34:05
【问题描述】：

好吧，我真的，真的，真的很讨厌 vimeo 的 Froogaloop API。我花了 3 个小时或更长时间才到达现在的位置。他们的例子在他们的网站上没有一个对我有用，而且在网上几乎没有任何帮助！

我有一个使用 vimeo 和 froogaloop 的视频，通过单击按钮开始播放视频。我的代码来自this website，只是我对其进行了修改，以便在#api_click 的点击时触发播放事件。

iframe 有 ?api=1&player_id=basketball_video。视频确实开始在 Chrome、Safari、IE9 甚至 IE8 中播放！但不是火狐？！

我的播放代码是：

// minified froogaloop, followed by:
    $(document).ready(function() {

        // Enable the API on each Vimeo video
      var players = [document.getElementById('basketball_video')];
        Froogaloop(players[0]).addEvent('ready', ready);

        $('#api_play').bind('click', function() {
          // Fire an API method
          // http://vimeo.com/api/docs/player-js#reference
          $('#sheet').click();
          Froogaloop(players[0]).api('play');
        });

        function ready(playerID) {
            // Add event listerns
            // http://vimeo.com/api/docs/player-js#events
            Froogaloop(playerID).addEvent('play');
        }
    });

【问题讨论】：

标签： javascript vimeo froogaloop

【解决方案1】：

我遇到了与 leakybag 相同的问题，而且当 iframe 设置为“display: none;”时似乎没有触发事件事件绑定的时间。

我对此的解决方案是，我只在 iframe 可见时绑定 vimeo api 事件（设置为“display: none;”以外的其他内容）。

更准确地说，我在每张幻灯片上都有一个带有 vimeo 视频的滑块。因此，我将带有 vimeo 事件绑定的回调函数传递给滑块，每次滑块更改时都会执行该滑块。然后，回调函数中的绑定仅针对活动幻灯片中的视频。

希望这会有所帮助，我认为这个问题应该在 vimeo js api 文档中提及。

编辑：仅供参考，我使用的是 firefox 29.0！

【讨论】：

【解决方案2】：

当元素交换发生时，我通过将“autoplay=1”附加到 iframe 源来解决这个问题。像这样的：

iframe = $(this).find('iframe')
src = iframe.attr('src') 
src += '&autoplay=1'
iframe.attr('src', src)

【讨论】：

【解决方案3】：

我也遇到了同样的问题，而且非常奇怪和令人愤怒。我想出了一个我不想使用但似乎有点工作的丑陋黑客。这没有经过很好的测试，我猜必须有更好的方法来做这件事，但是你去吧：

当使用“display:none”隐藏 Vimeo iframe 时，似乎 Firefox 无法访问 Froogaloop API。我不知道这是否是问题的实际原因，但我通过删除“display：none”并将 iframe 的宽度和高度设置为 0 来开始播放我的视频，然后使用 jQuery 动态设置调用 api('play') 之前的正确值。

我还发现，如果您希望在用户关闭视频时将视频暂停在当前位置（因此如果再次打开它会自动从同一位置恢复），那么您需要通过设置隐藏视频iframe 的尺寸回到 0 而不是使用 jQuery 的 hide() 函数。

丑吗？

编辑：另一种解决方案是将 iframe 的初始位置设置为屏幕外用户看不到的位置，然后在显示视频时将其移动到正确的位置。然后将其移回屏幕外以隐藏它。

【讨论】：