CODEWITHSUNDEEP
javascriptvimeo
Marten Hoekstra
Marten Hoekstra

Reputation: 11

Tracking % video viewed not working (timeupdate & vimeo). Why?

With some googling, I came up with the below code to track play, end and video progress (% of video viewed). I used Vimeo API Tracking for input.

PLAY and END work. TIMEUPDATE works also but not the console.log when 10% of video is watched. I cannot figure out what I am doing wrong.

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>video-test-vimeo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.on('play', function() {
        console.log('played the video!');
    });
	
	player.on('ended', function() {
        console.log('ended the video!');
    });
	
	player.on('timeupdate', function(data) {
		console.log('Percentage watched: '+data.percent);
    	if (data.percent == 0.1) {
			console.log('10% of video watched');
     	}
 });
</script>
</body>
</html>

Upvotes: 1

Views: 4438

Answers (2)

Ramiz Web Dev
Ramiz Web Dev

Reputation: 621

Sorry for too late but just got the alternative way for the same.

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>video-test-vimeo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var iframe = jQuery('.your_turn_vimeo_video iframe');
var vimeoPlayer = new Vimeo.Player(iframe);      

setInterval(function () {

    vimeoPlayer.getCurrentTime().then(function(seconds) {
   
        console.log( seconds, "current seconds " );

    });
        //console.log('it works' + new Date());
},1000);
</script>

This will getCurrentTime every seconds. so the way you can work as "timeupdate" update.

I hope this helps another user too. thanks :)

Upvotes: 0

Rebecca Sich
Rebecca Sich

Reputation: 698

@Marten Hoekstra Not sure if you solved this yet but for posterity's sake I will give you a full answer:

If you run your code you will see this in the console: 

Percentage watched: 0.097 
Percentage watched: 0.101 
Percentage watched: 0.105

However your line of code if (data.percent == 0.1) attempts to print when the percent is exactly 0.1. This doesn't occur clearly. This is because of the nature of the Time Update event which you can read about here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event. This says:

The event frequency is dependant on the system load, but will be thrown between about 4Hz and 66Hz (assuming the event handlers don't take longer than 250ms to run).

What this means is although the event happens very frequently it is not enough to ensure that the value will ever be exactly 10%. Therefore you should add some sort of tolerance in your if statement so you're not reliant on an exact value. This could be something like:

const TOLERANCE = 0.002 

...

if (data.percent >= (0.1 - TOLERANCE) && data.percent <= (0.1 + TOLERANCE))

Upvotes: 3

Related Questions