wake-up-neo.com

YouTube-API - iframe onStateChange-Ereignisse

Ich verwende die iframe YouTube-API und möchte Ereignisse nachverfolgen, z. B. Daten an Google Analytics senden, wenn der Nutzer ein Video startet und stoppt.

<iframe src="https://www.youtube.com/embed/DjB1OvEYMhY"></iframe>

Ich habe nach https://developers.google.com/youtube/iframe_api_reference?csw=1 gesucht und kein Beispiel dafür gefunden. In diesem Beispiel wird ein Iframe erstellt und auch onReady und onStateChange definiert. Wie würde ich dasselbe tun, wenn ich nur iframe auf Seite habe?

9

In diesem Beispiel wird jede Wiedergabe-/Pausenaktion abgehört, die der Benutzer mithilfe von onPlayerStateChange mit seinen verschiedenen Status ausführt, und (Datensätze) ausgedruckt.

Sie müssen jedoch eine eigene record -Funktion erstellen, um mit diesen Daten zu arbeiten, was immer Sie wollen.

Sie benötigen außerdem eine ID in Ihrem iframe (#player in diesem Fall) und müssen ? Enablejsapi = 1 am Ende der URL hinzufügen. Und natürlich muss die Youtube iframe API enthalten sein.

Hinweis

Es ist wichtig, die API nach Ihrem Code zu deklarieren, da sie onYouTubeIframeAPIReady aufruft, wenn sie fertig ist.

<!DOCTYPE html>
<html>
<body>
    <iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe>
    <h5>Record of user actions:</h5>
    <script>
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player( 'player', {
          events: { 'onStateChange': onPlayerStateChange }
        });
      }
      function onPlayerStateChange(event) {
        switch(event.data) {
          case 0:
            record('video ended');
            break;
          case 1:
            record('video playing from '+player.getCurrentTime());
            break;
          case 2:
            record('video paused at '+player.getCurrentTime());
        }
      }
      function record(str){
        var p = document.createElement("p");
        p.appendChild(document.createTextNode(str));
        document.body.appendChild(p);
      }
    </script>
    <script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>

JS Fiddle Demo

12
blex

In dieser Version wird kein Youtubes-Iframe-API-Skript verwendet. Der einzige Nachteil ist, dass sich die iframe-API möglicherweise ändert.

<iframe id="player" src="https://www.youtube.com/embed/dQw4w9WgXcQ?enablejsapi=1"></iframe>
var addYoutubeEventListener = (function() {

    var callbacks = [];
    var iframeId = 0;

    return function (iframe, callback) {

        // init message listener that will receive messages from youtube iframes
        if(iframeId === 0) {
            window.addEventListener("message", function (e) {

                if(e.Origin !== "https://www.youtube.com" || e.data === undefined) return;
                try {
                    var data = JSON.parse(e.data);
                    if(data.event !== 'onStateChange') return;

                    var callback = callbacks[data.id];
                    callback(data);
                }
                catch(e) {}
            });
        }

        // store callback
        iframeId++;
        callbacks[iframeId] = callback;
        var currentFrameId = iframeId;

        // sendMessage to frame to start receiving messages
        iframe.addEventListener("load", function () {
            var message = JSON.stringify({
                event: 'listening',
                id: currentFrameId,
                channel: 'widget'
            });
            iframe.contentWindow.postMessage(message, 'https://www.youtube.com');

            message = JSON.stringify({
                event: "command",
                func: "addEventListener",
                args: ["onStateChange"],
                id: currentFrameId,
                channel: "widget"
            });
            iframe.contentWindow.postMessage(message, 'https://www.youtube.com');
        });
    }
})();
addYoutubeEventListener(document.getElementById("player"), function(e) {

    switch(e.info) {
        case 1:
            // playing
            break;
        case 0:
            // ended
            break;
    }
});
0
Martins Balodis