Ziggeo SDK Video Player - get seek time

In any of Ziggeo's SDKs,
Can you find out what second of the video the player is at?

I want to know when a viewer gets 30 seconds into the video (for example).

There seem to be methods (events) like play, pause, seek; but it's not obvious if any of them can return a value of where in the video the user is.

I could infer where they are by watching play and pause events, but a seek would go to an unpredictable part of the video

Solution

As you said, there are several events that would be of use for such implementation and I will presume that you are going to be using v2 (as that is the recommended way to go with).

The events are:

playing
paused
ended
seek

playing event will be activated in 3 cases:

the video playback is started
the play action is activated after the video was paused
the seek option was used to reach specific point in video, seek event fired and then playing will fire as well (since video is now playing again).

paused event will be activated in 2 cases:

when someone clicks on pause button
at the very end, pause event fires, followed by ended event.

ended and seek events fire only when the specific case presents itself (end of video or seek was used respectively).

seek event however has a parameter that is passed into the function - the position allowing us to quickly get the exact time the seek operation happened on.

Knowing this, we know what to expect and when.

The way to get the data (any video data) would be to use embedding.get();. Using it as is, will return an entire object of useful details, however for position you would just type 'position'.

This is the code of events that would work:

player.on('playing', function(){
  console.log('This is "playing" event from ' + player.get('position') + ' of ' + player.get('totalduration') );
});
player.on('paused', function(){
  console.log('This is "paused" event at ' + player.get('position') + ' of ' + player.get('totalduration') );
});
player.on('ended', function(){
  console.log('This is "ended" event at ' + player.get('position') + ' of ' + player.get('totalduration') );
});
player.on('seek', function(position){
  console.log('This is "seek" event at ' + player.get('position') + ' of ' + player.get('totalduration') );
  console.log('quicker way and more reliable:' + position);
});

You can see there grabbing the 'position' and the 'totalduration', this is just for the example.
It is good to point out that the seek event gets the right data within the position parameter, so use that instead of the .get() method as it could tell you a slightly "older" value.

Following is the complete code snippet, however you need to add your own application token and video token. To do that, just replace the "APP_TOKEN" with your application token and "VIDEO_TOKEN" with video token or key.

<!DOCTYPE html>
<html>
  <head>
    <!-- We are declaring our resource calls at this location -->
    <link rel="stylesheet" href="https://assets-cdn.ziggeo.com/v2-stable/ziggeo.css" />
    <script src="https://assets-cdn.ziggeo.com/v2-stable/ziggeo.js"></script>
    <script>
      var ziggeoapp = new ZiggeoApi.V2.Application({
        token:"APP_TOKEN",
        webrtc_streaming: true
      });
      ZiggeoApi.V2.Locale.setLocale("en");
      // the above can be quickly retrieved from https://ziggeo.com/docs/sdks/javascript/browser-integration/header

      //utilizing application event. This makes sure that the code is checked for after DOMReady and Ziggeo system is initialized.
      //application events: https://ziggeo.com/docs/sdks/javascript/browser-interaction/application-events
      ziggeoapp.on('ready', function() {
        var player = new ZiggeoApi.V2.Player({
          element: document.getElementById('player_placeholder'),
          attrs: {
            countdown: 3,
            width: 640,
            height: 480,
            theme: 'modern',
            themecolor: 'red',
            video: 'VIDEO_TOKEN'
          }
        });

        player.activate();

        //if we want to listed to all embeddings on the page, regardless of knowing which it is, we could use the application wide embedding events approach (global events system): https://ziggeo.com/docs/sdks/javascript/browser-interaction/application-embedding-events
        //however the private events seem much better for reacting to them
        //https://ziggeo.com/docs/sdks/javascript/browser-interaction/events
        player.on('playing', function(){
          console.log('This is "playing" event from ' + player.get('position') + ' of ' + player.get('totalduration') );
        });
        player.on('paused', function(){
          console.log('This is "paused" event at ' + player.get('position') + ' of ' + player.get('totalduration') );
        });
        player.on('ended', function(){
          console.log('This is "ended" event at ' + player.get('position') + ' of ' + player.get('totalduration') );
        });
        player.on('seek', function(position){
          console.log('This is "seek" event at ' + player.get('position') + ' of ' + player.get('totalduration') );
          console.log('quicker way and more reliable:' + position);
        });
      });
    </script>
  </head>
  <body>
    <div id="player_placeholder"></div>
  </body>
</html>

I have added comments with links within the code, which should hopefully give additional information.