Skip to content

Instantly share code, notes, and snippets.

@s2t2
Last active April 12, 2019 07:20
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save s2t2/45460c06581798ba6e94 to your computer and use it in GitHub Desktop.
Save s2t2/45460c06581798ba6e94 to your computer and use it in GitHub Desktop.
Learning jwplayer behavior.
jwplayer('player').setup({ ... });
//
// Q: under which conditions does jwplayer return the duration of the current video?
//
console.log(jwplayer('player').getState(), jwplayer('player').getDuration())
"IDLE" -1 // fail
jwplayer('player').play(true)
console.log(jwplayer('player').getState(), jwplayer('player').getDuration())
"PLAYING" 3609.1 // success
jwplayer('player').play(false)
console.log(jwplayer('player').getState(), jwplayer('player').getDuration())
"PAUSED" 3609.1 // success
jwplayer('player').stop()
console.log(jwplayer('player').getState(), jwplayer('player').getDuration())
"IDLE" 3609.1 // success
//
// Q: is this behavior consistent if the player is re-instantiated?
//
jwplayer('player').remove();
jwplayer('player').setup({ ... });
console.log(jwplayer('player').getState(), jwplayer('player').getDuration())
"IDLE" -1 // yes
//
// Q: what event triggers the change?
//
jwplayer('player').onReady(function(){
console.log("READY", jwplayer('player').getState(), jwplayer('player').getDuration())
})
jwplayer('player').onPlaylist(function(){
console.log("PLAYLIST", jwplayer('player').getState(), jwplayer('player').getDuration())
})
jwplayer('player').onPlaylistItem(function(){
console.log("PLAYLIST ITEM", jwplayer('player').getState(), jwplayer('player').getDuration())
})
jwplayer('player').onIdle(function(){
console.log("IDLE", jwplayer('player').getState(), jwplayer('player').getDuration())
})
jwplayer('player').onPause(function(){
console.log("PAUSE", jwplayer('player').getState(), jwplayer('player').getDuration())
})
jwplayer('player').onPlay(function(){
console.log("PLAY", jwplayer('player').getState(), jwplayer('player').getDuration())
})
jwplayer('player').onTime(function(){
console.log("TIME", jwplayer('player').getState(), jwplayer('player').getDuration())
})
// (reload) ...
READY IDLE -1 // fail
PLAYLIST IDLE -1 // fail
PLAYLIST ITEM IDLE -1 // fail
jwplayer('player').stop() // does not trigger onIdle because already Idle
console.log(jwplayer('player').getState(), jwplayer('player').getDuration())
IDLE -1 // fail
jwplayer('player').play(false) // does not trigger onPause because ???
console.log(jwplayer('player').getState(), jwplayer('player').getDuration())
IDLE -1
jwplayer('player').play(true)
(2 times) PLAY PLAYING -1 // play(true) triggers onPlay, but fails to get duration
(178, etc times) TIME PLAYING 3609.1 // play(true) triggers onTime, and successfully gets duration
jwplayer('player').stop()
IDLE IDLE 3609.1 // .stop() triggers onIdle, and still knows proper duration
//
// Q: how to get video duration as soon as possible?
//
//option A: get within onPlay function?
jwplayer('player').onPlay(function(){
console.log(jwplayer('player').getState(), jwplayer('player').getDuration())
})
jwplayer('player').play(false)
jwplayer('player').play(true)
PLAYING -1 // (doesn't work; is not an option)
jwplayer('player').play(true)
jwplayer('player').play(false)
jwplayer('player').play(true)
PLAYING 3609.1
// option B: get within onTime function
jwplayer('player').onTime(function(){
console.log(jwplayer('player').getState(), jwplayer('player').getDuration())
})
jwplayer('player').play(false)
jwplayer('player').play(true)
PLAYING 3609.1 // success
jwplayer('player').onTime(function(){
// update durationScale based on video duration.
var video_duration = this.getDuration(); // #todo: find a way to avoid setting this every iteration of onTime
durationScale.domain([0, video_duration]); // #todo: find a way to avoid setting this every iteration of onTime
// update current position and reference line based on scaled current position.
current_position = this.getPosition();
current_position_reference_line.transition()
.attr("x1", durationScale(current_position))
.attr("x2", durationScale(current_position));
var current_progress = current_position / video_duration;
var current_progress_percentage = (current_progress * 100).toFixed(5)
console.log("POSITION (s):", current_position, "-- COMPLETION (%):", current_progress_percentage); // console.log("STATE:", this.getState()) // this will always log "PLAYING" under the .onTime() function. Time doesn't move when the player is paused.
});
@robwalch
Copy link

You can get position and duration from the event object:

 jwplayer('player').onTime(function(e){
    var currentProgress = e.position / e.duration;
    var currentProgressPercentage = e.position * 100 / e.duration;
    console.log('position %ss / duration %ss -- progress %s%', e.position, e.duration, currentProgressPercentage.toFixed());
});

// position 5s / duration 60s -- progress 8.33333%

@s2t2
Copy link
Author

s2t2 commented May 31, 2015

Thanks @robwalch for that alternate way of accessing duration and position.

My primary question could probably be re-phrased as...

Because the duration stays constant, it doesn't need to be looked up iteratively, right? I'm wondering if there is a way to get duration outside the onTime event, and if this matters with regard to performance.

@donato
Copy link

donato commented Jun 15, 2015

Yes,

var playerInstance = jwplayer('playerId');
playerInstance.getDuration();
// returns -1 before duration is known
// returns duration after the first time event is processed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment