Announcement

**swmr** · Feb 24, 2004, 03:27 PM

Re: loading bar...

Originally posted by didier
- a real progress bar -

Well, its possible to use the Microsoft ProgressBar Control - versions 5.0|6.0.

If you post the code you're using, I might be able to demonstrate the progress bar with it.

**didier** · Feb 24, 2004, 05:12 PM

You mean the Microsoft ProgressBar Control ActiveX ? Could be great... Here is the code :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>ROTATION</title>
</head>

<body link="#FF6600" vlink="#FF6600" alink="#FF6600" text="#00FFFF" bgcolor="#000000">

<table border="0" cellpadding="0" cellspacing="0" width="800" height="370">
<tr>
<td align="center" width="177" style="font-size: 12 pt">
</td>
<td align="center" width="438">
<div align="center">
<center>
<table border="18" cellpadding="0" cellspacing="8">
<tr>
<td>
<img border="0" dynsrc="http://users.skynet.be/didier.de.backer/data/experience/schneider/simulation/montage_highdef.mpg" start="fileopen" width="384" height="288" lowsrc="http://users.skynet.be/didier.de.backer/data/animations/loading.gif">
</td>
</tr>
</table>
</center>
</div>
</td>
<td align="center" width="177" style="font-size: 12 pt">
</td>
</tr>
</table>

</body>

</html>

Thanks a lot !!!

**swmr** · Feb 24, 2004, 08:39 PM

Ok,

I'll upload a video somewhere, & test some methods...

**didier** · Feb 25, 2004, 04:54 AM

Thank you very much...

You can try with my own video by skynet...

**swmr** · Feb 25, 2004, 12:11 PM

I've painted myself into a corner

(IE6-only)

This loads a shuttle-launch video from MSDN:

Code:

<html xmlns:t= "urn:schemas-microsoft-com:time">
<head>
<title>HTML+TIME(IE6): Progress-Test</title>

<?IMPORT namespace="t" implementation="#default#time2">

<script type="text/JScript">

window.onload = function isAvailable(){
var cId, v6;
try{
new ActiveXObject("MSComctlLib.ProgCtrl");
cId = "35053A22-8589-11D1-B16A-00C0F0283628";
v6 = true;
}
catch(e){
try{
new ActiveXObject("COMCTL.ProgCtrl");
cId = "0713E8D2-850A-101B-AFC0-4210102A8DA7";
}
catch(e){
cId = null;}
}
insertObject(cId, v6);
}

function insertObject(cId, v6){
var obj, tgtElm, vNew;
tgtElm = document.oControls;

if(cId != null){
obj = document.createElement("OBJECT");
obj.classid = "clsid:" + cId;
obj.id = "oProg";

document.body.insertBefore(obj, tgtElm);

if(v6){
vNew = document.getElementById("oProg");
vNew.Scrolling = 1;
vNew.BorderStyle = 1;
vNew.Appearance = 0;}
}
else{
obj = document.createElement("INPUT");
obj.type = "hidden";
obj.id = "oProg";
document.body.insertBefore(obj, tgtElm);}
}

function displayState(){
var V, P, D, S, dT, dC, prc;

V = document.getElementById("oVideo");
P = document.getElementById("oProg");
D = document.getElementById("oTV");
S = document.getElementById("oState");

switch(V.currTimeState.stateString){
case "cueing" : S.innerHTML = "Cueing: 0%";
break;

case "active" : 
dT = V.downloadTotal;dC = V.downloadCurrent;
if (dC < dT){prc = (dC / dT) * 100;P.value = prc;
S.innerHTML = "Loading: " + Math.floor(prc) + "%";
}
else{S.innerHTML = "";D.dur = "indefinite";
V.resumeElement();P.className = "noDisp";
document.oControls.className = "doDisp";
}
break;}
}

function controlState(control){
var V, F;
V = document.getElementById("oVideo");
F = document.oControls;

switch(control){
case "Preview" : 
V.pauseElement();
break;

case "Play" : 
F.oPlay.disabled = 1;
F.oStop.disabled = 0;
F.oPause.disabled = 0;
V.beginElement();
break;

case "Pause" : 
F.oPause.disabled = 1;
F.oResume.disabled = 0;
V.pauseElement();
break;

case "Resume" : 
F.oResume.disabled = 1;
F.oPause.disabled = 0;
V.resumeElement();
break;

case "Stop" : 
F.oStop.disabled = 1;
F.oPause.disabled = 1;
F.oResume.disabled = 1;
F.oPlay.disabled = 0;
V.endElement();
break;

case "Repeat" : 
if(F.oRep.checked && F.oStop.disabled == 0){
V.beginElement();}
else{
F.oStop.disabled = 1;
F.oPause.disabled = 1;
F.oResume.disabled = 1;
F.oPlay.disabled = 0;
}
break;}
}
</script>

