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.
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?
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.
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.
Is totaltime global? If not, how is it going to get from getUpdate() into onChange: function()?
How do I make it global? I thought not putting var in front makes it global.
I thought not putting var in front makes it global
Only 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.
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.
@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...
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.
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.
if(typ == "time") { totalTime = pr1+pr2; )
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.
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>
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.
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!
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!!!
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!!!
@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.
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!!!
@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...
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...
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
Hi,
the seek bar and total time doesn't appear into my Webplayer, Can you please help me in this regard?
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>
An urgent reponse is requested
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
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.
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?
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)+"%" ;}