3

Javascriptを介して埋め込まれたYoutubeビデオの再生イベントを検出する方法を探しています。現在、状態の変化を検出することはできますが、後でイベントのバインドを解除して、完了したと言って別のイベントを発生させる方法がわかりません。また、IE8以下にはこの関数がないと思うので、add/removeEventListenerを使用したくないです。

これまでの私のコード、

    function onYouTubePlayerReady(playerId) {
    console.log('loaded');
    var ytPlayer = document.getElementById(playerId);
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    console.log("Player's new state: " + newState);
    if(newState === 1) {
        sendYtUrl();
     }
}

function sendYtUrl() {
    console.log('play detected');
    ytplayer.removeEventListener("onStateChange");
}

sendYtUrlにアクセスし、リスナーを削除してから、必要なことをすべて実行するか、さらに良いことに、クリーンに保ち、同じ関数のままにしておくことを望んでいます。

前もって感謝します！

4

2 に答える 2

8

ビデオがいつ終了または完了するかを知るために、onStateChangeイベントのバインドを解除する必要はありません。イベントリスナーが1つonStateChangeだけ必要です。これらの状況が発生するたびに起動され、次の状態が返されます。

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued)

関数に、動画が完成したときにキャッチonytplayerStateChangeする別のステートメントを追加します。if

function onytplayerStateChange(newState) {
    console.log("Player's new state: " + newState);
    if(newState === 1) {
        sendYtUrl();
    } else if(newState === 0) {
        console.log("Video has ended!");
    }
}
于 2012-10-01T16:51:29.313 に答える
1

どうもありがとう！それは私を正しい方向にぶつけました。

これが私がやったことです。

var ytPlaying = 0;
var ytPlayed = '';
var currPlaying = '';

function onYouTubePlayerReady(playerId) {
    //console.log('loaded');
    var ytPlayer = document.getElementById(playerId);
    ytPlayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    currPlaying = window.location.hash;
    //console.log("Player's new state: " + newState);
    if (newState === 1) {
        console.log('playing');
        clientSideTracking();
    }   
}


function clientSideTracking() {
   // console.log('client tracking');
    //console.log(currPlaying, ytPlayed);
    if (currPlaying != ytPlayed) { // if current playing isn't the same as prior played
        //console.log('different'); // then it's different - track it.
        var event = new AnalyticsPageEvent('Youtube Analytics', currPlaying);
        event.trigger();
    }
    ytPlaying = 0; // change back to 'not played' and change to 0 so that it's logged
    ytPlayed = currPlaying;

}

まだ再生されていない新しいURLがある場合に、AnalyticPageEventをトリガーします。:)

于 2012-10-01T20:00:38.740 に答える