javascript Vimeo API:播放按钮和多个视频
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6167976/
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 API: Play button and multiple videos
提问by INT
I'm having some trouble. I just discovered that you can control vimeo with js, and now I'm trying to create a play button that will start playing a vimeo video.
我遇到了一些麻烦。我刚刚发现你可以用 js 控制 vimeo,现在我正在尝试创建一个播放按钮来开始播放 vimeo 视频。
The problem I'm having is that I have multiple videos on the same page. I took the example/playground file (from here http://player.vimeo.com/playground/ https://github.com/vimeo/player-api/tree/master/javascript) and removed the functionality that I don't require, however, I can't understand how I connect the play button with a certain video.
我遇到的问题是我在同一页面上有多个视频。我拿了 example/playground 文件(从这里http://player.vimeo.com/playground/ https://github.com/vimeo/player-api/tree/master/javascript)并删除了我不知道的功能但是,我不明白如何将播放按钮与某个视频连接起来。
This is what I have so far
这是我到目前为止
HTML:
HTML:
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_1" width="540" height="304" frameborder="0"></iframe>
<div class="intro">
<span class="hide">Play 1</span>
</div>
<iframe id="player_2" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_2" width="540" height="304" frameborder="0"></iframe>
<div class="intro">
<span class="hide">Play 2</span>
</div>
JS:
JS:
var vimeoPlayers = document.querySelectorAll('iframe'),
player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
}
else {
element.attachEvent(eventName, callback, false);
}
}
function ready(player_id) {
// Keep a reference to Froogaloop for this player
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id);
function setupSimpleButtons() {
var buttons = container.querySelector('div.intro'),
playBtn = buttons.querySelector('.hide');
// Call play when play button clicked
addEvent(playBtn, 'click', function() {
froogaloop.api('play');
}, false);
}
setupSimpleButtons();
}
})();
If I have code that is unnecessary please help me remove it. Many thanks.
如果我有不必要的代码,请帮我删除它。非常感谢。
采纳答案by Leopd
Your ready()
function is called once per vimeo player. You need to change which object is hooked up with the addEvent button. To do this you probably need to put id
attributes on the buttons themselves.
ready()
每个 vimeo 播放器都会调用一次您的函数。您需要更改与 addEvent 按钮连接的对象。为此,您可能需要将id
属性放在按钮本身上。
回答by Drew Baker
I figured out a way to do this much easier, you can see an example here: http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html
我想出了一种更容易做到这一点的方法,你可以在这里看到一个例子:http: //labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html