Laden mehrerer Vimeo-Videos mit jQuery und Erkennung von Ereignissen

Question

Ok, ich stecke komplett fest. Ich hoffe wirklich, dass jemand da draußen Erfahrung mit dem Laden von Vimeo-Videos mit Vimeos Froogaloop-API hat.

Irgendwie schaffe ich es nicht, das 'ready'-Ereignis zu erfassen.

Froogaloop:

Mein Skript:

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('http://vimeo.com/27027307') + '&width=300&callback=?', function(data){
    $('#video-container').html(data.html); // fügt ein Iframe-Embed von Vimeos JSON ein
    $('#video-container iframe').ready(function(){
        player = document.querySelectorAll('iframe')[0];
        $f(player).addEvent('ready', function(id){
            console.log('Erfolg');
        });

    });
});

Das Video lädt problemlos. Das ist die Meldung, die ich in der Konsole erhalte:

Uncaught TypeError: Cannot read property 'ready' of undefined

Ich muss Event-Listener verwenden, um Pausen usw. zu erkennen. Ich habe diesen Beitrag gesehen, aber leider ist der Hauptunterschied, dass ich dynamisch über JSON lade. Außerdem hat Vimeo ein funktionierendes Beispiel von Froogaloop in Aktion, aber nicht mit jQuery.

Vielen Dank im Voraus!!!

Answer 1

Bearbeiten (Aug 2014): Ich habe kürzlich ein jQuery Vimeo Plugin geschrieben, das dieses Problem im Grunde genommen viel eleganter löst. Aber die Lösung, falls du den Code fest codierst, ist unten:

Beim Laden von Vimeo-Videos musst du den Abfrage-String &api=1 zur URL hinzufügen. Dadurch kannst du API-Ereignisanrufe tätigen. Vimeo erfordert auch eine &player_id=SOME_ID, wenn mehrere Videos geladen werden sollen, die mit der ID auf dem iframe übereinstimmen müssen (oder in meinem Fall, mit jQuery hinzufügen, wenn das JSON geladen wird, da ich es dynamisch erstelle.)

Ich habe einen halben Tag damit verbracht, das herauszufinden. Hier ist mein endgültiger Code, falls er für jemand anderen hilfreich ist, der versucht, Vimeo-Videos dynamisch zu laden.

Verwendung des Froogaloop-Frameworks von Vimeo

Mein js

var videoData = [
{
    'title':'The Farm',
    'id':'farmvideo',
    'videoURL':'http://vimeo.com/27027307'
}];

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData[0]['videoURL']) + '&api=1&player_id='+ videoData[0]['id'] +'&width=300&callback=?', function(data){
    $('#video-container').html(data.html); // fügt ein iframe-Embed von Vimeos JSON ein
    $('#video-container iframe').load(function(){
        player = document.querySelectorAll('iframe')[0];
        $('#video-container iframe').attr('id', videoData[0]['id']);
        $f(player).addEvent('ready', function(id){
            var vimeoVideo = $f(id);
            console.log('Erfolg');
        });
    });
});

Answer 2

Versuchen Sie, das load Ereignis anstelle des ready-Ereignisses für Iframes zu verwenden.

Ihre dritte Zeile wäre:

$('#video-container iframe').load(function(){

Answer 3

Ich habe dein Beispiel "geforked" und eine Version erstellt, die zeigt, wie man mit Hilfe der froogaloop API Vimeo-Videos mit mehreren Videos abspielt/pausiert. Also, wenn du ein Video startest, werden alle anderen Videos gestoppt: http://jsfiddle.net/nerdess/D5fD4/3/