embedly / player.js

Control embedded video and audio across multiple providers
playerjs.io
BSD 3-Clause "New" or "Revised" License
534 stars 178 forks source link

Events triggered when navigating with timeline #55

Open bellef opened 7 years ago

bellef commented 7 years ago

Hi,

First of all thank you for this amazingly simple yet powerful library!

It's more a question than an issue but here it is:

I'm trying to track down what a client actually watched in a youtube video.


Considering a 2 minutes video and a user doing this:

  1. Clicks play
  2. Watches video from 00:00 to 00:35
  3. Clicks on the timeline to go to 01:00
  4. Watches until 01:30
  5. Clicks pause

Then, considering this (simplified) code:

var videoTimeStamp = 0.0;

// Listen to the play event.
player.on('play', function(){
  console.log("PLAYED");
  console.log("TimeStamp: " + videoTimeStamp);
});

// Listen to the pause event.
player.on('pause', function(){
  console.log("PAUSED");
  console.log("TimeStamp: " + videoTimeStamp);
});

// Update timer
player.on('timeupdate', function(data){
  videoTimeStamp = data.seconds;
});

Finally the console output:

> PLAYED
> TimeStamp: 0.0
> PAUSED
> TimeStamp: 60.0
> PLAYED
> TimeStamp: 60.0
> PAUSED
> TimeStamp: 90.0

As you can see, it seems that the pause event was triggered right after the timeupdate event. Expected output:

> PLAYED
> TimeStamp: 0.0
> PAUSED
> TimeStamp: 35.0
> PLAYED
> TimeStamp: 60.0
> PAUSED
> TimeStamp: 90.0

I also tried to use the getCurrentTime method but (kind of) the same problem happens. Am I doing something wrong and is there a way to do what I'm trying to do?

Any help would be greatly appreciated, thank you guys!

bellef commented 7 years ago

I ended up doing this:

var previousTimeStamp = 0.0;
var videoTimeStamp = 0.0;

// Listen to the play event.
player.on('play', function(){
  console.log("PLAYED");
  console.log("TimeStamp: " + videoTimeStamp);
});

// Listen to the pause event.
player.on('pause', function(){
  console.log("PAUSED");
  console.log("TimeStamp: " + previousTimeStamp);
});

// Update timer
player.on('timeupdate', function(data){
  previousTimeStamp = videoTimeStamp;
  videoTimeStamp = data.seconds;
});

Although I've found this solution, I'm still interested to know if there's a better way to do it.