Vimeo API: Play button and multiple videos
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.
INT
Updated on June 04, 2022Comments
-
INT almost 2 years
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.
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.
This is what I have so far
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:
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.