CODEWITHSUNDEEP
javascriptvimeovimeo-api
guru
guru

Reputation: 307

How can I measure how long an embedded Vimeo video has been watched for?

I have a Vimeo video embedded on my webpage and I want to record a Google Analytics event when a user has watched the video for 10 seconds. Is there a way to measure how long the video has been watched for? For reference the player uses: player.js - /* VimeoPlayer - v2.7.1 - 2015-06-26 */

Upvotes: 4

Views: 3542

Answers (2)

Kaiido
Kaiido

Reputation: 136986

The playProgessevent of the vimeo API does contain a seconds property.

So you can ask to listen to this event, and check for this property being more than 10.

function postMsg(id){
  var msg = {method:"addEventListener", value: 'playProgress'};
  var iframe = document.getElementById(id), cW;
  if(iframe) cW = iframe.contentWindow;
  if(!cW){setTimeout(function(){postMsg(id)}, 200); return;}
  cW.postMessage(JSON.stringify(msg), '*');
  }

var messageListener = function(e){
    if (!(/^https?:\/\/player.vimeo.com/).test(e.origin))
        return false;
    var evt = JSON.parse(e.data);
    if(evt.event==='ready') postMsg(evt.player_id);
    if(evt.event==='playProgress') onPlayProgress(evt.data);
    }

function onPlayProgress(data) {
    if(data.seconds > 10) doSomething();
    }

window.addEventListener('message', messageListener, false);
iframe.src="http://player.vimeo.com/video/theVideoId?api=1&player_id="+iframe.id;

jsfiddle

Upvotes: 1

ray
ray

Reputation: 27275

<video> elements emit events. If your player uses <video> you can add event listeners for timeupdate events, or listen for play/pause events and handle the timing yourself.

Upvotes: 0

Related Questions