0

我想通过 iframe 消息事件跟踪视频事件，但在查找有关如何执行此操作的文档时遇到问题。我知道我需要做类似这样的事情 window.addEventListener('message', function(message) { // 检查 message.origin 是否来自 iframe，然后使用 message.data... }); 但不确定我如何从那里继续。我需要跟踪暴露的视频事件，例如 video_start、first_quartile、second_quartile、third_quartile、fourth_quartile 和 complete。

任何帮助或方向将不胜感激

这是到目前为止的代码

$(function() {

    window.addEventListener('message', function(message) {
        if (!(/^https?:\/\/bla.bla.bla..com/).test(message.origin)) {
        return false;
        }
         var data = JSON.parse(message.data);

    switch (message.event) {
        case 'ready':
            onReady();
            break;

        case 'play':
            onPlay(message.data);
            break;

        case 'playProgress':
            onPlayProgress(message.data);
            break;

        case 'pause':
            onPause(message.data);
            break;

        case 'finish':
            onFinish(message.data);
            break;
    }

    function post(action, value) {
    var data = {
      method: action
    };

    if (value) {
        data.value = value;
    }

    var message = JSON.stringify(data);
    player[0].contentWindow.postMessage(message);
}


        function onPlay(data) {
            ga('send', 'event', 'Videos', 'play', 'Video Played');
            console.log('Video Played');
        }

function onPause(data) {
     ga('send', 'event', 'Videos', 'Pause', 'Video Paused');
}

function onFinish(data) {
     ga('send', 'event', 'Videos', 'Finished', 'Video Finished');
}

function onPlayProgress(data) {
    var quartile;
    if (data.percent % 25 === 0) {
        quartile = data.percent / 25;
        ga('Video Progress', {
            quartile: quartile
        })
    }
}


    });

});
4

0 回答 0