SiteCatalystの頃から使われている動画計測手法、Milestone型計測を使って、HTML5動画計測を実装したサンプルコードを載せておきます。
Video Tracking Test
ちなみに上記テストページに載せている動画はオープンソースの3DCGソフトウェアBlenderで作成された「Big Buck Bunny」というムービーです。
Big Buck Bunny – Wikipedia, the free encyclopedia
実装したコード:
s.loadModule("Media");
s.Media.trackWhilePlaying = true;
s.Media.segmentByMilestones = true;
s.Media.playerName = "My_HTML5_Player";
s.Media.trackVars="events,eVar11,eVar12";
s.Media.trackEvents="event11,event12,event13";
s.Media.trackMilestones = "25,50,75";
s.Media.trackUsingContextData = true;
s.Media.contextDataMapping = {
"a.media.name" : "eVar11",
"a.contentType" : "eVar12",
"a.media.timePlayed" : "event11",
"a.media.view" : "event12",
"a.media.complete" : "event13"
};
function playerHandler(e){
if (myvideo.currentTime > 0) {
currentTime = myvideo.currentTime;
}
switch(e.type){
case "play":
if(!videoOpened){
s.Media.open(myvideo.src, myvideo.duration, s.Media.playerName);
s.Media.play(myvideo.src, 0);
}else{
s.Media.play(myvideo.src, currentTime);
}
videoOpened = true;
break;
case "pause":
s.Media.stop(myvideo.src, currentTime);
break;
case "ended":
s.Media.stop(myvideo.src, currentTime);
s.Media.close(myvideo.src);
break;
default:
break;
}
}
if (document.getElementById("myvideo")) {
var videoOpened = false;
var currentTime = 0;
var myvideo = document.getElementById("myvideo");
myvideo.addEventListener("loadedmetadata",playerHandler,false);
myvideo.addEventListener("play",playerHandler,false);
myvideo.addEventListener("pause",playerHandler,false);
myvideo.addEventListener("ended",playerHandler,false);
}
新しい計測手法のHeartbeat型計測は別の機会にやってみます。