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型計測は別の機会にやってみます。