Событие API YouTube отличает паузу от поиска / буфера

Question

Мы настроили отслеживание событий для видео начала / воспроизведения / паузы / завершения событий.

У нас есть унифицированный способ сообщения о событиях для видео HTML5, Youtube и Youku. Для HTML5 и мобильных видео Youku это не проблема. Для настольного Youku (Flash) нам пришлось настроить setInterval Опрос, чтобы проверить, в каком состоянии видео, это не красиво, но работает хорошо.

Проблема со встроенным видео на Youtube. Мы слушаем onStateChange событие:

player.addEventListener('onStateChange', function(e) {

    if(e.data === 0) {
        // Complete

    } else if(e.data === 1) {
        // Play

    } else if(e.data === 2) {
        // Pause
    }
}

Но когда пользователь ищет в видео во время воспроизведения видео, взаимодействует с временной шкалой, проигрыватель вызывает паузу воспроизведения и буфер (e.data === 3) событие. Мы не хотим отслеживать паузу и игру, вызванную поиском.

В chrome мы можем различить действие поиска, так как событие буфера всегда будет запускаться первым. подобно 3, 2 и когда игрок закончил буферизацию 1, Поэтому мы игнорируем любое событие паузы, которое близко следует за буферным событием, и любое событие воспроизведения, следующее за буферным событием, независимо от прошедшего времени. Это хорошо работает.

В Firefox, однако, последовательность событий очень отличается. В Firefox буферное событие завершается. Итак, мы получаем заказ 2, 1, 3, Если видео уже буферизуется, мы получаем 2, 3, 1,

Есть ли другой способ обнаружения событий поиска для видео на YouTube? Или способ захвата последовательности?

Answer 1

Вот так я и решил эту проблему. Он будет отслеживать события воспроизведения и паузы, но ничего не будет отслеживать, когда пользователь ищет. Насколько я могу судить, он работает так, как и ожидалось в браузерах, которые я тестировал.

var youtubeTrackingGate = youtubeTrackingGateFactory();

youtubePlayer.addEventListener('onStateChange', function(e) {
    if(e.data === -1 || e.data === 3) {

        youTubeTrackingGate({type: e.data});
    } else if(e.data === 1) {
        youTubeTrackingGate({type: e.data, event: 'PLAY'});
    } else if(e.data === 2) {
        youTubeTrackingGate({type: e.data, event: 'PAUSE'});
    }
});

function youtubeTrackingGateFactory () {
    var
        sequence = [],
        preventNextTracking = false,
        data,
        timeout;

    return function(obj) {

        // Chrome seek event
        if(util.compareArrays(sequence, [3]) && obj.type === 2) {
            preventNextTracking = true;

        // Prevent next play
        } else if(preventNextTracking && obj.type === 1) {
            preventNextTracking = false;

        } else {
            clearTimeout(timeout);

            // Save event
            sequence.push(obj.type);
            data = obj.event;

            timeout = setTimeout(function() {

                // Single event, let it pass if it's (play/pause)
                if(sequence.length === 1 && [1, 2].indexOf(sequence[0]) > -1) {

                    sendTracking(data);
                }

                sequence = [];
            }, 500);
        }

        // Suppress any (play/pause) after buffer event
        if(obj.type === 3) {

            // If not inital play
            if(!util.compareArrays(sequence, [-1, 3])) {
                preventNextTracking = true;

            // If is initial play
            } else {
                sequence = [];
            }
        }
    };
}


sendTracking(event) { 
    // code
}