Vimeo froogaloop 无法在 firefox 6 中播放
好吧，我真的真的真的很讨厌 vimeo 的 Froogaloop API。我花了 3 个小时或更长时间才到达现在的位置。他们的网站上没有一个例子对我有用，而且网络上几乎没有任何例子有帮助！
我有一个使用 vimeo 和 froogaloop 的视频，只需单击按钮即可开始播放视频。我的代码来自此网站，只是我对其进行了修改播放事件在 #api_click 的 onclick 上触发。
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');
}
});
Alrighty, I really, really, really hate vimeo's Froogaloop API. It's taken me 3 hours or more to get to where I am now. None of their examples worked for me on their website, and barely any around the net helped!
I have a video using vimeo and froogaloop to start playing a video on click of a button. My code is from this website, except that I modified it so the play event is fired onclick of #api_click.
The iframe has ?api=1&player_id=basketball_video. The video does start playing in Chrome, Safari, IE9 and even IE8! But not firefox?!
My code to play it is:
// 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');
}
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我也遇到了同样的问题，这很奇怪而且令人愤怒。我想出了一个丑陋的技巧，我不想使用它，但它似乎有点起作用。这还没有经过充分测试，我猜一定有更好的方法，但你看吧：
当使用“display”隐藏 Vimeo iframe 时，Firefox 似乎在访问 Froogaloop API 时遇到了问题：没有任何”。我不知道这是否是问题的实际原因，但我通过删除“display:none”并将 iframe 的宽度和高度设置为 0，然后使用 jQuery 动态设置来开始播放视频在调用 api('play') 之前更正值。
我还发现，如果您希望在用户关闭视频时将视频暂停在当前位置（因此，如果他们再次打开它，它将自动从同一位置恢复），那么您需要通过设置 iframe 的尺寸来隐藏视频为 0 而不是使用 jQuery 的 hide() 函数。
丑陋吧？
编辑：另一种解决方案是将 iframe 的初始位置设置为屏幕外用户看不到的位置，然后在显示视频时将其移动到正确的位置。然后将其移回屏幕外以将其隐藏。
I've been having the same problem and it's pretty weird and infuriating. I came up with an ugly hack which I'd prefer not to use but which seems to be kinda sorta working. This isn't well-tested, and I'm guessing there has to be a much better way of doing it, but here you go:
It SEEMS like Firefox is having trouble accessing the Froogaloop API when a Vimeo iframe is hidden using "display:none". I don't know if this is the actual cause of the problem or not, but I got my video to start playing by removing "display:none" and setting the iframe's width and height to 0, and then using jQuery to dynamically set the correct values just before calling api('play').
I also found that if you want the video to be paused at the current position when the user closes it (so it will automatically resume from the same place if they open it again) then you need to hide the video by setting the iframe's dimensions back to 0 rather than using jQuery's hide() function.
Ugly, huh?
Edit: An alternative solution is to set the initial position of the iframe way offscreen where the user can't see it and then move it to the correct position when you display the video. Then move it back offscreen to hide it.
我遇到了与 leakybag 相同的问题，当 iframe 设置为“display: none;”时，事件似乎没有被触发。当事件被绑定时。
我的解决方案是，只有在 iframe 可见时才绑定 vimeo api 事件（设置为“display: none;”之外的其他内容）。
更准确地说，我有一个滑块，每张幻灯片上都有一个 vimeo 视频。因此，我传递了一个回调函数，其中 vimeo 事件绑定到滑块，每次幻灯片更改时都会执行该回调函数。然后，回调函数中的绑定仅针对活动幻灯片中的视频。
希望这有帮助，我认为这个问题应该在 vimeo js api 文档中提到。
编辑：仅供参考，我使用的是 Firefox 29.0！
I had the same problem as leakybag and it really seems like the events aren't fired when the iframe was set to "display: none;" when the events were bound.
My solution to this was, that I only bound the vimeo api events once the iframe was visible (set to something else than "display: none;").
To be more precise, I had a slider with a vimeo video on each slide. So I passed a callback function with the vimeo event binding to the slider which gets executed every time the slide changes. The binding in the callback function then only targets the video in the active slide.
Hope this helps, I think this issue should be mentioned in the vimeo js api docs.
Edit: FYI I was using firefox 29.0!
当元素交换发生时，我通过将“autoplay=1”附加到 iframe 源来解决这个问题。像这样的东西：
I got around this by appending 'autoplay=1' to the iframe source when the element swap happens. Something like this: