Get total time

29 posts | return to the JavaScript Interaction forum | get the rss feed for this thread

Apr. 06, 2008Chris

How do I get the duration of the file being played in javascript?

I want to insert it here:
var seekbar = new Control.Slider('handle1', 'track1', {
onSlide: function(v) { v*totaltimehere },
onChange: function(v) { }
});

So that it can get the correct time to seek to when the user clicks on the seekbar.

Apr. 06, 2008andersen

please see the source of the demo - http://home5.inet.tele.dk/nyboe/flash/mediaplayer/customize.htm
(linked from the demopage - http://home5.inet.tele.dk/nyboe/flash/mediaplayer )

it uses this line:
if(typ == "time") { currentPosition = pr1; document.getElementById("progressimg").style.width = currentPosition/((pr2+pr1)/100)+"%" ;}

Apr. 06, 2008Chris

Sorry I'm new to javascript, but the code I have above is outside of the getUpdate function, so I how can I place the total time into that function?

Apr. 06, 2008streamBabie

The player calls getUpdate() once per second, when it is running, to update the position data.

Make currentPosition global, then use it in your function.

You do have to have the getUpdate() function with at least the if(typ == 'time') { currentPosition = pr1: } and the thisMovie(movieName) function in your JS code as well as JS enabled in your player code.

Apr. 06, 2008Chris

so in getUpdate() I have this:
if(typ == "time") { ...stuff... totaltime = parseInt(pr1) + parseInt(pr2); }

And var seekbar = new Control.Slider('handle1', 'track1', {
onSlide: function(v) { v*totaltimehere },
onChange: function(v, totaltime) { sendEvent('mpl','scrub',parseInt(v)*parseInt(totaltime));alert(parseInt(totaltime)) }
});

Hoever total time is NaN when the alert box comes up.

Apr. 06, 2008streamBabie

Is totaltime global? If not, how is it going to get from getUpdate() into onChange: function()?

Apr. 06, 2008Chris

How do I make it global? I thought not putting var in front makes it global.

Apr. 06, 2008streamBabie

I thought not putting var in front makes it globalOnly if it has already been declared as a global.

Outside of the functions:var totaltime = 0;Or whatever initial value makes sense for the first time that the variable is used.

If you would post your full JavaScript code, it would be much easier to help you. Snippets are hard to work with.

Apr. 06, 2008Chris

in the header of the page...
function sendEvent(swf,typ,prm) {
thisMovie(swf).sendEvent(typ,prm);
};
function loadFile(swf,obj) {
thisMovie(swf).loadFile(obj);
};
function itemData(swf,idx) {
var obj = thisMovie(swf).itemData(idx);
};

var updateS;
function updateInfo( itemId ) {
new Ajax.Updater('songInfo', 'getInfo?typ=1&itemId='+itemId, { method: 'get'});
$('miscInfo').innerHTML = 'Share: http://www.theinternet.fm?trackId='+itemId;
}
var totaltime = 0;
function getUpdate(typ,pr1,pr2,swf) {
if(typ == 'state') { if(pr1 == 3) {
load('/playlist?c='+document.getElementById('channel').value+'&s=1','playlist')}
if(pr1 == 2) {
$('play').setStyle({display: 'none'});
$('pause').setStyle({display: 'block'});
}
if(pr1 == 1) {
$('play').setStyle({display: 'none'});
$('pause').setStyle({display: 'block'});
}
if(pr1 == 0) {
$('play').setStyle({display: 'block'});
$('pause').setStyle({display: 'none'});
}
}

if(typ == 'time')
{
currentElapsed = pr1;
currentRemaining = pr2;
percenttime = (parseInt(currentElapsed)/parseInt(currentRemaining + currentElapsed));
seekbar.setValue(percenttime);
$('timeLapsed').innerHTML=Math.floor(parseInt(currentElapsed)/60)+':'+parseInt(currentElapsed)%60;
$('timeRemaining').innerHTML=Math.floor(parseInt(currentRemaining)/60)+':'+parseInt(currentRemaining)%60;
totaltime=parseInt(currentRemaining) + parseInt(currentElapsed);
}
}

function thisMovie(swf) {
if(navigator.appName.indexOf("Microsoft") != -1) {
return window[swf];
} else {
return document[swf];
}
};

//load html
function load(name, div) {
new Ajax.Updater(div, name, { evalScripts: true, method: 'get', onComplete: function() {
loadFile('mpl',{file:'http://www.youtube.com/watch?v='+document.getElementById('currentitem').value});
window.location.hash=parseInt($('currentpos').value);
//window.location.hash='#';
updateInfo($('currentId').value);
}});

}
function changeChannel( channel ) {
new Effect.BlindUp('mainContent', {duration: 1, beforeStart: function() {$('container').setStyle({height: '0px'});}, afterFinish: function(){new Effect.BlindDown('mainContent', {duration: 1, afterFinish: function() {$('container').setStyle({height: '300px'});}});
load('/?channel='+channel+'&f=1','mainContent');}
});

}
function playNext() { load('/playlist?c='+$('channel').value+'&s=1','playlist'); }
function playPrev() { load('/playlist?c='+$('channel').value+'&s=2','playlist');
}

function loginNow() {
new Ajax.Request('/login', { method: 'post',
parameters: $('login').serialize(true),
onSuccess: function(transport){

var response = transport.responseText;

if(response == 1) {
new Effect.toggle('loginBox', 'appear', {duration: .5});
new Ajax.Updater('menu', 'menu', { method: 'get'});
} else
alert(response);
},
onFailure: function(){
alert('Error. Please try again.')
}
});
return false;
}
function logout() {
new Ajax.Updater('process', 'logout', { method: 'get', onComplete: function() { new Ajax.Updater('menu', 'menu', { method: 'get' }); }});
}
function mini() {

var e = document.getElementById('container');
if(!e) return true;
if(e.style.height == "0px")
{
e.style.height = "300px"
}
else
{
e.style.height = "0px"
}
return true;
}
function playpause() {
sendEvent('mpl','playpause');
}

Somewhere down the page...

<script type="text/javascript" language="javascript">
// <![CDATA[

// horizontal slider control
var seekbar = new Control.Slider('handle1', 'track1', {
onSlide: function(v, totaltime) { sendEvent('mpl','scrub',parseInt(v)*parseInt(totaltime)); alert(parseInt(v)*parseInt(totaltime)); },
onChange: function(v, totaltime) { //sendEvent('mpl','scrub',parseInt(v)*parseInt(totaltime));alert(parseInt(totaltime))
}
});
// ]]>
</script>

So it still doesn't work. The alert box still says NaN (I've disabled the alert box but to see for yourself: www.theinternet.fm). I'm trying to get it so that when the javascript seek bar is dragged the video will be scrubbed to that position.

Apr. 07, 2008andersen

@Chris - make sure you test online - the javascript api only works online!
you might wanna go by the "divide and conquer" programming method - that is, doing one thing at the time -
try make a test page with only a player and the javascript showing the time - then when that works add the rest of the script...

Apr. 07, 2008Chris

Oh everything works, including the javascript seekbar. The seekbar updates its position when the video plays. I'm just trying to get it so that when you drag the javascript seekbar to a new position the video will scrub to that position.

Apr. 08, 2008Chris

So anyone know how I can get the total time? I guess a workaround I'm thinking about is setting the total time into a textfield and then pulling that number from there. But there must be a more efficient way.

Apr. 09, 2008andersen

if(typ == "time") { totalTime = pr1+pr2; )

Apr. 09, 2008Chris

Yes I have that, but with my limited javascript knowledge, I want to figure out how I can use "totalTime" in another function. I tried putting it in the function for the seekBar but the value there is NaN.

Jun. 04, 2008Deb

I'm trying to get the elapsed time when the video is playing. The idea is to create an user interface for the users to make custom annotations for the video. Therefore, when the user pauses the video by clicking on pause button or on the player area, I should be able to capture the current time of video from Javascript. Searching this forum, I had come up with the following code, in which I noticed that the "getUpdate" function is never called!! Please help! Many thanks in anticipation...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Playing video using "Object" tag</title>
</head>
<SCRIPT src="swfobject.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>

var currentPosition = 0;

function secs2hms(secs) {
var iHours = Math.floor(secs/3600);
var iMinutes = Math.floor((secs/60) - (iHours*60));
var iSeconds = Math.floor(secs % 60);

if (iSeconds == 60) { iMinutes++; iSeconds = 0; }
if (iMinutes == 60) { iHours++; iMinutes = 0; }

return(iHours+':'+iMinutes+':'+iSeconds);
}

function sendEvent(typ,prm) { thisMovie("theMediaPlayer").sendEvent(typ,prm); };

function getUpdate(typ,pr1,pr2,pid) {
if(typ == "time") { currentPosition = pr1; }
}

function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}

function getCurrentTime(){
return secs2hms(currentPosition);
}

function createplayer() {
var s = new SWFObject("mediaplayer.swf","theMediaPlayer","320","220","8");
s.addParam("allowfullscreen","true");
s.addVariable("file", "brain.flv");
s.addVariable("displayheight","200");
s.addVariable("showicons","true");
s.addVariable("enablejs","true");
s.addVariable("javascriptid","theMediaPlayer");
s.addVariable("autostart","false");
s.write("placeholder");
}
</SCRIPT>

<body onload="createplayer()">

<div id="placeholder"><a href='http://www.macromedia.com/go/getflashplayer'>get the flash player</a> to see this player.</div>

<form>
<input type="button" value="click" onclick="alert(getCurrentTime())">
</form>
</body>
</html>

Jun. 04, 2008comedian

getUpdate() is called by the JW FLV Media Player whenever the player's state changes and once per second to update the position data and various other data.

Also, add width & height to your flashvars.

Jun. 11, 2008Deb

I have been trying to capture the current elapsed time (while the movie is playing) using Javascript. My goal is to provide an user interface for annotating video, and for that I need to capture the current play plostion (time), so that the user can enter some text at that time, after pausing the video and so on. Using this input, the annotation XML file could be built and later played. I am not an expert in Javascript, but I noticed that 'getUpdate' fuction, which is automatically called by the player each second is not being called at all. Below is the complete HTML code for your perusal. A quick response shall be very highly appreciated...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<title>Playing video using "Object" tag</title>
</head>
<SCRIPT src="swfobject.js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>

var currentPosition = 0;


function secs2hms(secs) {
var iHours = Math.floor(secs/3600);
var iMinutes = Math.floor((secs/60) - (iHours*60));
var iSeconds = Math.floor(secs % 60);

if (iSeconds == 60) { iMinutes++; iSeconds = 0; }
if (iMinutes == 60) { iHours++; iMinutes = 0; }

return(iHours+':'+iMinutes+':'+iSeconds);
}

function sendEvent(typ,prm) { thisMovie("theMediaPlayer").sendEvent(typ,prm); };

function getUpdate(typ,pr1,pr2,pid) {
if(typ == "time") { currentPosition = pr1; }
}

function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}

function getCurrentTime(){
return secs2hms(currentPosition);
}

//document.getElementById("timeplaceholder").value = theTime;

function createplayer() {
var s = new SWFObject("mediaplayer.swf","theMediaPlayer","320","220","8");
s.addParam("allowfullscreen","true");
s.addVariable("file", "brain.flv");
s.addVariable("displayheight","200");
s.addVariable("showicons","true");
s.addVariable("enablejs","true");
s.addVariable("javascriptid","theMediaPlayer");
s.addVariable("autostart","false");
s.write("placeholder");
}
</SCRIPT>

<body onload="createplayer()">

<div id="placeholder"><a href='http://www.macromedia.com/go/getflashplayer'>get the flash player</a> to see this player.</div>

<form>
<input type="button" value="click" onclick="alert(getCurrentTime())">
</form>
</body>
</html>

Many thanks for spending your precious time!

Jun. 11, 2008Deb

Hi comedian,

I am pausing the player, and hitting the button to get the current time... isn't that a "state change"? I added width and height too... it didn't help... Please, please, anybody out there - help me!!!

Jun. 11, 2008Deb

Hi comedian,

Please see the code posted above...

I am pausing the player, and hitting the button to get the current time... isn't that a "state change"? I added width and height too... it didn't help... Please, please, anybody out there - help me!!!

Jun. 11, 2008andersen

@deb - from the "Javascript interaction" page - http://www.jeroenwijering.com/?item=Javascript_interaction Note that javascript interaction only work for the Flash Plugin 8+ and only online, due to security restrictions.

Jun. 13, 2008Deb

Hi Andersen,

Many thanks for your feedback!!!

I'm using Flash Plugin 9. I'm running the code that I had posted, as a standalone html file in IE, not on any webserver. Do you mean to say that in this case javascript interaction won't work? Please elaborate on what do you mean by "online"? I have Apache Tomcat 5. Could you propose a way to test the code on Tomcat as localhost? Would that be called "online"? Please please help...

Many thanks again for spending your very valuable time for us. If I can get this interactive annotation unit done, we are determined to buy JW Player... It is very nice indeed!!!

Jun. 13, 2008andersen

@Deb

i always test the javascript interaction "true online" - that is, on a remote www server -
i have not personally tried to run the players on a "localhost" - but my impression is that it works as long as the url is http://

if using IE on a win machine, you can also rename the .html file to .hta - this will allow you to capture but not to send events

please see the offline-player on the demopage (only works offline - so you have to download the .zip for a proper test)

