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
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
event will be activated in 3 cases:
seek
event fired and then playing will fire as well (since video is now playing again).paused
event will be activated in 2 cases:
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.
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);
});
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.