Vimeo JavaScript API는 페이지의 모든 iframe에 이벤트 리스너를 추가합니다.

Question

Vimeo의 JavaScript API 인 Froogaloop으로 장난하고 있으며 현재 재생중인 Vimeo iFrame에 클래스를 추가하려고합니다. API의 이벤트를 사용하여 충분히 간단 해 보이지만 내 머리를 감쌀 수는 없습니다. 다음은 지금까지 내가 가지고있는 것입니다 :

아래 코드는 their example의 단순화 된 버전입니다. 내 콘솔에서 오류를 일으키지는 않지만 로그를 얻지 못하므로 클래스를 가져 오지 못합니다. 내가 놓친 게 있니?

도움 주셔서 감사합니다.

var iframe = $('article.video iframe')[0], 
    player = $f(iframe); 

player.addEvent('ready', function() { 
    player.addEvent('play', on); 
    player.addEvent('pause', off); 
    player.addEvent('finish', off); 
}); 

function on(id) { 
    console.log('playing'); 
    player.addClass('playing'); 
} 
function off(id) { 
    console.log('not playing'); 
    player.removeClass('playing'); 
} 

UPDATE는

---

문제는 확실히 변수와 관련이있다. Player은 Froogaloop에게 iframe이 작동하도록 지시합니다. iframe은 어떤 html 객체인지 식별합니다. 따라서 문제는 페이지의 모든 iframe을 식별 한 다음 Froogaloop에 iframe이 활성화 될 때 해당 iframe을 제공하는 방법입니다.

Answer 1

예, 내가 보았 듯이 on() 및 off() 함수에서 Froogaloop은 iframe의 ID를 매개 변수로 제공합니다. 그래서,이 경우에 추가하고이 같은 클래스를 제거해야합니다 :

$('#'+id).addClass('playing'); 

$('#'+id).removeClass('playing'); 

을 그리고 당신의 HTML에 당신은 모든 iframe 태그에 ID = "videoX"를 제공한다 플러스의 말에 & player_id = videoX을 추가 iframe의 src 속성에 대한 URL 주소입니다.