http://home5.inet.tele.dk/nyboe/flash/mediaplayer/offlinemediaplayer.htm
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/offlineplayer.zip
http://home5.inet.tele.dk/nyboe/flash/mediaplayer

please also note that it still uses a v.3.14 player - but i think that makes no difference in this respect...

Jun. 23, 2008Deb

Many thanks Andersen!

Still I could not understand your advice: "if using IE on a win machine, you can also rename the .html file to .hta - this will allow you to capture but not to send events". What difference does it make to rename the file to .hta? Sorry for my ignorance...

The above mentioned examples (http://home5.inet.tele.dk/nyboe/flash/mediaplayer/offlinemediaplayer.htm
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/offlineplayer.zip
http://home5.inet.tele.dk/nyboe/flash/mediaplayer) do not use getUpdate method or javascript interaction... so could you please please point me out an example where getUpdate method has been successfully used to capture current playing time?

Many thanks in anticipation...

Jun. 23, 2008andersen

http://msdn.microsoft.com/en-us/library/ms536496.aspx

http://home5.inet.tele.dk/nyboe/flash/mediaplayer/javascript.htm
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/snippetplayer.htm
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/customize.htm
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/IDcontrol.htm
http://home5.inet.tele.dk/nyboe/flash/mediaplayer

Nov. 28, 2008Shahiryar

Hi,
the seek bar and total time doesn't appear into my Webplayer, Can you please help me in this regard?

www.hirrak.org/video.htm

Nov. 28, 2008Shahiryar

Hi,
anyone help me?
the seekbar & length of video is not visible into my webplayer,

my script is given below
<script type="text/javascript" src="swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','player','640','260','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=ok1.xml&playlistsize=280&skin=inverted.swf&streamscript=lighttpd&playlist=right&fullscreen=true');
so.write('player');
</script>


here is XML file

<playlist version="1">

<trackList>

<track>
<title>Folk Jhummar</title>
<location>videos/Jhummar.flv</location>
<image>picts/Jhumer.JPG</image>
<annotation>Seraiki Folk Jhummar</annotation>
<info>http://www.hirrak.org</info>
</track>

<track>
<title>Hunger Free Women</title>
<location>videos/Hunger free women.flv</location>
<image>picts/hfw.JPG</image>
<annotation>Seminar on Hunger Free Women</annotation>
<info>http://www.hirrak.org</info>
</track>

<track>
<title>Mega Projects</title>
<location>videos/Mega projects.flv</location>
<image>picts/mp.JPG</image>
<annotation>Documentary on Mega Project Taunsa Barrage</annotation>
<info>http://www.hirrak.org</info>
</track>

</trackList>

</playlist>

URL: www.hirrak.org/video.htm


An urgent reponse is requested

shahiryar@gmail.com

Nov. 28, 2008Shahiryar

Hi,
anyone help me?
the seekbar & length of video is not visible into my webplayer,

my script is given below
<script type="text/javascript" src="swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','player','640','260','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=ok1.xml&playlistsize=280&skin=inverted.swf&streamscript=lighttpd&playlist=right&fullscreen=true');
so.write('player');
</script>


here is XML file

<playlist version="1">

<trackList>

<track>
<title>Folk Jhummar</title>
<location>videos/Jhummar.flv</location>
<image>picts/Jhumer.JPG</image>
<annotation>Seraiki Folk Jhummar</annotation>
<info>http://www.hirrak.org</info>
</track>

<track>
<title>Hunger Free Women</title>
<location>videos/Hunger free women.flv</location>
<image>picts/hfw.JPG</image>
<annotation>Seminar on Hunger Free Women</annotation>
<info>http://www.hirrak.org</info>
</track>

<track>
<title>Mega Projects</title>
<location>videos/Mega projects.flv</location>
<image>picts/mp.JPG</image>
<annotation>Documentary on Mega Project Taunsa Barrage</annotation>
<info>http://www.hirrak.org</info>
</track>

</trackList>

</playlist>

URL: www.hirrak.org/video.htm
also video is not played properly


An urgent reponse is requested

shahiryar@gmail.com

Nov. 28, 2008kLink

Your video files don't have any metadata.

You need to post-process the video files with a tool that will create and inject the metadata array.

Use Google to find FLVMDI, flvtool2, yamdi, flvtool++, or jFlvtool.

Dec. 01, 2008Shahiryar

Thanks a lot Klink
I have downloaded FLVMDI and have created XML files

now I again upload all my video files or just upload the XML files?

Add a reaction

You can also return to the category or try this search for related threads.

Your name *

Supported codes:

 

submit