Web Analytics Made Easy -
StatCounter loading bar... - CodingForum

Announcement

Collapse
No announcement yet.

loading bar...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • loading bar...

    Hi Guys

    Whilst a mpg file is loading in my full screen page, I have a gif displayed saying 'Loading.','Loading..','Loading...'

    I'd like to know if it's possible to replace that gif by a real progress bar (nothing at all to do with pre-loading images) dispaying a real purcentage of the downloading...

    I've tried to insert a WMP as an activeX control and it's ok with the version 6.4... Unfortunately, all the computers upgraded with WMP9 don't show the "seek bar" anymore !

    Can anybody help me to do this ?

    Didier

  • #2
    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.
    hmm... ?

    Comment


    • #3
      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 !!!

      Comment


      • #4
        Ok,

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

        Comment


        • #5
          Thank you very much...

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

          Comment


          • #6
            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...
            hmm... ?

            Comment


            • #7
              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

              Comment


              • #8
                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...

                Comment


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

                  Comment


                  • #10
                    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.
                    hmm... ?

                    Comment


                    • #11
                      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

                      Comment


                      • #12
                        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.
                        hmm... ?

                        Comment


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

                          Did

                          Comment


                          • #14
                            So, are you asking me to put the body section into that table row?
                            hmm... ?

                            Comment


                            • #15
                              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...

                              Comment

                              Working...
                              X