websites/privacy-sensitive-analytics#23: Fire event on video playback

Based on the original implementation, the play counter looks something like this

/* Build the analytics payload */
function logVideoState(video, state){

    var src = new URL(video.currentSrc);
    var tz = new Date().getTimezoneOffset();

    var p = {
        domain : src.hostname,
        page: src.pathname,
        referrer: document.location.href,
        referrer_domain: document.location.hostname,
        platform: navigator.platform,
        timezone: tz,
        sess_id: getSessionId(),
        state: state,
        responseTime: Date.now() - window.performance.timing.navigationStart    
    }
    console.log(p);
}


videos = document.getElementsByTagName('video');
for (var i=0; i < videos.length; i++){
    videos[i].addEventListener('playing', function(e){
        console.log(e);
        logVideoState(e.srcElement, '"playing"');
    });
}

I don't know if it's actually worth adding a hook for PlayReady. The analytics hook should be the last thing to run on most pages, at which point the player should already be ready - it made sense when the embed was being triggered by JS, because the start was also under our control.

I guess, though, that the whole point it to catch times when that's not true - if it's not loaded by the time analytics fires, there's almost certainly an issue.

OK, I'll add it and we'll see how it goes. The next step is to transform this into the format used by the agent - we shouldn't actually need to construct an object in the way we have above.

I know why OnPlayerReady seemed odd to me now - it's VideoJS specific. We actually want the canplay event.

I think, whilst we're at it, we may want to hook the events indicating playback issues:

• abort
• error
• stalled

Have just tested, as expected, canplay didn't fire because the video had loaded before analytics, but this is fine.