web-dev-qa-db-fra.com

Écoute d'événement Youtube en JavaScript ou jQuery

J'ai un curseur qui inclut 4 vidéos youtube intégrées via le code d'intégration iframe

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

J'essaie de faire en sorte que l'événement onStateChange de l'une des quatre vidéos appelle une fonction que j'ai appelée stopCycle() qui arrêtera le curseur lorsque la vidéo commencera à être lue. Les iframes n'ont pas d'identifiant. Je ne suis pas sûr de savoir comment capturer cet événement correctement et pourrais utiliser n'importe quel conseil quant à ce que je fais mal.

<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!');
}
javascriptjqueryeventsyoutubeyoutube-api
19
Dave Kiss

L'API des cadres YouTubene prend en charge les cadres existants . Pour améliorer l'utilisation, j'ai créé des fonctions d'assistance. Regardez le code + commentaires ci-dessous et la démo: http://jsfiddle.net/YzvXa/197

Pour lier des fonctions à des cadres existants, vous devez passer une référence ID au cadre. Dans votre cas, le cadre est contenu dans un conteneur avec id="tab2". J'ai défini une fonction personnalisée pour une implémentation plus facile:

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);
})();

// Auparavant, les fonctions principales étaient définies. Regardez devant vous pour la mise en œuvre:

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);
}

Si vous souhaitez appeler des fonctions supplémentaires ultérieurement, par exemple, mettre une vidéo en sourdine, utilisez:

player.mute();
  • Si vous devez uniquement appeler simple unidirectionnel fonctions, il n’est pas nécessaire d’utiliser ce code. Au lieu de cela, utilisez la fonction callPlayer telle que définie dansthis answer.
  • Si vous souhaitez implémenter cette fonctionnalité pour plusieurs cadres , consultez simultanémentcette réponse. _ {Inclut également une explication détaillée de getFrameID et YT_ready.
41
Rob W

Depuis hier cela ne fonctionne plus. Le onStateChange n'est pas déclenché. Jeffrey a posté une solution rapide, mais je ne suis pas en mesure de mettre à jour la réponse ci-dessus.

Plus d'informations sur ce problème https://code.google.com/p/gdata-issues/issues/detail?id=4706

Ça marche :-) avec le correctif

Ajouter la fonction suivante

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

et avant "onStateChange": stopCycle add "onReady": onReady,

1
ceasar

Vous pouvez utiliser le plugin tubeplayer , il contient de nombreux événements à écouter.

1
topek

Sur mon chat, cette fonctionnalité permet aux utilisateurs de publier des vidéos à partir de YouTube. L'URL de la vidéo est associée en tant que source d'iframe existant avec id.

Ce que je remarque, c’est que, bien que? Enablejsapi = 1 soit ajouté, que le script ne fonctionne que dans la mesure du possible, les iframes existants sur pageload.

Comment peut-on s'y prendre si l'on veut que ce script soit lié après la définition d'une nouvelle source pour l'iframe?

0
ingridsede