wake-up-neo.com

Youtube-Event in JavaScript oder jQuery anhören

Ich habe einen Slider, der 4 Youtube-Videos enthält, die über den iframe-Einbettungscode eingebettet werden

http://www.youtube.com/embed/'.$i.'?enablejsapi=1

Ich versuche, das onStateChange-Ereignis von einem der vier Videos eine Funktion zu nennen, die ich stopCycle() genannt habe, die den Schieberegler anhält, wenn das Video zu spielen beginnt. Die iframes haben keine id. Ich bin mir nicht sicher, wie ich dieses Ereignis richtig einfangen kann, und könnte mir Ratschläge geben, was ich falsch mache.

<script charset="utf-8" type="text/javascript" src="http://www.youtube.com/player_api"></script>

var playerObj = document.getElementById("tab2"); // the container for 1 of the 4 iframes

playerObj.addEventListener("onStateChange", "stopCycle");

function stopCycle(event) {
    alert('Stopped!');
}
19
Dave Kiss

Die YouTube Frame API unterstützt vorhandene Frames . Um die Nutzung zu verbessern, habe ich einige Hilfsfunktionen erstellt. Schauen Sie sich den Code + die Kommentare unten und die Demo an: http://jsfiddle.net/YzvXa/197

Um Funktionen an vorhandene Frames zu binden, müssen Sie eine ID-Referenz an den Frame übergeben. In Ihrem Fall ist der Frame in einem Container mit id="tab2" enthalten. Ich habe eine benutzerdefinierte Funktion für eine einfachere Implementierung definiert:

function getFrameID(id){
    var elem = document.getElementById(id);
    if (elem) {
        if(/^iframe$/i.test(elem.tagName)) return id; //Frame, OK
        // else: Look for frame
        var elems = elem.getElementsByTagName("iframe");
        if (!elems.length) return null; //No iframe found, FAILURE
        for (var i=0; i<elems.length; i++) {
           if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break;
        }
        elem = elems[i]; //The only, or the best iFrame
        if (elem.id) return elem.id; //Existing ID, return it
        // else: Create a new ID
        do { //Keep postfixing `-frame` until the ID is unique
            id += "-frame";
        } while (document.getElementById(id));
        elem.id = id;
        return id;
    }
    // If no element, return null.
    return null;
}

// Define YT_ready function.
var YT_ready = (function() {
    var onReady_funcs = [], api_isReady = false;
    /* @param func function     Function to execute on ready
     * @param func Boolean      If true, all qeued functions are executed
     * @param b_before Boolean  If true, the func will added to the first
                                 position in the queue*/
    return function(func, b_before) {
        if (func === true) {
            api_isReady = true;
            while (onReady_funcs.length) {
                // Removes the first func from the array, and execute func
                onReady_funcs.shift()();
            }
        } else if (typeof func == "function") {
            if (api_isReady) func();
            else onReady_funcs[b_before?"unshift":"Push"](func); 
        }
    }
})();
// This function will be called when the API is fully loaded
function onYouTubePlayerAPIReady() {YT_ready(true)}

// Load YouTube Frame API
(function() { // Closure, to not leak to the scope
  var s = document.createElement("script");
  s.src = (location.protocol == 'https:' ? 'https' : 'http') + "://www.youtube.com/player_api";
  var before = document.getElementsByTagName("script")[0];
  before.parentNode.insertBefore(s, before);
})();

// Bisher wurden Kernfunktionen definiert. Schauen Sie voraus für die Umsetzung:

var player; //Define a player object, to enable later function calls, without
            // having to create a new class instance again.

// Add function to execute when the API is ready
YT_ready(function(){
    var frameID = getFrameID("tabs2");
    if (frameID) { //If the frame exists
        player = new YT.Player(frameID, {
            events: {
                "onStateChange": stopCycle
            }
        });
    }
});

// Example: function stopCycle, bound to onStateChange
function stopCycle(event) {
    alert("onStateChange has fired!\nNew state:" + event.data);
}

Wenn Sie zu einem späteren Zeitpunkt zusätzliche Funktionen aufrufen möchten, z. Stummschalten eines Videos mit:

player.mute();
  • Wenn Sie nur simple single direction Funktionen aufrufen müssen, ist es nicht erforderlich, diesen Code zu verwenden. Verwenden Sie stattdessen die Funktion callPlayer wie unter diese Antwort definiert.
  • Wenn Sie diese Funktion für mehrere Frames gleichzeitig implementieren möchten, lesen Sie diese Antwort . Enthält auch eine detaillierte Erläuterung von getFrameID und YT_ready.
41
Rob W

Seit gestern funktioniert das nicht mehr. Der onStateChange wird nicht ausgelöst. Jeffrey hat eine schnelle Lösung bereitgestellt, aber ich kann die obige Antwort nicht aktualisieren

Weitere Informationen zu diesem Problem https://code.google.com/p/gdata-issues/issues/detail?id=4706

Habe es funktioniert :-) mit dem Update

Fügen Sie die folgende Funktion hinzu

function onReady() {
    player.addEventListener('onStateChange', function(e) {
        console.log('State is:', e.data);
    });
}

und vor "onStateChange": stopCycle add "onReady": onReady,

1
ceasar

Sie können das tubeplayer plugin verwenden, zu dem es viele Events gibt.

1
topek

Ich habe diese Funktion in meinem Chat, mit der Benutzer Videos von Youtube posten können. Die URL der VID wird als Quelle für den vorhandenen Iframe mit der ID angehängt.

Was mir auffällt ist, dass -sowohl? Enablejsapi = 1 hinzugefügt wird -, dass das Skript nur weithin vorhandene iframes auf Seite funktioniert.

Wie geht man vor, wenn dieses Skript gebunden werden soll, nachdem eine neue Quelle für den iframe festgelegt wurde?

0
ingridsede