Javascript Vimeo Froogaloop API 无法识别事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6537415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vimeo Froogaloop API not recognizing an event
提问by criticerz
I'm trying to recognize the onPlay, onPause, and onFinish event for vimeo using the froogaloop API. I've tried everything I could imagine with this thing, and no luck.
我正在尝试使用 froogaloop API 识别 vimeo 的 onPlay、onPause 和 onFinish 事件。我已经尝试了我能想象到的一切，但没有运气。
I get this error on Firefox:
我在 Firefox 上收到此错误：
And in Chrome:
在 Chrome 中：
Importing froogaloop from the CDN:
从 CDN 导入 froogaloop：
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
My JS:
我的JS：
$(function(){
var vimeoPlayer = document.querySelector('iframe');
$f(vimeoPlayer).addEvent('ready', ready);
function ready(player_id) {
froogaloop = $f(player_id);
function setupEventListeners() {
function onPlay() {
froogaloop.addEvent('play',
function(data) {
console.log('play event');
});
}
function onPause() {
froogaloop.addEvent('pause',
function(data) {
console.log('pause event');
});
}
function onFinish() {
froogaloop.addEvent('finish',
function(data) {
console.log('finish');
});
}
onPlay();
onPause();
onFinish();
}
setupEventListeners();
}
})
My HTML:
我的 HTML：
<iframe src="http://player.vimeo.com/video/3718294?api=1" width="623" height="350" frameborder="0" id="iframe-video"></iframe>
回答by criticerz
After hours and hours of frustration... I have found the solution.
经过数小时的沮丧……我找到了解决方案。
Since I was using an ID on the iframe... apparently the vimeo API forces you to add the parameter to the URL you are fetching (player_id=iframe-id).
由于我在 iframe 上使用了 ID...显然 vimeo API 强制您将参数添加到您正在获取的 URL (player_id=iframe-id)。
So the iFrame should look like this:
所以 iFrame 应该是这样的：
<iframe src="//player.vimeo.com/video/3718294?api=1&player_id=promo-vid"
width="623" height="350" frameborder="0"
id="promo-vid">
</iframe>
Special thanks to Drew Baker for pointing this out: http://vimeo.com/forums/topic:38114#comment_5043696
特别感谢 Drew Baker 指出这一点：http: //vimeo.com/forums/topic: 38114#comment_5043696
回答by Maximilian K?hler
Got an error creating the player element when selecting the iframe with jQuery.
使用jQuery选择 iframe 时创建播放器元素时出错。
var iframe = $('#player1');
var player = $f(iframe);
Results in
结果是
TypeError: d[f] is undefined
Solution for me was to select the first element in the jQuery ID selector
我的解决方案是选择 jQuery ID 选择器中的第一个元素
var iframe = $('#player1')[0];
var player = $f(iframe);
回答by Doug Stephen
I think you're violating the Same Origin Policy. You'll notice herethat where you're doing a lot of event handling, they are using special froogaloop API calls.
我认为您违反了同源政策。你会发现这里是哪里你做了很多的事件处理，他们使用的是特殊的froogaloop API调用。
I've never used froogaloop so I'm probably wrong. But that's my guess. The errors seem to suggest that the iframe is attempting to modify the URL in your browser, and that's now allowed by Same Origin. That's why the API wraps up window.postMessage for you.
我从未使用过 froogaloop，所以我可能错了。但这是我的猜测。这些错误似乎表明 iframe 正在尝试修改您浏览器中的 URL，现在 Same Origin 允许这样做。这就是 API 为您包装 window.postMessage 的原因。
回答by eithed
Having had a similar issue, with Froggaloop2 - it appears that if the video is cached, the ready event will fire only once (on the initial load). The solution is to retrieve the iframe with changing src, as:
在 Froggaloop2 中遇到了类似的问题 - 如果视频被缓存，ready 事件只会触发一次（在初始加载时）。解决方案是通过更改 src 来检索 iframe，如下所示：
$(iframe).attr('src', $(iframe).attr('src') + '#timestamp='+(new Date()).getTime());
回答by wdtj
I had a similar issue, but in this case after replacing Froggaloop with the Vimeo.Player, it still it was a new restriction in chrome. I was getting the error "play() failed because the user didn't interact with the document first...". After further research it looks like Chrome added some restrictions see here. The solution in my case was to add allow="autoplay"to the iframe.
我有一个类似的问题，但在这种情况下，在用 Vimeo.Player 替换 Froggaloop 之后，它仍然是 chrome 中的一个新限制。我收到错误“播放（）失败，因为用户没有先与文档交互......”。经过进一步研究，Chrome 似乎添加了一些限制，请参见此处。我的解决方案是添加allow="autoplay"到 iframe。