<style type="text/css">
body{
text-align:center
}
.oDiv{
behavior:url(#default#time2);
width:354px;height:240px;
border:1px solid #000;
}
object{
width:354px;height:15px;margin-top:2px
}
input{
vertical-align:middle;margin:2px
}
.noDisp{
display:none
}
.doDisp{
display:block
}
form{margin:0}
</style>

</head>

<body>
<div id="oTV" class="oDiv" dur=".1" repeatCount="indefinite" 
onbegin="controlState('Preview')" onrepeat="displayState()">
<t:video id="oVideo" src="http://msdn.microsoft.com/workshop/samples/author/behaviors/media/movie.avi" 
onend="controlState('Repeat')" onmediaerror="alert('server connection error')" />
</div>
<form name="oControls" class="noDisp">
<input type="button" name="oPlay" value="Play" onclick="controlState('Play')" disabled>
<input type="button" name="oPause" value="Pause" onclick="controlState('Pause')">
<input type="button" name="oResume" value="Resume" onclick="controlState('Resume')" disabled>
<input type="button" name="oStop" value="Stop" onclick="controlState('Stop')" style="margin-right:5px">
<label for="loop">Loop:</label><input id="loop" name="oRep" type="checkbox" style="margin-left:0">
</form>
<br>
<label id="oState"></label>
</body>
</html>

I'd guess that .swf would be the best option for supporting more than one browser...

**didier** · Feb 25, 2004, 02:42 PM

Thanks a lot for your help...

I've tried to make a .swf with a loading bar, but I'm losing quality.

Sorry but I've forgot to tell you that my project must work on a basic IE5... I can't ask the surfer to upgrade !

I've seen that HTML+TIME 1.0 could work...

Isn'it possible to simply insert a progressbar an a play/stop button in my code ?

Anyway, could you give me the url where the famous player shows the launch of the shuttle ?

"It seems so difficult to make a simple thing ! That's the paradox of my life..."

Didier

**didier** · Feb 25, 2004, 03:09 PM

Isn'it possible to get and show the number of received bytes during the downloading process ?

The percentage should be found by comparing it with the total value...

**didier** · Feb 25, 2004, 03:13 PM

Why isn'it possible to see the loading bar in the WMP 9, just like in the previous versions ?

**swmr** · Feb 25, 2004, 03:18 PM

Originally posted by didier
It seems so difficult to make a simple thing!

I can relate to that

Those "downloadTotal & downloadCurrent" properties are the only thing I ran across that would drive a progress bar, but I'm no expert either...

and there is no URL --- just copy & paste the code (if that's what you meant).

There might be a server side solution to this, though I have no idea on that.

**didier** · Feb 25, 2004, 04:36 PM

The total value is known because it's the file size. The percentage equals (download.current/file size)*100...

I've desperatly attached a picture of what I'm dreaming about !

Have you tried to copy my code in a html file and see how it looks like ?

Would you agree to mix my code with yours and make the cocktail works ?

I could try it on a IE6 browser but I think I'll give up...

Thanks anyway and sorry to have wasted your time !

Didier

Attached Files

**swmr** · Feb 25, 2004, 04:51 PM

You haven't wasted anyone's time... I just do this for fun.

It wouldn't take much to mix that into your code. Just paste it in there wherever you want, and don't change any names.

-- don't know about the media player... I've only got version 9, so that probably wouldn't give me much insight.

**didier** · Feb 25, 2004, 05:01 PM

I've already pasted it on my first reply above dated 02-24-2004 02:12 PM...

Did

**swmr** · Feb 25, 2004, 05:13 PM

So, are you asking me to put the body section into that table row?

**didier** · Feb 25, 2004, 05:26 PM

I think so...

I mean if you paste my simple code in a new blank html file, you could see how it looks like... It's only a frame with the url of my video stored by skynet...

After that, it's up to you for the mix...

Announcement

loading bar...

loading bar...

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment