web-dev-qa-db-ja.com

YouTube API-iframeonStateChangeイベント

Iframe YouTube APIを使用しており、ユーザーが動画を開始および停止したときに、イベントを追跡したい。たとえば、Googleアナリティクスにデータを送信したい。

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

https://developers.google.com/youtube/iframe_api_reference?csw=1 を調べましたが、その方法の例が見つかりませんでした。この例では、iframeを作成し、onReadyとonStateChangeも定義しています。ページにiframeしかない場合、どうすれば同じですか？

javascriptyoutubeyoutube-api
10
Dmytro Pastovenskyi

この例では、onPlayerStateChangeをさまざまな states で使用して、ユーザーが行うすべての再生/一時停止アクションをリッスンします。そしてそれらを（records）印刷します。

ただし、このデータでやりたいことを行うには、独自のrecord関数を作成する必要があります。

また、iframeにID（この場合は＃player）が必要であり、最後に？enablejsapi = 1を追加する必要があります。そのURL。そしてもちろん、必ず Youtube iframe API を含めてください。

注

準備ができたらonYouTubeIframeAPIReadyを呼び出すため、コードの後に​​APIを宣言することが重要です。

<!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デモ

13
blex

これは、Youtubes iframeAPIスクリプトを使用しないバージョンです。唯一の欠点は、iframeAPIが変更される可能性があることです。

<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;
    }
});
1
Martins Balodis